From 3a906f732ec31b27cb9532cbede79c17eb046e85 Mon Sep 17 00:00:00 2001 From: Yuriy Yevstihnyeyev Date: Tue, 21 Oct 2025 20:14:13 +0300 Subject: [PATCH 01/24] docs: add DS sections --- articles/upgrading/index.adoc | 338 +++++++++++++++++++++++++++++++++- 1 file changed, 335 insertions(+), 3 deletions(-) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index a90ccb0aa5..8de3def241 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -184,9 +184,10 @@ Vaadin 25 simplifies the theme/styling system to bring it closer to normal/nativ Below are the main highlights of the changes and more detailed instructions are described in link:https://github.com/vaadin/platform/issues/7453[Theming System Renewal]. - The special `frontend/themes` folder, and the `components` sub-folder for CSS shadow-DOM injection, is deprecated (but still supported). +Injecting CSS into Vaadin Components’ shadow DOM through the components subfolder in your theme folder is disabled by default. Shadow DOM styling is no longer recommended (as of V24), but if you still need to use it, it can be enabled with the feature flag `themeComponentStyles`. + The [classname]`@Theme` annotation is deprecated. Instead, [classname]`StyleSheet` annotation to be used for loading one or more stylesheets from public static resources locations (e.g. `META-INF/resources/`), whereas [classname]`CssImport` loads one or more stylesheets from the `src/main/frontend/` folder and use mechanisms native to HTML, CSS, and React (e.g. `@import url("morestyles.css")` in CSS). `StyleSheet` annotation is now a recommended way to load Vaadin theme for the application — to be placed on the application class implementing [classname]`AppShellConfigurator`. Below are some examples of how to use it: @@ -208,13 +209,344 @@ public class Application implements AppShellConfigurator {} // your custom styles go here ... ---- - -The [filename]`theme.json` configuration file is deprecated (but still supported). +The [filename]`theme.json` configuration file is deprecated (but still supported, except the `lumoImports` property). The `themeFor` parameter of the [classname]`@CssImport` annotation (for shadow-DOM injection) is deprecated (but still supported). The special [filename]`document.css` file (for loading styles into the document root in embedded components) is removed as no longer necessary. +=== Themes + +==== Lumo Theme +The Lumo theme is no longer loaded by default, except if you’re using the [classname]`@Theme` annotation to load an application theme folder. If you’re not using [classname]`@Theme`, and instead load stylesheets with [classname]`@StyleSheet` or [classname]`@CssImport`, you need to add an import for Lumo in one of them: + +[source,css] +---- +@import "@vaadin/vaadin-lumo-styles/lumo.css"; +---- + +All Lumo styles, including badges, but excluding Lumo Utility Classes are included by default when the Lumo theme is loaded. To load the utility classes, add the following line to a stylesheet: + +[source,css] +---- +@import "@vaadin/vaadin-lumo-styles/utility.css"; +---- + +Vaadin 25 also supports Tailwind CSS utility classes. + +NOTE: The way the Lumo theme is injected into Vaadin components has been refactored to not use the `registerStyles()` helper. This should not cause any breaking changes in applications; please report issues at link:https://github.com/vaadin/web-components/issues[vaadin/web-components] if you find otherwise. + +==== Material Theme +The Material theme is no longer supported in Vaadin 25. You can migrate your application to the Lumo or Aura theme or implement your own Material Design theme on top of the new component base styles. + +==== Component Base Styles +The un-themed base styles in Vaadin components have changed significantly in Vaadin 25. They are now much less bare-bones and actually provide a better starting point for custom themes. This does mean that custom themes built on top of the Vaadin 25 component base styles need to be heavily refactored. The components’ Styling pages provide lists of style properties (CSS custom properties) that make them easier to customize. + +== Changes in Flow and Web Components + +=== Themes and Styling + +==== WebComponentExporter +The [classname]`WebComponentExporter` feature in Flow allows you to export Flow components as Web Components for embedding into non-Vaadin UIs. In Vaadin 25, stylesheets loaded into exported components using the [classname]`@CssImport` annotation only load those styles into the exported component’s shadow DOM, not the surrounding page as before. To load the same styles into the surrounding page, import the stylesheet to it separately. + +==== Overlays +Component overlays (like Dialog or the ComboBox dropdown) are no longer rendered outside of the component itself. This causes the following breaking changes to overlay styling: + +* The `overlayClass` property and the [methodname]`setOverlayClassName` method in Flow are gone. Apply a normal classname to the component instead. +* The `vaadin-xyz-overlay` (such as `vaadin-dialog-overlay`) elements have been removed (as they are now unnecessary). Refactor any CSS targeting these elements to target the component itself instead (e.g. `vaadin-dialog` instead of `vaadin-dialog-overlay`). Other CSS selectors are unaffected by this change. + +You’ll find the appropriate selector in the component’s Styling page. + +==== React Components +The Lumo CSS files have been removed from the `@vaadin/react-components` package. As mentioned above, the Lumo theme should be imported from `@vaadin/vaadin-lumo-styles` instead. + +.Before +[source,typescript] +---- +/* If imported through a CSS file */ +@import '@vaadin/react-components/css/Lumo.css'; + +/* If imported through Typescript */ +import '@vaadin/react-components/css/Lumo.css'; +---- + +.After +[source,typescript] +---- +/* If imported through a CSS file */ +@import '@vaadin/vaadin-lumo-styles/lumo.css'; + +/* If imported through Typescript */ +import '@vaadin/vaadin-lumo-styles/lumo.css'; +---- + +One exception is the `@vaadin/react-components/css/lumo/Utility.module.css` CSS module, which has been preserved for backward compatibility as the Lumo package does not expose utilities as a CSS module. + +=== Components + +==== App Layout +The `bottom` attribute was removed and can no longer be used to target the bottom navbar. Instead, use the selector `::part(navbar-bottom)` to target it with CSS. + +==== Cookie Consent +The Cookie Consent component has been removed. Vaadin does not provide any replacement, but several third party options exist, such as link:https://github.com/orestbida/cookieconsent[orestbida/cookieconsent]. + +==== Confirm Dialog +The Flow [classname]`ConfirmDialog` now only implements [classname]`HasComponents` instead of [classname]`HasOrderedComponents`. The following methods are not available anymore: [methodname]`replace`, [methodname]`indexOf`, [methodname]`getComponentCount`, [methodname]`getComponentAt`, [methodname]`getChildren`. + +Methods that allowed passing an [classname]`Element` instance have been removed. Use the corresponding alternatives that allow passing a [classname]`Component` instance instead. + +==== Context Menu +The [methodname]`add` method has been removed from the Flow [classname]`ContextMenu`. Instead, use [methodname]`addItem` to add menu items, or [methodname]`addComponent` to add generic components without wrapping them into a menu item. + +==== Popover +The Lit/React component’s `contentWidth` and `contentHeight` properties have been replaced by `width` and `height`. + +==== CRUD +The “New Item” button in the CRUD component no longer uses the primary style variant by default. To get the old default back: + +[.example] +[source,java] +---- +crud.getNewButton().addThemeVariants(ButtonVariant.LUMO_PRIMARY); +---- + +==== Grid & Tree Grid +Tree Grid’s client-side approach to data loading has been refactored. Instead of requesting each hierarchy level separately, it now sends a single request to the server and receives all visible data in a flat list. This results in two important changes: + +* [propertyname]`pageSize` now applies to the entire flattened hierarchy rather than each level individually as before +* [propertyname]`expandedItems` are no longer exposed to the client side as a full array; only the depth of visible items is provided + +The [classname]`TreeGridElement#isLoadingExpandedRows` TestBench API has been removed. You no longer need to wait for expanded rows specifically since they are loaded in the same request with other rows. + +The [classname]`TreeGridElement#getNumberOfExpandedRows` TestBench API has been removed. Use unit tests instead to verify that exact items are expanded. + +.Before (integration test) +[source,java] +---- +private TreeGridElement treeGridElement; + +@Test +public void shouldHaveSomeRowsExpanded() { + Assert.assertEquals(2, treeGridElement.getNumberOfExpandedItems()); +} +---- + +.After (unit test) +[source,java] +---- +private TreeGrid treeGrid; + +@Test +public void shouldHaveSomeRowsExpanded() { + Assert.assertTrue(treeGrid.isExpanded("Item 0")); + Assert.assertTrue(treeGrid.isExpanded("Item 0-1")); +} +---- + +The section below is relevant if your code extends Grid or TreeGrid, or uses low-level APIs like [classname]`HierarchicalDataCommunicator`. + +===== Low-level API changes +The [classname]`GridArrayUpdater.UpdateQueueData` class has been removed, along with related APIs: + +* The [methodname]`setUpdateQueueData` method in [classname]`GridArrayUpdater` has been removed +* The [methodname]`getUpdateQueueData` method in [classname]`GridArrayUpdater` has been removed +* Parameters that included [classname]`UpdateQueueData` in their type have been removed from all constructors and methods + +.Before +[source,java] +---- +protected > Grid( +Class beanType, +SerializableBiFunction updateQueueBuilder, +B dataCommunicatorBuilder) + +... + +protected GridArrayUpdater createDefaultArrayUpdater( +SerializableBiFunction updateQueueFactory) +---- + +.After +[source,java] +---- +protected > Grid( +Class beanType, +B dataCommunicatorBuilder) + +... + +protected GridArrayUpdater createDefaultArrayUpdater() +---- + +The [classname]`TreeGridArrayUpdater` interface has been removed. The [classname]`GridArrayUpdater` interface should be used instead. + +==== Charts +The [methodname]`setWidthAdjust` / [methodname]`getWidthAdjust` methods of the [classname]`Title` class have been removed because it was removed from the underlying HighCharts library. + +The [classname]`DrillUpButton` class has been removed from the codebase and all of its related API, e.g., [methodname]`setDrillUpButton` / [methodname]`getDrillUpButton` from the [classname]`Drilldown` class. Use Breadcrumbs instead. Likewise, the [methodname]`setDrillUpText` / [methodname]`getDrillUpText` has been removed from the [classname]`Lang` class. + +All methods that accept [classname]`Date` as parameter that were previously marked as deprecated have been removed. + +Chart configurations are now serialized using Jackson 3. The [methodname]`ChartSerialization.setObjectMapperInstance` method that can be used to customize serialization behavior now expects a [classname]`tools.jackson.databind.ObjectWriter` instance. + +==== Date Picker and Date Time Picker +The following changes have been made to the internal DOM structure of the Date Picker overlay, which may affect custom styling: + +* The `vaadin-date-picker-overlay-content` element is now a CSS grid layout instead of a flexbox. +* The `overlay-header` part has been removed. + +==== Date Time Picker +In the Flow [classname]`DateTimePicker` component, validation is no longer triggered on blur if the value remains unchanged after user interaction, making this behavior consistent with the rest of the field components, which already received a similar update in V24. + +Incomplete input, where only a date or only a time is entered, is now treated as invalid. The corresponding error message can be configured via [classname]`DateTimePickerI18n`: + +[.example] +[source,java] +---- +dateTimePicker.setI18n(new DateTimePickerI18n() +.setIncompleteInputErrorMessage("Please enter both date and time")); +---- + +==== Time Picker +The Time Picker no longer uses `vaadin-time-picker-combo-box` internally. This may affect custom shadow DOM styling of the component. + +The [classname]`TimePickerOverlayElement` TestBench element has been removed as the component now uses the native HTML popover mechanism for its dropdown. The [methodname]`getItem` and [methodname]`getLastItem` methods are now available on [classname]`TimePickerElement` itself. + +==== Details +The [methodname]`setContent` and [methodname]`addContent` methods have been removed from the Flow [classname]`Details` component. Use regular methods from [classname]`HasComponents` such as [methodname]`add`, [methodname]`remove`, [methodname]`removeAll` instead. + +==== Dialog and Confirm Dialog +[classname]`Dialog` and [classname]`ConfirmDialog` do not show a closing animation anymore when just removing the component from the UI / DOM. Instead, the dialog should be closed and the `closed` event needs to be used to wait for the closing animation to finish before removing the component. + +For Flow this is relevant when manually adding / removing the dialog from the UI. The event is not needed when just calling [methodname]`dialog.open()` without adding the dialog to the UI. + +.Before +[source,java] +---- +var dialog = new Dialog(); +add(dialog); +dialog.open(); + +// When dialog is not needed anymore +remove(dialog); +---- + +.After +[source,java] +---- +var dialog = new Dialog(); +dialog.addClosedListener(e -> remove(dialog)); +add(dialog); +dialog.open(); + +// When dialog is not needed anymore +dialog.close(); +---- + +For Hilla / React this is relevant when rendering dialogs conditionally. + +.Before +[source,typescript] +---- +const opened = useSignal(true); + +{ opened ? : null } + +// When dialog is not needed anymore +opened.value = false; +---- + +.After +[source,typescript] +---- +const ref = useRef(null); +const opened = useSignal(true); + +{ + opened + ? opened.value = false}/> + : null +} + +// When dialog is not needed anymore +ref.current?.close(); +---- + +==== Form Layout +The following custom CSS properties have been removed from `vaadin-form-item`: + +* `--vaadin-form-item-label-width` +* `--vaadin-form-item-label-spacing` +* `--vaadin-form-item-row-spacing` + +Use the following CSS properties on `vaadin-form-layout` instead: + +* `--vaadin-form-layout-label-width` +* `--vaadin-form-layout-label-spacing` +* `--vaadin-form-layout-row-spacing` + +==== Map +The Map component’s `borderless` / `BORDERLESS` style variant has been renamed `no-border` / `NO_BORDER` for consistency with other components. + +==== Menu Bar +The TestBench API `MenuBarElement.OVERLAY_TAG` has been removed. To get a reference to a submenu, instead use [methodname]`MenuBarButtonElement.openSubMenu` which returns a reference. + +==== Message Input +The send button no longer uses the Primary style variant by default. To revert this change you can style the button with CSS: + +[.example] +[source,css] +---- +vaadin-message-input > vaadin-message-input-button { + background-color: var(--lumo-primary-color); + color: var(--lumo-primary-contrast-color); +} +---- + +Also, the send button now is a `vaadin-message-input-button` instead of `vaadin-button`. + +==== Multi-Select Combo Box +The Multi-Select Combo Box no longer uses `vaadin-multi-select-combo-box-internal` internally. This may affect custom shadow DOM styling of the component. + +==== Rich Text Editor +The `on` attribute was removed and can no longer be used to target toggled-on buttons. Instead, use the selector `::part(toolbar-button-pressed)` to target them with CSS. + +==== Split Layout +The Split Layout component no longer sets `overflow:auto` on its two child elements. The link:https://vaadin.com/docs/latest/components/scroller[Scroller] component is recommended to make them scrollable on overflow. Alternatively, you can apply it manually with CSS: + +[.example] +[source,css] +---- +vaadin-split-layout > * { + overflow: auto; +} +---- + +The `SplitterDragendEvent` and `addSplitterDragendListener` have been renamed to `SplitterDragEndEvent` and `addSplitterDragEndListener`, respectively. + +==== Tabs / Tab Sheet +The [classname]`TabsVariant.LUMO_ICON_ON_TOP` and [classname]`TabSheetVariant.LUMO_ICON_ON_TOP` theme variants have been removed. Apply the [classname]`TabVariant.LUMO_ICON_ON_TOP` to individual tabs instead. + +==== Text Field +The [classname]`HasPrefixAndSuffix` interface has been removed from the Flow [classname]`TextField` and related components. The components now implement [classname]`HasPrefix` and [classname]`HasSuffix` instead. + +==== Upload +The `upload-file` elements representing files in the list now use CSS grid layout instead of flexbox. This may affect custom styling of the element. + +The `row` and `info` parts have been removed. + +==== Validation +Flow components using validation do not implement [classname]`HasClientValidation` anymore, as such the [methodname]`addClientValidatedEventListener` method has been removed. Consider using [classname]`ValidationStatusChangeEvent` to get notified when users enter input that can not be parsed. + +=== Optional Changes + +These changes are optional, as old approaches still work (with the exceptions listed in the Breaking Changes section), but recommended to get your app to the new best practices in Vaadin 25, and to avoid breaking changes in later major versions. + +* Refactor component styles from shadow DOM styles to normal css (this was the recommended approach already in V24) +* Single [classname]`@CssImport` of master stylesheet instead of [classname]`@Theme` or multiple [classname]`@CssImport`-s +* Load additional stylesheets through master stylesheet with `@import` +* Move stylesheets from `frontend/themes/` to `frontend` + == Security Configuration Changes The deprecated [classname]`VaadinWebSecurity` class has been removed from Vaadin 25. Use instead the [classname]`VaadinSecurityConfigurer` base class for your security configuration. Below is an example of this: From 9fda91d7aee96889f34d7ba8d9b96441b079a80b Mon Sep 17 00:00:00 2001 From: Yuriy Yevstihnyeyev Date: Fri, 24 Oct 2025 11:15:46 +0300 Subject: [PATCH 02/24] chore: fix Value errors --- articles/upgrading/index.adoc | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index 8de3def241..015dbdf6ba 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -186,7 +186,7 @@ Below are the main highlights of the changes and more detailed instructions are The special `frontend/themes` folder, and the `components` sub-folder for CSS shadow-DOM injection, is deprecated (but still supported). -Injecting CSS into Vaadin Components’ shadow DOM through the components subfolder in your theme folder is disabled by default. Shadow DOM styling is no longer recommended (as of V24), but if you still need to use it, it can be enabled with the feature flag `themeComponentStyles`. +Injecting CSS into Vaadin components’ shadow DOM through the components sub-folder in your theme folder is disabled by default. Shadow DOM styling is no longer recommended (as of V24), but if you still need to use it, it can be enabled with the feature flag `themeComponentStyles`. The [classname]`@Theme` annotation is deprecated. Instead, [classname]`StyleSheet` annotation to be used for loading one or more stylesheets from public static resources locations (e.g. `META-INF/resources/`), whereas [classname]`CssImport` loads one or more stylesheets from the `src/main/frontend/` folder and use mechanisms native to HTML, CSS, and React (e.g. `@import url("morestyles.css")` in CSS). @@ -247,12 +247,12 @@ The un-themed base styles in Vaadin components have changed significantly in Vaa === Themes and Styling ==== WebComponentExporter -The [classname]`WebComponentExporter` feature in Flow allows you to export Flow components as Web Components for embedding into non-Vaadin UIs. In Vaadin 25, stylesheets loaded into exported components using the [classname]`@CssImport` annotation only load those styles into the exported component’s shadow DOM, not the surrounding page as before. To load the same styles into the surrounding page, import the stylesheet to it separately. +The [classname]`WebComponentExporter` feature in Flow allows you to export Flow components as Web Components for embedding into non-Vaadin user interfaces. In Vaadin 25, stylesheets loaded into exported components using the [classname]`@CssImport` annotation only load those styles into the exported component’s shadow DOM, not the surrounding page as before. To load the same styles into the surrounding page, import the stylesheet to it separately. ==== Overlays -Component overlays (like Dialog or the ComboBox dropdown) are no longer rendered outside of the component itself. This causes the following breaking changes to overlay styling: +Component overlays (like Dialog or the Combo Box drop-down) are no longer rendered outside of the component itself. This causes the following breaking changes to overlay styling: -* The `overlayClass` property and the [methodname]`setOverlayClassName` method in Flow are gone. Apply a normal classname to the component instead. +* The `overlayClass` property and the [methodname]`setOverlayClassName` method in Flow are gone. Apply a normal class name to the component instead. * The `vaadin-xyz-overlay` (such as `vaadin-dialog-overlay`) elements have been removed (as they are now unnecessary). Refactor any CSS targeting these elements to target the component itself instead (e.g. `vaadin-dialog` instead of `vaadin-dialog-overlay`). Other CSS selectors are unaffected by this change. You’ll find the appropriate selector in the component’s Styling page. @@ -343,10 +343,10 @@ public void shouldHaveSomeRowsExpanded() { } ---- -The section below is relevant if your code extends Grid or TreeGrid, or uses low-level APIs like [classname]`HierarchicalDataCommunicator`. +The section below is relevant if your code extends Grid or Tree Grid, or uses low-level API like [classname]`HierarchicalDataCommunicator`. -===== Low-level API changes -The [classname]`GridArrayUpdater.UpdateQueueData` class has been removed, along with related APIs: +===== Low-Level API Changes +The [classname]`GridArrayUpdater.UpdateQueueData` class has been removed, along with related API: * The [methodname]`setUpdateQueueData` method in [classname]`GridArrayUpdater` has been removed * The [methodname]`getUpdateQueueData` method in [classname]`GridArrayUpdater` has been removed @@ -381,7 +381,7 @@ protected GridArrayUpdater createDefaultArrayUpdater() The [classname]`TreeGridArrayUpdater` interface has been removed. The [classname]`GridArrayUpdater` interface should be used instead. ==== Charts -The [methodname]`setWidthAdjust` / [methodname]`getWidthAdjust` methods of the [classname]`Title` class have been removed because it was removed from the underlying HighCharts library. +The [methodname]`setWidthAdjust` / [methodname]`getWidthAdjust` methods of the [classname]`Title` class have been removed because it was removed from the underlying Highcharts library. The [classname]`DrillUpButton` class has been removed from the codebase and all of its related API, e.g., [methodname]`setDrillUpButton` / [methodname]`getDrillUpButton` from the [classname]`Drilldown` class. Use Breadcrumbs instead. Likewise, the [methodname]`setDrillUpText` / [methodname]`getDrillUpText` has been removed from the [classname]`Lang` class. @@ -410,15 +410,15 @@ dateTimePicker.setI18n(new DateTimePickerI18n() ==== Time Picker The Time Picker no longer uses `vaadin-time-picker-combo-box` internally. This may affect custom shadow DOM styling of the component. -The [classname]`TimePickerOverlayElement` TestBench element has been removed as the component now uses the native HTML popover mechanism for its dropdown. The [methodname]`getItem` and [methodname]`getLastItem` methods are now available on [classname]`TimePickerElement` itself. +The [classname]`TimePickerOverlayElement` TestBench element has been removed as the component now uses the native HTML popover mechanism for its drop-down. The [methodname]`getItem` and [methodname]`getLastItem` methods are now available on [classname]`TimePickerElement` itself. ==== Details The [methodname]`setContent` and [methodname]`addContent` methods have been removed from the Flow [classname]`Details` component. Use regular methods from [classname]`HasComponents` such as [methodname]`add`, [methodname]`remove`, [methodname]`removeAll` instead. ==== Dialog and Confirm Dialog -[classname]`Dialog` and [classname]`ConfirmDialog` do not show a closing animation anymore when just removing the component from the UI / DOM. Instead, the dialog should be closed and the `closed` event needs to be used to wait for the closing animation to finish before removing the component. +[classname]`Dialog` and [classname]`ConfirmDialog` do not show a closing animation anymore when removing the component from the UI / DOM. Instead, the dialog should be closed and the `closed` event needs to be used to wait for the closing animation to finish before removing the component. -For Flow this is relevant when manually adding / removing the dialog from the UI. The event is not needed when just calling [methodname]`dialog.open()` without adding the dialog to the UI. +For Flow this is relevant when manually adding / removing the dialog from the UI. The event is not needed when calling [methodname]`dialog.open()` without adding the dialog to the UI. .Before [source,java] @@ -489,7 +489,7 @@ Use the following CSS properties on `vaadin-form-layout` instead: The Map component’s `borderless` / `BORDERLESS` style variant has been renamed `no-border` / `NO_BORDER` for consistency with other components. ==== Menu Bar -The TestBench API `MenuBarElement.OVERLAY_TAG` has been removed. To get a reference to a submenu, instead use [methodname]`MenuBarButtonElement.openSubMenu` which returns a reference. +The TestBench API `MenuBarElement.OVERLAY_TAG` has been removed. To get a reference to a sub-menu, instead use [methodname]`MenuBarButtonElement.openSubMenu` which returns a reference. ==== Message Input The send button no longer uses the Primary style variant by default. To revert this change you can style the button with CSS: @@ -540,7 +540,7 @@ Flow components using validation do not implement [classname]`HasClientValidatio === Optional Changes -These changes are optional, as old approaches still work (with the exceptions listed in the Breaking Changes section), but recommended to get your app to the new best practices in Vaadin 25, and to avoid breaking changes in later major versions. +These changes are optional, as old approaches still work (with the exceptions listed in the Breaking Changes section), but recommended to get your application to the new best practices in Vaadin 25, and to avoid breaking changes in later major versions. * Refactor component styles from shadow DOM styles to normal css (this was the recommended approach already in V24) * Single [classname]`@CssImport` of master stylesheet instead of [classname]`@Theme` or multiple [classname]`@CssImport`-s From 62c59e62caf562c7183fa7cfb54d6318c7500c0f Mon Sep 17 00:00:00 2001 From: Yuriy Yevstihnyeyev Date: Sun, 26 Oct 2025 20:23:02 +0200 Subject: [PATCH 03/24] chore: merge theming sections --- articles/upgrading/index.adoc | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index 015dbdf6ba..bbf4046d2f 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -178,7 +178,7 @@ Vaadin Quarkus extension is changed to build production package by default. No n To allow project to keep build configuration unchanged, Vaadin Quarkus extension has `vaadin.build.enabled` property to change the default behavior. Disable Vaadin plugin by adding `vaadin.build.enabled=false` in `application.properties` file to keep using profile based configuration. -== Changes in Theming System +== Themes and Styling Vaadin 25 simplifies the theme/styling system to bring it closer to normal/native web development, and minimizes Vaadin-specific peculiarities, while keeping migration from earlier versions as painless as possible. @@ -209,15 +209,15 @@ public class Application implements AppShellConfigurator {} // your custom styles go here ... ---- + The [filename]`theme.json` configuration file is deprecated (but still supported, except the `lumoImports` property). The `themeFor` parameter of the [classname]`@CssImport` annotation (for shadow-DOM injection) is deprecated (but still supported). The special [filename]`document.css` file (for loading styles into the document root in embedded components) is removed as no longer necessary. -=== Themes +=== Lumo Theme -==== Lumo Theme The Lumo theme is no longer loaded by default, except if you’re using the [classname]`@Theme` annotation to load an application theme folder. If you’re not using [classname]`@Theme`, and instead load stylesheets with [classname]`@StyleSheet` or [classname]`@CssImport`, you need to add an import for Lumo in one of them: [source,css] @@ -236,20 +236,20 @@ Vaadin 25 also supports Tailwind CSS utility classes. NOTE: The way the Lumo theme is injected into Vaadin components has been refactored to not use the `registerStyles()` helper. This should not cause any breaking changes in applications; please report issues at link:https://github.com/vaadin/web-components/issues[vaadin/web-components] if you find otherwise. -==== Material Theme +=== Material Theme + The Material theme is no longer supported in Vaadin 25. You can migrate your application to the Lumo or Aura theme or implement your own Material Design theme on top of the new component base styles. -==== Component Base Styles -The un-themed base styles in Vaadin components have changed significantly in Vaadin 25. They are now much less bare-bones and actually provide a better starting point for custom themes. This does mean that custom themes built on top of the Vaadin 25 component base styles need to be heavily refactored. The components’ Styling pages provide lists of style properties (CSS custom properties) that make them easier to customize. +=== Component Base Styles -== Changes in Flow and Web Components +The un-themed base styles in Vaadin components have changed significantly in Vaadin 25. They are now much less bare-bones and actually provide a better starting point for custom themes. This does mean that custom themes built on top of the Vaadin 25 component base styles need to be heavily refactored. The components’ Styling pages provide lists of style properties (CSS custom properties) that make them easier to customize. -=== Themes and Styling +=== WebComponentExporter -==== WebComponentExporter The [classname]`WebComponentExporter` feature in Flow allows you to export Flow components as Web Components for embedding into non-Vaadin user interfaces. In Vaadin 25, stylesheets loaded into exported components using the [classname]`@CssImport` annotation only load those styles into the exported component’s shadow DOM, not the surrounding page as before. To load the same styles into the surrounding page, import the stylesheet to it separately. -==== Overlays +=== Overlays + Component overlays (like Dialog or the Combo Box drop-down) are no longer rendered outside of the component itself. This causes the following breaking changes to overlay styling: * The `overlayClass` property and the [methodname]`setOverlayClassName` method in Flow are gone. Apply a normal class name to the component instead. @@ -257,7 +257,8 @@ Component overlays (like Dialog or the Combo Box drop-down) are no longer render You’ll find the appropriate selector in the component’s Styling page. -==== React Components +=== React Components + The Lumo CSS files have been removed from the `@vaadin/react-components` package. As mentioned above, the Lumo theme should be imported from `@vaadin/vaadin-lumo-styles` instead. .Before @@ -542,7 +543,7 @@ Flow components using validation do not implement [classname]`HasClientValidatio These changes are optional, as old approaches still work (with the exceptions listed in the Breaking Changes section), but recommended to get your application to the new best practices in Vaadin 25, and to avoid breaking changes in later major versions. -* Refactor component styles from shadow DOM styles to normal css (this was the recommended approach already in V24) +* Refactor component styles from shadow DOM styles to normal CSS (this was the recommended approach already in V24) * Single [classname]`@CssImport` of master stylesheet instead of [classname]`@Theme` or multiple [classname]`@CssImport`-s * Load additional stylesheets through master stylesheet with `@import` * Move stylesheets from `frontend/themes/` to `frontend` From 4a1e3439d1a67aea833b81870673b4ba2d1a932a Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Mon, 27 Oct 2025 11:04:12 +0400 Subject: [PATCH 04/24] add more details about how to upgrade TreeGrid --- articles/upgrading/index.adoc | 118 +++++++++++++++++++++------------- 1 file changed, 75 insertions(+), 43 deletions(-) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index bbf4046d2f..419420334f 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -312,17 +312,18 @@ crud.getNewButton().addThemeVariants(ButtonVariant.LUMO_PRIMARY); ---- ==== Grid & Tree Grid -Tree Grid’s client-side approach to data loading has been refactored. Instead of requesting each hierarchy level separately, it now sends a single request to the server and receives all visible data in a flat list. This results in two important changes: +Tree Grid's client-side approach to data loading has been refactored. Instead of requesting each hierarchy level separately, it now sends a single request to the server and receives all visible data in a flat list. This resulted in several breaking changes that are explained below. -* [propertyname]`pageSize` now applies to the entire flattened hierarchy rather than each level individually as before -* [propertyname]`expandedItems` are no longer exposed to the client side as a full array; only the depth of visible items is provided +The [propertyname]`pageSize` property now applies to the entire flattened hierarchy rather than each level individually as before. -The [classname]`TreeGridElement#isLoadingExpandedRows` TestBench API has been removed. You no longer need to wait for expanded rows specifically since they are loaded in the same request with other rows. +Expanded items are no longer exposed to the client side as a plain array. Instead, the web component receives each item’s depth information and uses it to display the data as a tree structure. -The [classname]`TreeGridElement#getNumberOfExpandedRows` TestBench API has been removed. Use unit tests instead to verify that exact items are expanded. +As a result, the [methodname]`TreeGridElement#isLoadingExpandedRows` TestBench API has been removed. You no longer need to wait for expanded rows specifically since they are loaded in the same request with other rows. -.Before (integration test) -[source,java] +The [methodname]`TreeGridElement#getNumberOfExpandedRows` TestBench API has also been removed. Use unit tests instead to verify that exact items are expanded: + +[source,java,role="before"] +.integration test ---- private TreeGridElement treeGridElement; @@ -331,9 +332,8 @@ public void shouldHaveSomeRowsExpanded() { Assert.assertEquals(2, treeGridElement.getNumberOfExpandedItems()); } ---- - -.After (unit test) -[source,java] +[source,java,role="after"] +.unit test ---- private TreeGrid treeGrid; @@ -344,42 +344,82 @@ public void shouldHaveSomeRowsExpanded() { } ---- -The section below is relevant if your code extends Grid or Tree Grid, or uses low-level API like [classname]`HierarchicalDataCommunicator`. +The following section is relevant if your code extends [classname]`Grid` or [classname]`TreeGrid`, or uses low-level APIs like [classname]`HierarchicalDataCommunicator`. -===== Low-Level API Changes +.Low-Level API Changes +[%collapsible] +==== The [classname]`GridArrayUpdater.UpdateQueueData` class has been removed, along with related API: * The [methodname]`setUpdateQueueData` method in [classname]`GridArrayUpdater` has been removed * The [methodname]`getUpdateQueueData` method in [classname]`GridArrayUpdater` has been removed -* Parameters that included [classname]`UpdateQueueData` in their type have been removed from all constructors and methods +* Parameters that included [classname]`UpdateQueueData` in their type have been removed from all [classname]`Grid` and [classname]`TreeGrid` constructors and methods: -.Before -[source,java] +[source,java,role="before"] ---- protected > Grid( -Class beanType, -SerializableBiFunction updateQueueBuilder, -B dataCommunicatorBuilder) - -... + Class beanType, + SerializableBiFunction updateQueueBuilder, + B dataCommunicatorBuilder) +---- +[source,java,role="after"] +---- +protected > Grid( + Class beanType, + B dataCommunicatorBuilder) +---- +[source,java,role="before"] +---- protected GridArrayUpdater createDefaultArrayUpdater( -SerializableBiFunction updateQueueFactory) + SerializableBiFunction updateQueueFactory) +---- +[source,java,role="after"] +---- +protected GridArrayUpdater createDefaultArrayUpdater() ---- -.After +The [classname]`TreeGridArrayUpdater` interface has also been removed. The [classname]`GridArrayUpdater` interface now handles both hierarchical and non-hierarchical updates. + +The [classname]`HierarchicalDataCommunicator` class in Flow has been fully refactored to use a flat list structure for representing hierarchical data on the client side. Although it still extends the [classname]`DataCommunicator` class, its internal implementation has been completely redesigned to optimize hierarchy rendering and address various bugs. This caused the following breaking changes: + +* The [propertyname]`arrayUpdater` parameter has been removed from all [classname]`HierarchicalDataCommunicator` constructors. It now re-renders modified items by making granular [methodname]`Update#set(int index, List items)` calls. +* The protected [methodname]`createHierarchyMapper` and [methodname]`getHierarchyMapper` methods, as well as the [classname]`HierarchyMapper`` concept itself, have been removed. +* The protected [methodname]`doUnregister` method has been removed. +* The protected [methodname]`getPassivatedKeys` method has been removed. +* The protected [methodname]`setFilter` method has been removed. Use the returned consumer of the [methodname]`setDataProvider(HierarchicalDataProvider, Object)` method instead. +* The protected [methodname]`collapse(T item, boolean syncClient)` method has been removed. Use the [methodname]`collapse(T item)` method instead. +* The protected [methodname]`expand(T item, boolean syncClient)` method has been removed. Use the [methodname]`expand(T item)` method instead. +* The public [methodname]`setRequestedRange` and [methodname]`setParentRequestedRange` methods have been merged into a single method [methodname]`setViewportRange(int start, int length)`. Instead of setting ranges separately for each level, this method sets a single range that operates on the flat list of items from all levels. +* The public [methodname]`confirmUpdate(int id, String parentKey)` method has been removed. The [methodname]`confirmUpdate(int id)` method is now called instead. +* The public [methodname]`getParentItem(T item)` method has been removed because it returned inconsistent results. Use the [classname]`HierarchicalDataProvider#getParent` method instead to get an item's parent reliably. +* The public [methodname]`getIndex(T item)` and [methodname]`getParentIndex(T item)` methods have been removed for the same reason. To find an item's index reliably, use a combination of the [classname]`HierarchicalDataProvider#getItemIndex`, [classname]`HierarchicalDataProvider#getParent`, [classname]`HierarchicalDataCommunicator#buildQuery` methods as shown in the example below: + +[.example] [source,java] ---- -protected > Grid( -Class beanType, -B dataCommunicatorBuilder) +// If your data provider implements HierarchyFormat.NESTED: + +public List getIndexPath(T item) { + List path = new LinkedList<>(); + do { + var parent = dataCommunicator.getDataProvider().getParent(item); + var query = dataCommunicator.buildQuery(parent, 0, Integer.MAX_VALUE); + var index = dataCommunicator.getDataProvider().getItemIndex(item, query); + path.addFirst(index); + item = parent; + } while (item != null); + return path; +} -... +// If your data provider implements HierarchyFormat.FLATTENED: -protected GridArrayUpdater createDefaultArrayUpdater() +public int getFlatIndex(T item) { + var query = dataCommunicator.buildQuery(0, Integer.MAX_VALUE); + return dataCommunicator.getDataProvider().getItemIndex(item, query); +} ---- - -The [classname]`TreeGridArrayUpdater` interface has been removed. The [classname]`GridArrayUpdater` interface should be used instead. +==== ==== Charts The [methodname]`setWidthAdjust` / [methodname]`getWidthAdjust` methods of the [classname]`Title` class have been removed because it was removed from the underlying Highcharts library. @@ -397,7 +437,7 @@ The following changes have been made to the internal DOM structure of the Date P * The `overlay-header` part has been removed. ==== Date Time Picker -In the Flow [classname]`DateTimePicker` component, validation is no longer triggered on blur if the value remains unchanged after user interaction, making this behavior consistent with the rest of the field components, which already received a similar update in V24. +In the Flow [classname]`DateTimePicker` component, validation is no longer triggered on blur if the value has remained unchanged after user interaction, making this behavior consistent with the rest of the field components, which already received a similar update in V24. Incomplete input, where only a date or only a time is entered, is now treated as invalid. The corresponding error message can be configured via [classname]`DateTimePickerI18n`: @@ -405,7 +445,7 @@ Incomplete input, where only a date or only a time is entered, is now treated as [source,java] ---- dateTimePicker.setI18n(new DateTimePickerI18n() -.setIncompleteInputErrorMessage("Please enter both date and time")); + .setIncompleteInputErrorMessage("Please enter both date and time")); ---- ==== Time Picker @@ -463,10 +503,10 @@ opened.value = false; const ref = useRef(null); const opened = useSignal(true); -{ - opened - ? opened.value = false}/> - : null +{ + opened + ? opened.value = false}/> + : null } // When dialog is not needed anymore @@ -783,14 +823,6 @@ Because of the change, the [classname]`com.vaadin.flow.component.html.testbench. == Server-Side Modality [classname]`Dialog` has become less strict and allows background requests to server. Vaadin Flow allows to change this behavior if needed through [methodname]`Dialog.setModality(ModalityMode)` method. -== Tree Grid And Hierarchical Data Providers -Vaadin Flow added support for flat hierarchy in [classname]`TreeGrid` and hierarchical data providers. -This required some API removal in Vaadin Flow. - -[classname]`HierarchyMapper` and [classname]`HierarchicalCommunicationController` have been replaced with the new concept - `Cache`. This new class provides a system for storing data in a hierarchical structure while enabling access in a flattened format for client-side consumption. [methodname]`setRequestedRange` and [methodname]`setParentRequestedRange` have been replaced with a single [methodname]`setViewportRange` which spans all hierarchy levels. - -See link:https://github.com/vaadin/platform/issues/7843[Tree Grid Flat Hierarchy Support] and link:https://github.com/vaadin/flow-components/issues/7269[Improving user and developer experience in Tree Grid] for more details. - == Form Filler Add-On The link:https://github.com/vaadin/form-filler-addon[Form Filler add-on] has been removed from the Vaadin 25 platform. If your project uses it, you can add it as a separate dependency or get the same functionality with much less code using Spring AI to have the LLM directly populate a Java object that you can then use with e.g. [methodname]`binder.readBean()`. From f8f3015ce58099899de446dfb1404e818b6a0882 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Mon, 27 Oct 2025 12:02:03 +0400 Subject: [PATCH 05/24] explain how indexes are treated in flat and non-flat hierarchy format --- articles/upgrading/index.adoc | 22 +- package-lock.json | 387 +--------------------------------- package.json | 25 +-- 3 files changed, 30 insertions(+), 404 deletions(-) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index 419420334f..61efb8e815 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -396,9 +396,16 @@ The [classname]`HierarchicalDataCommunicator` class in Flow has been fully refac * The public [methodname]`getIndex(T item)` and [methodname]`getParentIndex(T item)` methods have been removed for the same reason. To find an item's index reliably, use a combination of the [classname]`HierarchicalDataProvider#getItemIndex`, [classname]`HierarchicalDataProvider#getParent`, [classname]`HierarchicalDataCommunicator#buildQuery` methods as shown in the example below: [.example] +-- [source,java] +.HierarchyFormat.NESTED ---- -// If your data provider implements HierarchyFormat.NESTED: +// By default, the data provider implements HierarchyFormat.NESTED, +// meaning each request returns only the direct children of a parent. +// In this format, items are identified by their hierarchical path, +// a list of indexes from the root to the item. This path can then +// be passed to `TreeGrid#scrollToIndex` to scroll to that item, for +// example. public List getIndexPath(T item) { List path = new LinkedList<>(); @@ -411,14 +418,23 @@ public List getIndexPath(T item) { } while (item != null); return path; } - -// If your data provider implements HierarchyFormat.FLATTENED: +---- +[source,java] +.HierarchyFormat.FLATTENED +---- +// When the data provider implements HierarchyFormat.FLATTENED, +// each request returns all descendants of a parent item in a +// single flat list. In this format, items are identified by +// their index in that list, which is called "flat index". +// This index can then be passed to `TreeGrid#scrollToIndex` +// to scroll to that item, for example. public int getFlatIndex(T item) { var query = dataCommunicator.buildQuery(0, Integer.MAX_VALUE); return dataCommunicator.getDataProvider().getItemIndex(item, query); } ---- +-- ==== ==== Charts diff --git a/package-lock.json b/package-lock.json index ecaa27f576..a93576b26a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,13 +8,6 @@ "license": "UNLICENSED", "dependencies": { "@material/mwc-slider": "0.27.0", - "@opentelemetry/exporter-trace-otlp-http": "0.35.0", - "@opentelemetry/instrumentation": "0.35.0", - "@opentelemetry/instrumentation-document-load": "0.31.0", - "@opentelemetry/instrumentation-long-task": "0.32.0", - "@opentelemetry/instrumentation-user-interaction": "0.32.0", - "@opentelemetry/instrumentation-xml-http-request": "0.34.0", - "@opentelemetry/sdk-trace-web": "1.8.0", "@vaadin/aura": "25.0.0-beta1", "@vaadin/common-frontend": "0.0.19", "@vaadin/hilla-file-router": "25.0.0-beta1", @@ -2941,341 +2934,6 @@ "integrity": "sha512-Sj7gKl1TLcDbF7B6KUhtvr+1UCxdhMbNY5KxdU5IfMFWqL8oy1ZeAcCANjoB1TL0AJTcPmcCFsCbHf8X2jGDUA==", "license": "MIT" }, - "node_modules/@opentelemetry/api": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.3.0.tgz", - "integrity": "sha512-YveTnGNsFFixTKJz09Oi4zYkiLT5af3WpZDu4aIUM7xX+2bHAkOJayFTVQd6zB8kkWPpbua4Ha6Ql00grdLlJQ==", - "license": "Apache-2.0", - "peer": true, - "engines": { - "node": ">=8.0.0" - } - }, - "node_modules/@opentelemetry/core": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-1.9.0.tgz", - "integrity": "sha512-Koy1ApRUp5DB5KpOqhDk0JjO9x6QeEkmcePl8qQDsXZGF4MuHUBShXibd+J2tRNckTsvgEHi1uEuUckDgN+c/A==", - "license": "Apache-2.0", - "dependencies": { - "@opentelemetry/semantic-conventions": "1.9.0" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "@opentelemetry/api": ">=1.0.0 <1.5.0" - } - }, - "node_modules/@opentelemetry/exporter-trace-otlp-http": { - "version": "0.35.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/exporter-trace-otlp-http/-/exporter-trace-otlp-http-0.35.0.tgz", - "integrity": "sha512-wb5XqkTYq0uES65gIyjF5WZjUZooog/Dd2eP+AKOGJ9n5eewvvLjebC9qmFm0ZjHsTw7hzxnQVX/CvhD3NeVHw==", - "license": "Apache-2.0", - "dependencies": { - "@opentelemetry/core": "1.9.0", - "@opentelemetry/otlp-exporter-base": "0.35.0", - "@opentelemetry/otlp-transformer": "0.35.0", - "@opentelemetry/resources": "1.9.0", - "@opentelemetry/sdk-trace-base": "1.9.0" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "@opentelemetry/api": "^1.0.0" - } - }, - "node_modules/@opentelemetry/instrumentation": { - "version": "0.35.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation/-/instrumentation-0.35.0.tgz", - "integrity": "sha512-pQ5shVG53acTtq72DF7kx+4690ZKh3lATMRqf2JDMRvn0bcX/JaQ+NjPmt7oyT3h9brMA1rSFMVFS6yj8kd2OQ==", - "license": "Apache-2.0", - "dependencies": { - "require-in-the-middle": "^5.0.3", - "semver": "^7.3.2", - "shimmer": "^1.2.1" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "@opentelemetry/api": "^1.3.0" - } - }, - "node_modules/@opentelemetry/instrumentation-document-load": { - "version": "0.31.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-document-load/-/instrumentation-document-load-0.31.0.tgz", - "integrity": "sha512-IlbJxUOyvJiatNerKuTii6cEW8iX/9F42zGmyqi8WjgxCZtncRAhkl9argG0xlQvpIoOWEotWB9S+++CjJfvfw==", - "license": "Apache-2.0", - "dependencies": { - "@opentelemetry/core": "^1.8.0", - "@opentelemetry/instrumentation": "^0.34.0", - "@opentelemetry/sdk-trace-base": "^1.0.0", - "@opentelemetry/sdk-trace-web": "^1.8.0", - "@opentelemetry/semantic-conventions": "^1.0.0" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "@opentelemetry/api": "^1.3.0" - } - }, - "node_modules/@opentelemetry/instrumentation-long-task": { - "version": "0.32.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-long-task/-/instrumentation-long-task-0.32.0.tgz", - "integrity": "sha512-pwUVj5k6CL2nWvcJjRl4aTVUqnO/gkf3t/1LIbFWJemTrNoez686hl7UZZkHwfMzJ4wdG7XNkmtBpHx8pm8/Gw==", - "license": "Apache-2.0", - "dependencies": { - "@opentelemetry/core": "^1.8.0", - "@opentelemetry/instrumentation": "^0.34.0", - "@opentelemetry/sdk-trace-web": "^1.8.0" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "@opentelemetry/api": "^1.3.0" - } - }, - "node_modules/@opentelemetry/instrumentation-user-interaction": { - "version": "0.32.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-user-interaction/-/instrumentation-user-interaction-0.32.0.tgz", - "integrity": "sha512-FW/N4Wu2EHv06sXyl2j57lMTAHkBb9b47+YVcUgDU+g2hpz1zC07Ajo1eZQF99tYtRy/25XX2lMOriLrrviyQg==", - "license": "Apache-2.0", - "dependencies": { - "@opentelemetry/core": "^1.8.0", - "@opentelemetry/instrumentation": "^0.34.0", - "@opentelemetry/sdk-trace-web": "^1.8.0" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "@opentelemetry/api": "^1.3.0", - "zone.js": "0.11.4" - } - }, - "node_modules/@opentelemetry/instrumentation-xml-http-request": { - "version": "0.34.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-xml-http-request/-/instrumentation-xml-http-request-0.34.0.tgz", - "integrity": "sha512-STJuL7smHN09Q1cqN6cfQmg/9FDjPnzbIzmFV7UIWcZnHH38x2v6s8kPRZrsN8HJEH9SkS4SKbrtPW8fHX+Blw==", - "license": "Apache-2.0", - "dependencies": { - "@opentelemetry/core": "1.8.0", - "@opentelemetry/instrumentation": "0.34.0", - "@opentelemetry/sdk-trace-web": "1.8.0", - "@opentelemetry/semantic-conventions": "1.8.0" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "@opentelemetry/api": "^1.0.0" - } - }, - "node_modules/@opentelemetry/instrumentation-xml-http-request/node_modules/@opentelemetry/core": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-1.8.0.tgz", - "integrity": "sha512-6SDjwBML4Am0AQmy7z1j6HGrWDgeK8awBRUvl1PGw6HayViMk4QpnUXvv4HTHisecgVBy43NE/cstWprm8tIfw==", - "license": "Apache-2.0", - "dependencies": { - "@opentelemetry/semantic-conventions": "1.8.0" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "@opentelemetry/api": ">=1.0.0 <1.4.0" - } - }, - "node_modules/@opentelemetry/instrumentation-xml-http-request/node_modules/@opentelemetry/semantic-conventions": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.8.0.tgz", - "integrity": "sha512-TYh1MRcm4JnvpqtqOwT9WYaBYY4KERHdToxs/suDTLviGRsQkIjS5yYROTYTSJQUnYLOn/TuOh5GoMwfLSU+Ew==", - "license": "Apache-2.0", - "engines": { - "node": ">=14" - } - }, - "node_modules/@opentelemetry/instrumentation/node_modules/semver": { - "version": "7.7.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz", - "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==", - "license": "ISC", - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/@opentelemetry/otlp-exporter-base": { - "version": "0.35.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/otlp-exporter-base/-/otlp-exporter-base-0.35.0.tgz", - "integrity": "sha512-ybXq1Dvg38ZwiNCtqRCRmJ93rP7jMhL8nHEYVXNKknPVplUoY9fsb8tCPi24iY1suAD98wAMy3hiHk4W8VqfSg==", - "license": "Apache-2.0", - "dependencies": { - "@opentelemetry/core": "1.9.0" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "@opentelemetry/api": "^1.0.0" - } - }, - "node_modules/@opentelemetry/otlp-transformer": { - "version": "0.35.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/otlp-transformer/-/otlp-transformer-0.35.0.tgz", - "integrity": "sha512-XjxX6RLHYKadQNEVs7TT7YRwEhXzP8itLiu6en2P7HukSg0gTwOMhNzriBZBRC4q+HVsdnncWua1wCD1TBAfmg==", - "license": "Apache-2.0", - "dependencies": { - "@opentelemetry/core": "1.9.0", - "@opentelemetry/resources": "1.9.0", - "@opentelemetry/sdk-metrics": "1.9.0", - "@opentelemetry/sdk-trace-base": "1.9.0" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "@opentelemetry/api": ">=1.3.0 <1.5.0" - } - }, - "node_modules/@opentelemetry/resources": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-1.9.0.tgz", - "integrity": "sha512-zCyien0p3XWarU6zv72c/JZ6QlG5QW/hc61Nh5TSR1K9ndnljzAGrH55x4nfyQdubfoh9QxLNh9FXH0fWK6vcg==", - "license": "Apache-2.0", - "dependencies": { - "@opentelemetry/core": "1.9.0", - "@opentelemetry/semantic-conventions": "1.9.0" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "@opentelemetry/api": ">=1.0.0 <1.5.0" - } - }, - "node_modules/@opentelemetry/sdk-metrics": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-metrics/-/sdk-metrics-1.9.0.tgz", - "integrity": "sha512-fSlJWhp86kCan1zuxdH6LTyUBYlohQwDKnxep5qHMnRTNErkYmdjgsmjZvSMdAfUFtQqfZmTXe2Lap7a5AIf9Q==", - "license": "Apache-2.0", - "dependencies": { - "@opentelemetry/core": "1.9.0", - "@opentelemetry/resources": "1.9.0", - "lodash.merge": "4.6.2" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "@opentelemetry/api": ">=1.3.0 <1.5.0" - } - }, - "node_modules/@opentelemetry/sdk-trace-base": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-base/-/sdk-trace-base-1.9.0.tgz", - "integrity": "sha512-glNgtJjxAIrDku8DG5Xu3nBK25rT+hkyg7yuXh8RUurp/4BcsXjMyVqpyJvb2kg+lxAX73VJBhncRKGHn9t8QQ==", - "license": "Apache-2.0", - "dependencies": { - "@opentelemetry/core": "1.9.0", - "@opentelemetry/resources": "1.9.0", - "@opentelemetry/semantic-conventions": "1.9.0" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "@opentelemetry/api": ">=1.0.0 <1.5.0" - } - }, - "node_modules/@opentelemetry/sdk-trace-web": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-web/-/sdk-trace-web-1.8.0.tgz", - "integrity": "sha512-SfotgAOOy6WTDtIxo97DjE+4l+hCiMqI0A3/TbJjixMPpk4ir/32uFqU9urhH/+zRybwwGYkQ6eILeuyZUi0ZQ==", - "license": "Apache-2.0", - "dependencies": { - "@opentelemetry/core": "1.8.0", - "@opentelemetry/sdk-trace-base": "1.8.0", - "@opentelemetry/semantic-conventions": "1.8.0" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "@opentelemetry/api": ">=1.0.0 <1.4.0" - } - }, - "node_modules/@opentelemetry/sdk-trace-web/node_modules/@opentelemetry/core": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-1.8.0.tgz", - "integrity": "sha512-6SDjwBML4Am0AQmy7z1j6HGrWDgeK8awBRUvl1PGw6HayViMk4QpnUXvv4HTHisecgVBy43NE/cstWprm8tIfw==", - "license": "Apache-2.0", - "dependencies": { - "@opentelemetry/semantic-conventions": "1.8.0" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "@opentelemetry/api": ">=1.0.0 <1.4.0" - } - }, - "node_modules/@opentelemetry/sdk-trace-web/node_modules/@opentelemetry/resources": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-1.8.0.tgz", - "integrity": "sha512-KSyMH6Jvss/PFDy16z5qkCK0ERlpyqixb1xwb73wLMvVq+j7i89lobDjw3JkpCcd1Ws0J6jAI4fw28Zufj2ssg==", - "license": "Apache-2.0", - "dependencies": { - "@opentelemetry/core": "1.8.0", - "@opentelemetry/semantic-conventions": "1.8.0" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "@opentelemetry/api": ">=1.0.0 <1.4.0" - } - }, - "node_modules/@opentelemetry/sdk-trace-web/node_modules/@opentelemetry/sdk-trace-base": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-base/-/sdk-trace-base-1.8.0.tgz", - "integrity": "sha512-iH41m0UTddnCKJzZx3M85vlhKzRcmT48pUeBbnzsGrq4nIay1oWVHKM5nhB5r8qRDGvd/n7f/YLCXClxwM0tvA==", - "license": "Apache-2.0", - "dependencies": { - "@opentelemetry/core": "1.8.0", - "@opentelemetry/resources": "1.8.0", - "@opentelemetry/semantic-conventions": "1.8.0" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "@opentelemetry/api": ">=1.0.0 <1.4.0" - } - }, - "node_modules/@opentelemetry/sdk-trace-web/node_modules/@opentelemetry/semantic-conventions": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.8.0.tgz", - "integrity": "sha512-TYh1MRcm4JnvpqtqOwT9WYaBYY4KERHdToxs/suDTLviGRsQkIjS5yYROTYTSJQUnYLOn/TuOh5GoMwfLSU+Ew==", - "license": "Apache-2.0", - "engines": { - "node": ">=14" - } - }, - "node_modules/@opentelemetry/semantic-conventions": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.9.0.tgz", - "integrity": "sha512-po7penSfQ/Z8352lRVDpaBrd9znwA5mHGqXR7nDEiVnxkDFkBIhVf/tKeAJDIq/erFpcRowKFeCsr5eqqcSyFQ==", - "license": "Apache-2.0", - "engines": { - "node": ">=14" - } - }, "node_modules/@petamoriken/float16": { "version": "3.9.2", "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.9.2.tgz", @@ -6897,6 +6555,7 @@ "version": "4.4.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz", "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==", + "dev": true, "license": "MIT", "dependencies": { "ms": "^2.1.3" @@ -8314,6 +7973,7 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "dev": true, "license": "MIT", "funding": { "url": "https://github.com/sponsors/ljharb" @@ -8724,6 +8384,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "dev": true, "license": "MIT", "dependencies": { "function-bind": "^1.1.2" @@ -9029,6 +8690,7 @@ "version": "2.16.1", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz", "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==", + "dev": true, "license": "MIT", "dependencies": { "hasown": "^2.0.2" @@ -9854,6 +9516,7 @@ "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", + "dev": true, "license": "MIT" }, "node_modules/lodash.sortby": { @@ -10056,16 +9719,11 @@ "node": ">=16 || 14 >=14.17" } }, - "node_modules/module-details-from-path": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/module-details-from-path/-/module-details-from-path-1.0.4.tgz", - "integrity": "sha512-EGWKgxALGMgzvxYF1UyGTy0HXX/2vHLkw6+NvDKW2jypWbHpjQuj4UMcqQWXHERJhVGKikolT06G3bcKe4fi7w==", - "license": "MIT" - }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true, "license": "MIT" }, "node_modules/mutexify": { @@ -10505,6 +10163,7 @@ "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true, "license": "MIT" }, "node_modules/path-scurry": { @@ -11176,20 +10835,6 @@ "node": ">=0.10.0" } }, - "node_modules/require-in-the-middle": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/require-in-the-middle/-/require-in-the-middle-5.2.0.tgz", - "integrity": "sha512-efCx3b+0Z69/LGJmm9Yvi4cqEdxnoGnxYxGxBghkkTTFeXRtTCmmhO0AnAfHz59k957uTSuy8WaHqOs8wbYUWg==", - "license": "MIT", - "dependencies": { - "debug": "^4.1.1", - "module-details-from-path": "^1.0.3", - "resolve": "^1.22.1" - }, - "engines": { - "node": ">=6" - } - }, "node_modules/requireindex": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz", @@ -11204,6 +10849,7 @@ "version": "1.22.10", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz", "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==", + "dev": true, "license": "MIT", "dependencies": { "is-core-module": "^2.16.0", @@ -11681,12 +11327,6 @@ "node": ">=8" } }, - "node_modules/shimmer": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/shimmer/-/shimmer-1.2.1.tgz", - "integrity": "sha512-sQTKC1Re/rM6XyFM6fIAGHRPVGvyXfgzIDvzoq608vM+jeyVD0Tu1E6Np0Kc2zAIFWIj963V2800iF/9LPieQw==", - "license": "BSD-2-Clause" - }, "node_modules/side-channel": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz", @@ -12234,6 +11874,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true, "license": "MIT", "engines": { "node": ">= 0.4" @@ -13750,16 +13391,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/zone.js": { - "version": "0.11.4", - "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.11.4.tgz", - "integrity": "sha512-DDh2Ab+A/B+9mJyajPjHFPWfYU1H+pdun4wnnk0OcQTNjem1XQSZ2CDW+rfZEUDjv5M19SBqAkjZi0x5wuB5Qw==", - "license": "MIT", - "peer": true, - "dependencies": { - "tslib": "^2.0.0" - } - }, "node_modules/zstddec": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/zstddec/-/zstddec-0.1.0.tgz", diff --git a/package.json b/package.json index e8c5f4dd7a..d34dd3221f 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,6 @@ { "dependencies": { "@material/mwc-slider": "0.27.0", - "@opentelemetry/exporter-trace-otlp-http": "0.35.0", - "@opentelemetry/instrumentation": "0.35.0", - "@opentelemetry/instrumentation-document-load": "0.31.0", - "@opentelemetry/instrumentation-long-task": "0.32.0", - "@opentelemetry/instrumentation-user-interaction": "0.32.0", - "@opentelemetry/instrumentation-xml-http-request": "0.34.0", - "@opentelemetry/sdk-trace-web": "1.8.0", "@vaadin/aura": "25.0.0-beta1", "@vaadin/common-frontend": "0.0.19", "@vaadin/hilla-file-router": "25.0.0-beta1", @@ -184,14 +177,7 @@ "@vaadin/dashboard": "25.0.0-beta1", "@vaadin/grid-pro": "25.0.0-beta1", "@vaadin/map": "25.0.0-beta1", - "@vaadin/rich-text-editor": "25.0.0-beta1", - "@opentelemetry/instrumentation-xml-http-request": "$@opentelemetry/instrumentation-xml-http-request", - "@opentelemetry/instrumentation-user-interaction": "$@opentelemetry/instrumentation-user-interaction", - "@opentelemetry/instrumentation-document-load": "$@opentelemetry/instrumentation-document-load", - "@opentelemetry/instrumentation": "$@opentelemetry/instrumentation", - "@opentelemetry/exporter-trace-otlp-http": "$@opentelemetry/exporter-trace-otlp-http", - "@opentelemetry/sdk-trace-web": "$@opentelemetry/sdk-trace-web", - "@opentelemetry/instrumentation-long-task": "$@opentelemetry/instrumentation-long-task" + "@vaadin/rich-text-editor": "25.0.0-beta1" }, "private": true, "scripts": { @@ -205,13 +191,6 @@ "vaadin": { "dependencies": { "@material/mwc-slider": "0.27.0", - "@opentelemetry/exporter-trace-otlp-http": "0.35.0", - "@opentelemetry/instrumentation": "0.35.0", - "@opentelemetry/instrumentation-document-load": "0.31.0", - "@opentelemetry/instrumentation-long-task": "0.32.0", - "@opentelemetry/instrumentation-user-interaction": "0.32.0", - "@opentelemetry/instrumentation-xml-http-request": "0.34.0", - "@opentelemetry/sdk-trace-web": "1.8.0", "@vaadin/aura": "25.0.0-beta1", "@vaadin/common-frontend": "0.0.19", "@vaadin/hilla-file-router": "25.0.0-beta1", @@ -267,6 +246,6 @@ "vite-plugin-checker": "0.11.0", "workbox-build": "7.3.0" }, - "hash": "75074017bc1ebc696a9ef0cf8c5fcc575678ea7e60befd26b8f1a9a42bf5995f" + "hash": "fd481fc801a652445b63c8dd59970b6128725263486b67b992d9c1778ad9752f" } } \ No newline at end of file From 1aeb9331a61400302c9cee78204ef23c62f42e97 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Mon, 27 Oct 2025 12:39:38 +0400 Subject: [PATCH 06/24] revert package.json --- package-lock.json | 387 ++++++++++++++++++++++++++++++++++++++++++++-- package.json | 25 ++- 2 files changed, 401 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index a93576b26a..ecaa27f576 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,13 @@ "license": "UNLICENSED", "dependencies": { "@material/mwc-slider": "0.27.0", + "@opentelemetry/exporter-trace-otlp-http": "0.35.0", + "@opentelemetry/instrumentation": "0.35.0", + "@opentelemetry/instrumentation-document-load": "0.31.0", + "@opentelemetry/instrumentation-long-task": "0.32.0", + "@opentelemetry/instrumentation-user-interaction": "0.32.0", + "@opentelemetry/instrumentation-xml-http-request": "0.34.0", + "@opentelemetry/sdk-trace-web": "1.8.0", "@vaadin/aura": "25.0.0-beta1", "@vaadin/common-frontend": "0.0.19", "@vaadin/hilla-file-router": "25.0.0-beta1", @@ -2934,6 +2941,341 @@ "integrity": "sha512-Sj7gKl1TLcDbF7B6KUhtvr+1UCxdhMbNY5KxdU5IfMFWqL8oy1ZeAcCANjoB1TL0AJTcPmcCFsCbHf8X2jGDUA==", "license": "MIT" }, + "node_modules/@opentelemetry/api": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.3.0.tgz", + "integrity": "sha512-YveTnGNsFFixTKJz09Oi4zYkiLT5af3WpZDu4aIUM7xX+2bHAkOJayFTVQd6zB8kkWPpbua4Ha6Ql00grdLlJQ==", + "license": "Apache-2.0", + "peer": true, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/@opentelemetry/core": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-1.9.0.tgz", + "integrity": "sha512-Koy1ApRUp5DB5KpOqhDk0JjO9x6QeEkmcePl8qQDsXZGF4MuHUBShXibd+J2tRNckTsvgEHi1uEuUckDgN+c/A==", + "license": "Apache-2.0", + "dependencies": { + "@opentelemetry/semantic-conventions": "1.9.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "@opentelemetry/api": ">=1.0.0 <1.5.0" + } + }, + "node_modules/@opentelemetry/exporter-trace-otlp-http": { + "version": "0.35.0", + "resolved": "https://registry.npmjs.org/@opentelemetry/exporter-trace-otlp-http/-/exporter-trace-otlp-http-0.35.0.tgz", + "integrity": "sha512-wb5XqkTYq0uES65gIyjF5WZjUZooog/Dd2eP+AKOGJ9n5eewvvLjebC9qmFm0ZjHsTw7hzxnQVX/CvhD3NeVHw==", + "license": "Apache-2.0", + "dependencies": { + "@opentelemetry/core": "1.9.0", + "@opentelemetry/otlp-exporter-base": "0.35.0", + "@opentelemetry/otlp-transformer": "0.35.0", + "@opentelemetry/resources": "1.9.0", + "@opentelemetry/sdk-trace-base": "1.9.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "@opentelemetry/api": "^1.0.0" + } + }, + "node_modules/@opentelemetry/instrumentation": { + "version": "0.35.0", + "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation/-/instrumentation-0.35.0.tgz", + "integrity": "sha512-pQ5shVG53acTtq72DF7kx+4690ZKh3lATMRqf2JDMRvn0bcX/JaQ+NjPmt7oyT3h9brMA1rSFMVFS6yj8kd2OQ==", + "license": "Apache-2.0", + "dependencies": { + "require-in-the-middle": "^5.0.3", + "semver": "^7.3.2", + "shimmer": "^1.2.1" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "@opentelemetry/api": "^1.3.0" + } + }, + "node_modules/@opentelemetry/instrumentation-document-load": { + "version": "0.31.0", + "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-document-load/-/instrumentation-document-load-0.31.0.tgz", + "integrity": "sha512-IlbJxUOyvJiatNerKuTii6cEW8iX/9F42zGmyqi8WjgxCZtncRAhkl9argG0xlQvpIoOWEotWB9S+++CjJfvfw==", + "license": "Apache-2.0", + "dependencies": { + "@opentelemetry/core": "^1.8.0", + "@opentelemetry/instrumentation": "^0.34.0", + "@opentelemetry/sdk-trace-base": "^1.0.0", + "@opentelemetry/sdk-trace-web": "^1.8.0", + "@opentelemetry/semantic-conventions": "^1.0.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "@opentelemetry/api": "^1.3.0" + } + }, + "node_modules/@opentelemetry/instrumentation-long-task": { + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-long-task/-/instrumentation-long-task-0.32.0.tgz", + "integrity": "sha512-pwUVj5k6CL2nWvcJjRl4aTVUqnO/gkf3t/1LIbFWJemTrNoez686hl7UZZkHwfMzJ4wdG7XNkmtBpHx8pm8/Gw==", + "license": "Apache-2.0", + "dependencies": { + "@opentelemetry/core": "^1.8.0", + "@opentelemetry/instrumentation": "^0.34.0", + "@opentelemetry/sdk-trace-web": "^1.8.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "@opentelemetry/api": "^1.3.0" + } + }, + "node_modules/@opentelemetry/instrumentation-user-interaction": { + "version": "0.32.0", + "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-user-interaction/-/instrumentation-user-interaction-0.32.0.tgz", + "integrity": "sha512-FW/N4Wu2EHv06sXyl2j57lMTAHkBb9b47+YVcUgDU+g2hpz1zC07Ajo1eZQF99tYtRy/25XX2lMOriLrrviyQg==", + "license": "Apache-2.0", + "dependencies": { + "@opentelemetry/core": "^1.8.0", + "@opentelemetry/instrumentation": "^0.34.0", + "@opentelemetry/sdk-trace-web": "^1.8.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "@opentelemetry/api": "^1.3.0", + "zone.js": "0.11.4" + } + }, + "node_modules/@opentelemetry/instrumentation-xml-http-request": { + "version": "0.34.0", + "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-xml-http-request/-/instrumentation-xml-http-request-0.34.0.tgz", + "integrity": "sha512-STJuL7smHN09Q1cqN6cfQmg/9FDjPnzbIzmFV7UIWcZnHH38x2v6s8kPRZrsN8HJEH9SkS4SKbrtPW8fHX+Blw==", + "license": "Apache-2.0", + "dependencies": { + "@opentelemetry/core": "1.8.0", + "@opentelemetry/instrumentation": "0.34.0", + "@opentelemetry/sdk-trace-web": "1.8.0", + "@opentelemetry/semantic-conventions": "1.8.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "@opentelemetry/api": "^1.0.0" + } + }, + "node_modules/@opentelemetry/instrumentation-xml-http-request/node_modules/@opentelemetry/core": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-1.8.0.tgz", + "integrity": "sha512-6SDjwBML4Am0AQmy7z1j6HGrWDgeK8awBRUvl1PGw6HayViMk4QpnUXvv4HTHisecgVBy43NE/cstWprm8tIfw==", + "license": "Apache-2.0", + "dependencies": { + "@opentelemetry/semantic-conventions": "1.8.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "@opentelemetry/api": ">=1.0.0 <1.4.0" + } + }, + "node_modules/@opentelemetry/instrumentation-xml-http-request/node_modules/@opentelemetry/semantic-conventions": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.8.0.tgz", + "integrity": "sha512-TYh1MRcm4JnvpqtqOwT9WYaBYY4KERHdToxs/suDTLviGRsQkIjS5yYROTYTSJQUnYLOn/TuOh5GoMwfLSU+Ew==", + "license": "Apache-2.0", + "engines": { + "node": ">=14" + } + }, + "node_modules/@opentelemetry/instrumentation/node_modules/semver": { + "version": "7.7.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz", + "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==", + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@opentelemetry/otlp-exporter-base": { + "version": "0.35.0", + "resolved": "https://registry.npmjs.org/@opentelemetry/otlp-exporter-base/-/otlp-exporter-base-0.35.0.tgz", + "integrity": "sha512-ybXq1Dvg38ZwiNCtqRCRmJ93rP7jMhL8nHEYVXNKknPVplUoY9fsb8tCPi24iY1suAD98wAMy3hiHk4W8VqfSg==", + "license": "Apache-2.0", + "dependencies": { + "@opentelemetry/core": "1.9.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "@opentelemetry/api": "^1.0.0" + } + }, + "node_modules/@opentelemetry/otlp-transformer": { + "version": "0.35.0", + "resolved": "https://registry.npmjs.org/@opentelemetry/otlp-transformer/-/otlp-transformer-0.35.0.tgz", + "integrity": "sha512-XjxX6RLHYKadQNEVs7TT7YRwEhXzP8itLiu6en2P7HukSg0gTwOMhNzriBZBRC4q+HVsdnncWua1wCD1TBAfmg==", + "license": "Apache-2.0", + "dependencies": { + "@opentelemetry/core": "1.9.0", + "@opentelemetry/resources": "1.9.0", + "@opentelemetry/sdk-metrics": "1.9.0", + "@opentelemetry/sdk-trace-base": "1.9.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "@opentelemetry/api": ">=1.3.0 <1.5.0" + } + }, + "node_modules/@opentelemetry/resources": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-1.9.0.tgz", + "integrity": "sha512-zCyien0p3XWarU6zv72c/JZ6QlG5QW/hc61Nh5TSR1K9ndnljzAGrH55x4nfyQdubfoh9QxLNh9FXH0fWK6vcg==", + "license": "Apache-2.0", + "dependencies": { + "@opentelemetry/core": "1.9.0", + "@opentelemetry/semantic-conventions": "1.9.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "@opentelemetry/api": ">=1.0.0 <1.5.0" + } + }, + "node_modules/@opentelemetry/sdk-metrics": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-metrics/-/sdk-metrics-1.9.0.tgz", + "integrity": "sha512-fSlJWhp86kCan1zuxdH6LTyUBYlohQwDKnxep5qHMnRTNErkYmdjgsmjZvSMdAfUFtQqfZmTXe2Lap7a5AIf9Q==", + "license": "Apache-2.0", + "dependencies": { + "@opentelemetry/core": "1.9.0", + "@opentelemetry/resources": "1.9.0", + "lodash.merge": "4.6.2" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "@opentelemetry/api": ">=1.3.0 <1.5.0" + } + }, + "node_modules/@opentelemetry/sdk-trace-base": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-base/-/sdk-trace-base-1.9.0.tgz", + "integrity": "sha512-glNgtJjxAIrDku8DG5Xu3nBK25rT+hkyg7yuXh8RUurp/4BcsXjMyVqpyJvb2kg+lxAX73VJBhncRKGHn9t8QQ==", + "license": "Apache-2.0", + "dependencies": { + "@opentelemetry/core": "1.9.0", + "@opentelemetry/resources": "1.9.0", + "@opentelemetry/semantic-conventions": "1.9.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "@opentelemetry/api": ">=1.0.0 <1.5.0" + } + }, + "node_modules/@opentelemetry/sdk-trace-web": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-web/-/sdk-trace-web-1.8.0.tgz", + "integrity": "sha512-SfotgAOOy6WTDtIxo97DjE+4l+hCiMqI0A3/TbJjixMPpk4ir/32uFqU9urhH/+zRybwwGYkQ6eILeuyZUi0ZQ==", + "license": "Apache-2.0", + "dependencies": { + "@opentelemetry/core": "1.8.0", + "@opentelemetry/sdk-trace-base": "1.8.0", + "@opentelemetry/semantic-conventions": "1.8.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "@opentelemetry/api": ">=1.0.0 <1.4.0" + } + }, + "node_modules/@opentelemetry/sdk-trace-web/node_modules/@opentelemetry/core": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-1.8.0.tgz", + "integrity": "sha512-6SDjwBML4Am0AQmy7z1j6HGrWDgeK8awBRUvl1PGw6HayViMk4QpnUXvv4HTHisecgVBy43NE/cstWprm8tIfw==", + "license": "Apache-2.0", + "dependencies": { + "@opentelemetry/semantic-conventions": "1.8.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "@opentelemetry/api": ">=1.0.0 <1.4.0" + } + }, + "node_modules/@opentelemetry/sdk-trace-web/node_modules/@opentelemetry/resources": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-1.8.0.tgz", + "integrity": "sha512-KSyMH6Jvss/PFDy16z5qkCK0ERlpyqixb1xwb73wLMvVq+j7i89lobDjw3JkpCcd1Ws0J6jAI4fw28Zufj2ssg==", + "license": "Apache-2.0", + "dependencies": { + "@opentelemetry/core": "1.8.0", + "@opentelemetry/semantic-conventions": "1.8.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "@opentelemetry/api": ">=1.0.0 <1.4.0" + } + }, + "node_modules/@opentelemetry/sdk-trace-web/node_modules/@opentelemetry/sdk-trace-base": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-base/-/sdk-trace-base-1.8.0.tgz", + "integrity": "sha512-iH41m0UTddnCKJzZx3M85vlhKzRcmT48pUeBbnzsGrq4nIay1oWVHKM5nhB5r8qRDGvd/n7f/YLCXClxwM0tvA==", + "license": "Apache-2.0", + "dependencies": { + "@opentelemetry/core": "1.8.0", + "@opentelemetry/resources": "1.8.0", + "@opentelemetry/semantic-conventions": "1.8.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "@opentelemetry/api": ">=1.0.0 <1.4.0" + } + }, + "node_modules/@opentelemetry/sdk-trace-web/node_modules/@opentelemetry/semantic-conventions": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.8.0.tgz", + "integrity": "sha512-TYh1MRcm4JnvpqtqOwT9WYaBYY4KERHdToxs/suDTLviGRsQkIjS5yYROTYTSJQUnYLOn/TuOh5GoMwfLSU+Ew==", + "license": "Apache-2.0", + "engines": { + "node": ">=14" + } + }, + "node_modules/@opentelemetry/semantic-conventions": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.9.0.tgz", + "integrity": "sha512-po7penSfQ/Z8352lRVDpaBrd9znwA5mHGqXR7nDEiVnxkDFkBIhVf/tKeAJDIq/erFpcRowKFeCsr5eqqcSyFQ==", + "license": "Apache-2.0", + "engines": { + "node": ">=14" + } + }, "node_modules/@petamoriken/float16": { "version": "3.9.2", "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.9.2.tgz", @@ -6555,7 +6897,6 @@ "version": "4.4.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz", "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==", - "dev": true, "license": "MIT", "dependencies": { "ms": "^2.1.3" @@ -7973,7 +8314,6 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", - "dev": true, "license": "MIT", "funding": { "url": "https://github.com/sponsors/ljharb" @@ -8384,7 +8724,6 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", - "dev": true, "license": "MIT", "dependencies": { "function-bind": "^1.1.2" @@ -8690,7 +9029,6 @@ "version": "2.16.1", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz", "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==", - "dev": true, "license": "MIT", "dependencies": { "hasown": "^2.0.2" @@ -9516,7 +9854,6 @@ "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", - "dev": true, "license": "MIT" }, "node_modules/lodash.sortby": { @@ -9719,11 +10056,16 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/module-details-from-path": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/module-details-from-path/-/module-details-from-path-1.0.4.tgz", + "integrity": "sha512-EGWKgxALGMgzvxYF1UyGTy0HXX/2vHLkw6+NvDKW2jypWbHpjQuj4UMcqQWXHERJhVGKikolT06G3bcKe4fi7w==", + "license": "MIT" + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", - "dev": true, "license": "MIT" }, "node_modules/mutexify": { @@ -10163,7 +10505,6 @@ "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", - "dev": true, "license": "MIT" }, "node_modules/path-scurry": { @@ -10835,6 +11176,20 @@ "node": ">=0.10.0" } }, + "node_modules/require-in-the-middle": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/require-in-the-middle/-/require-in-the-middle-5.2.0.tgz", + "integrity": "sha512-efCx3b+0Z69/LGJmm9Yvi4cqEdxnoGnxYxGxBghkkTTFeXRtTCmmhO0AnAfHz59k957uTSuy8WaHqOs8wbYUWg==", + "license": "MIT", + "dependencies": { + "debug": "^4.1.1", + "module-details-from-path": "^1.0.3", + "resolve": "^1.22.1" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/requireindex": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz", @@ -10849,7 +11204,6 @@ "version": "1.22.10", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz", "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==", - "dev": true, "license": "MIT", "dependencies": { "is-core-module": "^2.16.0", @@ -11327,6 +11681,12 @@ "node": ">=8" } }, + "node_modules/shimmer": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/shimmer/-/shimmer-1.2.1.tgz", + "integrity": "sha512-sQTKC1Re/rM6XyFM6fIAGHRPVGvyXfgzIDvzoq608vM+jeyVD0Tu1E6Np0Kc2zAIFWIj963V2800iF/9LPieQw==", + "license": "BSD-2-Clause" + }, "node_modules/side-channel": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz", @@ -11874,7 +12234,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", - "dev": true, "license": "MIT", "engines": { "node": ">= 0.4" @@ -13391,6 +13750,16 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/zone.js": { + "version": "0.11.4", + "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.11.4.tgz", + "integrity": "sha512-DDh2Ab+A/B+9mJyajPjHFPWfYU1H+pdun4wnnk0OcQTNjem1XQSZ2CDW+rfZEUDjv5M19SBqAkjZi0x5wuB5Qw==", + "license": "MIT", + "peer": true, + "dependencies": { + "tslib": "^2.0.0" + } + }, "node_modules/zstddec": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/zstddec/-/zstddec-0.1.0.tgz", diff --git a/package.json b/package.json index d34dd3221f..e8c5f4dd7a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,13 @@ { "dependencies": { "@material/mwc-slider": "0.27.0", + "@opentelemetry/exporter-trace-otlp-http": "0.35.0", + "@opentelemetry/instrumentation": "0.35.0", + "@opentelemetry/instrumentation-document-load": "0.31.0", + "@opentelemetry/instrumentation-long-task": "0.32.0", + "@opentelemetry/instrumentation-user-interaction": "0.32.0", + "@opentelemetry/instrumentation-xml-http-request": "0.34.0", + "@opentelemetry/sdk-trace-web": "1.8.0", "@vaadin/aura": "25.0.0-beta1", "@vaadin/common-frontend": "0.0.19", "@vaadin/hilla-file-router": "25.0.0-beta1", @@ -177,7 +184,14 @@ "@vaadin/dashboard": "25.0.0-beta1", "@vaadin/grid-pro": "25.0.0-beta1", "@vaadin/map": "25.0.0-beta1", - "@vaadin/rich-text-editor": "25.0.0-beta1" + "@vaadin/rich-text-editor": "25.0.0-beta1", + "@opentelemetry/instrumentation-xml-http-request": "$@opentelemetry/instrumentation-xml-http-request", + "@opentelemetry/instrumentation-user-interaction": "$@opentelemetry/instrumentation-user-interaction", + "@opentelemetry/instrumentation-document-load": "$@opentelemetry/instrumentation-document-load", + "@opentelemetry/instrumentation": "$@opentelemetry/instrumentation", + "@opentelemetry/exporter-trace-otlp-http": "$@opentelemetry/exporter-trace-otlp-http", + "@opentelemetry/sdk-trace-web": "$@opentelemetry/sdk-trace-web", + "@opentelemetry/instrumentation-long-task": "$@opentelemetry/instrumentation-long-task" }, "private": true, "scripts": { @@ -191,6 +205,13 @@ "vaadin": { "dependencies": { "@material/mwc-slider": "0.27.0", + "@opentelemetry/exporter-trace-otlp-http": "0.35.0", + "@opentelemetry/instrumentation": "0.35.0", + "@opentelemetry/instrumentation-document-load": "0.31.0", + "@opentelemetry/instrumentation-long-task": "0.32.0", + "@opentelemetry/instrumentation-user-interaction": "0.32.0", + "@opentelemetry/instrumentation-xml-http-request": "0.34.0", + "@opentelemetry/sdk-trace-web": "1.8.0", "@vaadin/aura": "25.0.0-beta1", "@vaadin/common-frontend": "0.0.19", "@vaadin/hilla-file-router": "25.0.0-beta1", @@ -246,6 +267,6 @@ "vite-plugin-checker": "0.11.0", "workbox-build": "7.3.0" }, - "hash": "fd481fc801a652445b63c8dd59970b6128725263486b67b992d9c1778ad9752f" + "hash": "75074017bc1ebc696a9ef0cf8c5fcc575678ea7e60befd26b8f1a9a42bf5995f" } } \ No newline at end of file From 24d62beb84e4780aacb317d640e2e625be590bbb Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Mon, 27 Oct 2025 17:01:11 +0400 Subject: [PATCH 07/24] apply proper styling to diff code blocks --- articles/upgrading/index.adoc | 60 ++++++++++------------------------- 1 file changed, 17 insertions(+), 43 deletions(-) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index 61efb8e815..2447337ef6 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -261,8 +261,7 @@ You’ll find the appropriate selector in the component’s Styling page. The Lumo CSS files have been removed from the `@vaadin/react-components` package. As mentioned above, the Lumo theme should be imported from `@vaadin/vaadin-lumo-styles` instead. -.Before -[source,typescript] +[source,typescript,role="before"] ---- /* If imported through a CSS file */ @import '@vaadin/react-components/css/Lumo.css'; @@ -270,9 +269,7 @@ The Lumo CSS files have been removed from the `@vaadin/react-components` package /* If imported through Typescript */ import '@vaadin/react-components/css/Lumo.css'; ---- - -.After -[source,typescript] +[source,typescript,role="after"] ---- /* If imported through a CSS file */ @import '@vaadin/vaadin-lumo-styles/lumo.css'; @@ -477,8 +474,7 @@ The [methodname]`setContent` and [methodname]`addContent` methods have been remo For Flow this is relevant when manually adding / removing the dialog from the UI. The event is not needed when calling [methodname]`dialog.open()` without adding the dialog to the UI. -.Before -[source,java] +[source,java,role="before"] ---- var dialog = new Dialog(); add(dialog); @@ -487,9 +483,7 @@ dialog.open(); // When dialog is not needed anymore remove(dialog); ---- - -.After -[source,java] +[source,java,role="after"] ---- var dialog = new Dialog(); dialog.addClosedListener(e -> remove(dialog)); @@ -502,8 +496,7 @@ dialog.close(); For Hilla / React this is relevant when rendering dialogs conditionally. -.Before -[source,typescript] +[source,typescript,role="before"] ---- const opened = useSignal(true); @@ -512,9 +505,7 @@ const opened = useSignal(true); // When dialog is not needed anymore opened.value = false; ---- - -.After -[source,typescript] +[source,typescript,role="after"] ---- const ref = useRef(null); const opened = useSignal(true); @@ -696,11 +687,9 @@ public SecurityFilterChain vaadinSecurityFilterChain(HttpSecurity http) throws E . Move and adapt the code of the `configure(HttpSecurity)` method into `vaadinSecurityFilterChain()`. .. customizations of [classname]`HttpSecurity` placed before `super.configure()` can be moved before the `with(vaadin(), vaadin -> {})` instruction. .. calls to [classname]`VaadinWebSecurity` methods have related methods in the [classname]`VaadinSecurityConfigurer`. - + -- -.Before -[source,java] +[source,java,role="before"] ---- @Override protected void configure(HttpSecurity http) throws Exception { @@ -711,10 +700,7 @@ protected void configure(HttpSecurity http) throws Exception { setLoginView(http, "/login", "/"); } ---- - - -.After -[source,java] +[source,java,role="after"] ---- @Bean public SecurityFilterChain vaadinSecurityFilterChain(HttpSecurity http) throws Exception { @@ -730,20 +716,16 @@ public SecurityFilterChain vaadinSecurityFilterChain(HttpSecurity http) throws E . If `configure(WebSecurity web)` is overridden you might: .. Move the rules in the security filter chain bean definition using `HttpSecurity.authorizeRequests()` and remove the original method (recommended by Spring, to prevent skipping all other filters in the chain): - + -- -.Before -[source,java] +[source,java,role="before"] ---- @Override protected void configure(WebSecurity web) throws Exception { web.ignoring().requestMatchers("/images/**"); } ---- - -.After -[source,java] +[source,java,role="after"] ---- @Bean public SecurityFilterChain vaadinSecurityFilterChain(HttpSecurity http) throws Exception { @@ -757,34 +739,28 @@ public SecurityFilterChain vaadinSecurityFilterChain(HttpSecurity http) throws E -- .. OR, expose a [classname]`WebSecurityCustomizer` bean by your own and remove the original method - + -- -.Before -[source,java] +[source,java,role="before"] ---- @Override protected void configure(WebSecurity web) throws Exception { -web.ignoring().requestMatchers("/images/**"); + web.ignoring().requestMatchers("/images/**"); } ---- - -.After -[source,java] +[source,java,role="after"] ---- @Bean public WebSecurityCustomizer webSecurityCustomizer() { -return (web) -> web.ignoring().requestMatchers("/images/**"); + return (web) -> web.ignoring().requestMatchers("/images/**"); } ---- -- . If stateless authentication is configured (`setStatelessAuthentication(...)`), replace the call using `VaadinStatelessSecurityConfigurer` - + -- -.Before -[source,java] +[source,java,role="before"] ---- @Override protected void configure(HttpSecurity web) throws Exception { @@ -793,9 +769,7 @@ protected void configure(HttpSecurity web) throws Exception { //... } ---- - -.After -[source,java] +[source,java,role="after"] ---- @Bean public SecurityFilterChain vaadinSecurityFilterChain(HttpSecurity http) throws Exception { @@ -810,7 +784,7 @@ public SecurityFilterChain vaadinSecurityFilterChain(HttpSecurity http) throws E -- . Remove `extends VaadinWebSecurity` and import the Vaadin security context holder strategy - ++ [source,java] ---- @EnableWebSecurity // should be already present From 8f068319623f97ffcf6de4eb446302aacf2c2621 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Mon, 27 Oct 2025 17:09:03 +0400 Subject: [PATCH 08/24] minor formatting fixes --- articles/upgrading/index.adoc | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index 2447337ef6..4ce6cbdc09 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -351,7 +351,8 @@ The [classname]`GridArrayUpdater.UpdateQueueData` class has been removed, along * The [methodname]`setUpdateQueueData` method in [classname]`GridArrayUpdater` has been removed * The [methodname]`getUpdateQueueData` method in [classname]`GridArrayUpdater` has been removed * Parameters that included [classname]`UpdateQueueData` in their type have been removed from all [classname]`Grid` and [classname]`TreeGrid` constructors and methods: - ++ +-- [source,java,role="before"] ---- protected > Grid( @@ -365,7 +366,9 @@ protected > Class beanType, B dataCommunicatorBuilder) ---- - +-- ++ +-- [source,java,role="before"] ---- protected GridArrayUpdater createDefaultArrayUpdater( @@ -375,6 +378,7 @@ protected GridArrayUpdater createDefaultArrayUpdater( ---- protected GridArrayUpdater createDefaultArrayUpdater() ---- +-- The [classname]`TreeGridArrayUpdater` interface has also been removed. The [classname]`GridArrayUpdater` interface now handles both hierarchical and non-hierarchical updates. @@ -389,9 +393,9 @@ The [classname]`HierarchicalDataCommunicator` class in Flow has been fully refac * The protected [methodname]`expand(T item, boolean syncClient)` method has been removed. Use the [methodname]`expand(T item)` method instead. * The public [methodname]`setRequestedRange` and [methodname]`setParentRequestedRange` methods have been merged into a single method [methodname]`setViewportRange(int start, int length)`. Instead of setting ranges separately for each level, this method sets a single range that operates on the flat list of items from all levels. * The public [methodname]`confirmUpdate(int id, String parentKey)` method has been removed. The [methodname]`confirmUpdate(int id)` method is now called instead. -* The public [methodname]`getParentItem(T item)` method has been removed because it returned inconsistent results. Use the [classname]`HierarchicalDataProvider#getParent` method instead to get an item's parent reliably. +* The public [methodname]`getParentItem(T item)` method has been removed because it didn't handle all cases correctly. Use the [classname]`HierarchicalDataProvider#getParent` method instead to get an item's parent reliably. * The public [methodname]`getIndex(T item)` and [methodname]`getParentIndex(T item)` methods have been removed for the same reason. To find an item's index reliably, use a combination of the [classname]`HierarchicalDataProvider#getItemIndex`, [classname]`HierarchicalDataProvider#getParent`, [classname]`HierarchicalDataCommunicator#buildQuery` methods as shown in the example below: - ++ [.example] -- [source,java] From df5a612abab86073f6270a9c2b451c02398e9b97 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Mon, 27 Oct 2025 17:57:22 +0400 Subject: [PATCH 09/24] add HierarchicalCommunicationController to the list, minor polish --- articles/upgrading/index.adoc | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index 4ce6cbdc09..9bbc66da85 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -309,11 +309,11 @@ crud.getNewButton().addThemeVariants(ButtonVariant.LUMO_PRIMARY); ---- ==== Grid & Tree Grid -Tree Grid's client-side approach to data loading has been refactored. Instead of requesting each hierarchy level separately, it now sends a single request to the server and receives all visible data in a flat list. This resulted in several breaking changes that are explained below. +Tree Grid's client-side approach to data loading has been refactored. Instead of requesting data for each hierarchy level separately, it now sends a single request for the visible range, and the server returns the corresponding items as a flat list. This results in several breaking changes that are explained below. -The [propertyname]`pageSize` property now applies to the entire flattened hierarchy rather than each level individually as before. +The [propertyname]`pageSize` property now applies to the entire flattened hierarchy rather than to each level individually as before. -Expanded items are no longer exposed to the client side as a plain array. Instead, the web component receives each item’s depth information and uses it to display the data as a tree structure. +Expanded items are no longer exposed to the client side as a plain array. Instead, the web component receives depth information for each item and uses it to display the data as a tree structure. As a result, the [methodname]`TreeGridElement#isLoadingExpandedRows` TestBench API has been removed. You no longer need to wait for expanded rows specifically since they are loaded in the same request with other rows. @@ -384,17 +384,16 @@ The [classname]`TreeGridArrayUpdater` interface has also been removed. The [clas The [classname]`HierarchicalDataCommunicator` class in Flow has been fully refactored to use a flat list structure for representing hierarchical data on the client side. Although it still extends the [classname]`DataCommunicator` class, its internal implementation has been completely redesigned to optimize hierarchy rendering and address various bugs. This caused the following breaking changes: -* The [propertyname]`arrayUpdater` parameter has been removed from all [classname]`HierarchicalDataCommunicator` constructors. It now re-renders modified items by making granular [methodname]`Update#set(int index, List items)` calls. -* The protected [methodname]`createHierarchyMapper` and [methodname]`getHierarchyMapper` methods, as well as the [classname]`HierarchyMapper`` concept itself, have been removed. -* The protected [methodname]`doUnregister` method has been removed. -* The protected [methodname]`getPassivatedKeys` method has been removed. +* Both the [classname]`HierarchicalCommunicationController` and [classname]`HierarchyMapper` concepts have been retired, and all related protected APIs in [classname]`HierarchicalDataCommunicator` have been removed, including such methods as [methodname]`createHierarchyMapper` and [methodname]`getHierarchyMapper`. +* The [propertyname]`arrayUpdater` parameter has been removed from all [classname]`HierarchicalDataCommunicator` constructors. The data communicator now re-renders modified items by making granular [methodname]`Update#set(int index, List items)` calls. +* The protected [methodname]`doUnregister` and [methodname]`getPassivatedKeys` methods have been removed. * The protected [methodname]`setFilter` method has been removed. Use the returned consumer of the [methodname]`setDataProvider(HierarchicalDataProvider, Object)` method instead. * The protected [methodname]`collapse(T item, boolean syncClient)` method has been removed. Use the [methodname]`collapse(T item)` method instead. * The protected [methodname]`expand(T item, boolean syncClient)` method has been removed. Use the [methodname]`expand(T item)` method instead. * The public [methodname]`setRequestedRange` and [methodname]`setParentRequestedRange` methods have been merged into a single method [methodname]`setViewportRange(int start, int length)`. Instead of setting ranges separately for each level, this method sets a single range that operates on the flat list of items from all levels. * The public [methodname]`confirmUpdate(int id, String parentKey)` method has been removed. The [methodname]`confirmUpdate(int id)` method is now called instead. -* The public [methodname]`getParentItem(T item)` method has been removed because it didn't handle all cases correctly. Use the [classname]`HierarchicalDataProvider#getParent` method instead to get an item's parent reliably. -* The public [methodname]`getIndex(T item)` and [methodname]`getParentIndex(T item)` methods have been removed for the same reason. To find an item's index reliably, use a combination of the [classname]`HierarchicalDataProvider#getItemIndex`, [classname]`HierarchicalDataProvider#getParent`, [classname]`HierarchicalDataCommunicator#buildQuery` methods as shown in the example below: +* The public [methodname]`getParentItem(T item)` method has been removed. Use the [classname]`HierarchicalDataProvider#getParent` method instead to get an item's parent reliably. +* The public [methodname]`getIndex(T item)` and [methodname]`getParentIndex(T item)` methods have been removed. To find an item's index reliably, use a combination of the [classname]`HierarchicalDataProvider#getItemIndex`, [classname]`HierarchicalDataProvider#getParent`, [classname]`HierarchicalDataCommunicator#buildQuery` methods as shown in the example below: + [.example] -- From 13ca95968d1a106f389b79aff311896116a3e3fc Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Tue, 28 Oct 2025 09:16:25 +0400 Subject: [PATCH 10/24] minor wording polish --- articles/upgrading/index.adoc | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index 9bbc66da85..b35a7a5102 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -308,7 +308,7 @@ The “New Item” button in the CRUD component no longer uses the primary style crud.getNewButton().addThemeVariants(ButtonVariant.LUMO_PRIMARY); ---- -==== Grid & Tree Grid +==== Tree Grid Tree Grid's client-side approach to data loading has been refactored. Instead of requesting data for each hierarchy level separately, it now sends a single request for the visible range, and the server returns the corresponding items as a flat list. This results in several breaking changes that are explained below. The [propertyname]`pageSize` property now applies to the entire flattened hierarchy rather than to each level individually as before. @@ -341,7 +341,7 @@ public void shouldHaveSomeRowsExpanded() { } ---- -The following section is relevant if your code extends [classname]`Grid` or [classname]`TreeGrid`, or uses low-level APIs like [classname]`HierarchicalDataCommunicator`. +The following section is relevant if your code extends [classname]`Grid` or [classname]`TreeGrid`, or accesses low-level Flow APIs like [classname]`HierarchicalDataCommunicator`. .Low-Level API Changes [%collapsible] @@ -380,7 +380,7 @@ protected GridArrayUpdater createDefaultArrayUpdater() ---- -- -The [classname]`TreeGridArrayUpdater` interface has also been removed. The [classname]`GridArrayUpdater` interface now handles both hierarchical and non-hierarchical updates. +The [classname]`TreeGridArrayUpdater` interface has also been removed. The [classname]`GridArrayUpdater` interface is now used for both hierarchical and non-hierarchical updates. The [classname]`HierarchicalDataCommunicator` class in Flow has been fully refactored to use a flat list structure for representing hierarchical data on the client side. Although it still extends the [classname]`DataCommunicator` class, its internal implementation has been completely redesigned to optimize hierarchy rendering and address various bugs. This caused the following breaking changes: From d7681dd236218b2763fe05779c4fbc731acfa20e Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Tue, 28 Oct 2025 10:38:52 +0400 Subject: [PATCH 11/24] mention hierarchy formats --- articles/upgrading/index.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index b35a7a5102..f581802401 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -309,7 +309,7 @@ crud.getNewButton().addThemeVariants(ButtonVariant.LUMO_PRIMARY); ---- ==== Tree Grid -Tree Grid's client-side approach to data loading has been refactored. Instead of requesting data for each hierarchy level separately, it now sends a single request for the visible range, and the server returns the corresponding items as a flat list. This results in several breaking changes that are explained below. +Tree Grid's client-side approach to data loading has been refactored. Instead of requesting data for each hierarchy level separately, it now sends a single request for the visible range, and the server returns the corresponding items as a flat list. On the server side, in turn, it's now possible to choose how the data provider returns hierarchical data: `HierarchyFormat.NESTED` (default, each expanded level separately) or `HierarchyFormat.FLATTENED` (all expanded levels as a flat list). These updates introduce breaking changes, which are described below. The [propertyname]`pageSize` property now applies to the entire flattened hierarchy rather than to each level individually as before. From 37dea2b544c479457e5ccc13d2e126b7e840b701 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Tue, 28 Oct 2025 11:05:40 +0400 Subject: [PATCH 12/24] make Components a top level section --- articles/upgrading/index.adoc | 64 +++++++++++++++++------------------ 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index f581802401..d040a09de0 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -280,26 +280,35 @@ import '@vaadin/vaadin-lumo-styles/lumo.css'; One exception is the `@vaadin/react-components/css/lumo/Utility.module.css` CSS module, which has been preserved for backward compatibility as the Lumo package does not expose utilities as a CSS module. -=== Components +=== Optional Changes + +These changes are optional, as old approaches still work (with the exceptions listed in the Breaking Changes section), but recommended to get your application to the new best practices in Vaadin 25, and to avoid breaking changes in later major versions. + +* Refactor component styles from shadow DOM styles to normal CSS (this was the recommended approach already in V24) +* Single [classname]`@CssImport` of master stylesheet instead of [classname]`@Theme` or multiple [classname]`@CssImport`-s +* Load additional stylesheets through master stylesheet with `@import` +* Move stylesheets from `frontend/themes/` to `frontend` + +== Components -==== App Layout +=== App Layout The `bottom` attribute was removed and can no longer be used to target the bottom navbar. Instead, use the selector `::part(navbar-bottom)` to target it with CSS. -==== Cookie Consent +=== Cookie Consent The Cookie Consent component has been removed. Vaadin does not provide any replacement, but several third party options exist, such as link:https://github.com/orestbida/cookieconsent[orestbida/cookieconsent]. -==== Confirm Dialog +=== Confirm Dialog The Flow [classname]`ConfirmDialog` now only implements [classname]`HasComponents` instead of [classname]`HasOrderedComponents`. The following methods are not available anymore: [methodname]`replace`, [methodname]`indexOf`, [methodname]`getComponentCount`, [methodname]`getComponentAt`, [methodname]`getChildren`. Methods that allowed passing an [classname]`Element` instance have been removed. Use the corresponding alternatives that allow passing a [classname]`Component` instance instead. -==== Context Menu +=== Context Menu The [methodname]`add` method has been removed from the Flow [classname]`ContextMenu`. Instead, use [methodname]`addItem` to add menu items, or [methodname]`addComponent` to add generic components without wrapping them into a menu item. -==== Popover +=== Popover The Lit/React component’s `contentWidth` and `contentHeight` properties have been replaced by `width` and `height`. -==== CRUD +=== CRUD The “New Item” button in the CRUD component no longer uses the primary style variant by default. To get the old default back: [.example] @@ -308,7 +317,7 @@ The “New Item” button in the CRUD component no longer uses the primary style crud.getNewButton().addThemeVariants(ButtonVariant.LUMO_PRIMARY); ---- -==== Tree Grid +=== Tree Grid Tree Grid's client-side approach to data loading has been refactored. Instead of requesting data for each hierarchy level separately, it now sends a single request for the visible range, and the server returns the corresponding items as a flat list. On the server side, in turn, it's now possible to choose how the data provider returns hierarchical data: `HierarchyFormat.NESTED` (default, each expanded level separately) or `HierarchyFormat.FLATTENED` (all expanded levels as a flat list). These updates introduce breaking changes, which are described below. The [propertyname]`pageSize` property now applies to the entire flattened hierarchy rather than to each level individually as before. @@ -437,7 +446,7 @@ public int getFlatIndex(T item) { -- ==== -==== Charts +=== Charts The [methodname]`setWidthAdjust` / [methodname]`getWidthAdjust` methods of the [classname]`Title` class have been removed because it was removed from the underlying Highcharts library. The [classname]`DrillUpButton` class has been removed from the codebase and all of its related API, e.g., [methodname]`setDrillUpButton` / [methodname]`getDrillUpButton` from the [classname]`Drilldown` class. Use Breadcrumbs instead. Likewise, the [methodname]`setDrillUpText` / [methodname]`getDrillUpText` has been removed from the [classname]`Lang` class. @@ -464,15 +473,15 @@ dateTimePicker.setI18n(new DateTimePickerI18n() .setIncompleteInputErrorMessage("Please enter both date and time")); ---- -==== Time Picker +=== Time Picker The Time Picker no longer uses `vaadin-time-picker-combo-box` internally. This may affect custom shadow DOM styling of the component. The [classname]`TimePickerOverlayElement` TestBench element has been removed as the component now uses the native HTML popover mechanism for its drop-down. The [methodname]`getItem` and [methodname]`getLastItem` methods are now available on [classname]`TimePickerElement` itself. -==== Details +=== Details The [methodname]`setContent` and [methodname]`addContent` methods have been removed from the Flow [classname]`Details` component. Use regular methods from [classname]`HasComponents` such as [methodname]`add`, [methodname]`remove`, [methodname]`removeAll` instead. -==== Dialog and Confirm Dialog +=== Dialog and Confirm Dialog [classname]`Dialog` and [classname]`ConfirmDialog` do not show a closing animation anymore when removing the component from the UI / DOM. Instead, the dialog should be closed and the `closed` event needs to be used to wait for the closing animation to finish before removing the component. For Flow this is relevant when manually adding / removing the dialog from the UI. The event is not needed when calling [methodname]`dialog.open()` without adding the dialog to the UI. @@ -523,7 +532,7 @@ const opened = useSignal(true); ref.current?.close(); ---- -==== Form Layout +=== Form Layout The following custom CSS properties have been removed from `vaadin-form-item`: * `--vaadin-form-item-label-width` @@ -536,13 +545,13 @@ Use the following CSS properties on `vaadin-form-layout` instead: * `--vaadin-form-layout-label-spacing` * `--vaadin-form-layout-row-spacing` -==== Map +=== Map The Map component’s `borderless` / `BORDERLESS` style variant has been renamed `no-border` / `NO_BORDER` for consistency with other components. -==== Menu Bar +=== Menu Bar The TestBench API `MenuBarElement.OVERLAY_TAG` has been removed. To get a reference to a sub-menu, instead use [methodname]`MenuBarButtonElement.openSubMenu` which returns a reference. -==== Message Input +=== Message Input The send button no longer uses the Primary style variant by default. To revert this change you can style the button with CSS: [.example] @@ -556,13 +565,13 @@ vaadin-message-input > vaadin-message-input-button { Also, the send button now is a `vaadin-message-input-button` instead of `vaadin-button`. -==== Multi-Select Combo Box +=== Multi-Select Combo Box The Multi-Select Combo Box no longer uses `vaadin-multi-select-combo-box-internal` internally. This may affect custom shadow DOM styling of the component. -==== Rich Text Editor +=== Rich Text Editor The `on` attribute was removed and can no longer be used to target toggled-on buttons. Instead, use the selector `::part(toolbar-button-pressed)` to target them with CSS. -==== Split Layout +=== Split Layout The Split Layout component no longer sets `overflow:auto` on its two child elements. The link:https://vaadin.com/docs/latest/components/scroller[Scroller] component is recommended to make them scrollable on overflow. Alternatively, you can apply it manually with CSS: [.example] @@ -575,29 +584,20 @@ vaadin-split-layout > * { The `SplitterDragendEvent` and `addSplitterDragendListener` have been renamed to `SplitterDragEndEvent` and `addSplitterDragEndListener`, respectively. -==== Tabs / Tab Sheet +=== Tabs / Tab Sheet The [classname]`TabsVariant.LUMO_ICON_ON_TOP` and [classname]`TabSheetVariant.LUMO_ICON_ON_TOP` theme variants have been removed. Apply the [classname]`TabVariant.LUMO_ICON_ON_TOP` to individual tabs instead. -==== Text Field +=== Text Field The [classname]`HasPrefixAndSuffix` interface has been removed from the Flow [classname]`TextField` and related components. The components now implement [classname]`HasPrefix` and [classname]`HasSuffix` instead. -==== Upload +=== Upload The `upload-file` elements representing files in the list now use CSS grid layout instead of flexbox. This may affect custom styling of the element. The `row` and `info` parts have been removed. -==== Validation +=== Validation Flow components using validation do not implement [classname]`HasClientValidation` anymore, as such the [methodname]`addClientValidatedEventListener` method has been removed. Consider using [classname]`ValidationStatusChangeEvent` to get notified when users enter input that can not be parsed. -=== Optional Changes - -These changes are optional, as old approaches still work (with the exceptions listed in the Breaking Changes section), but recommended to get your application to the new best practices in Vaadin 25, and to avoid breaking changes in later major versions. - -* Refactor component styles from shadow DOM styles to normal CSS (this was the recommended approach already in V24) -* Single [classname]`@CssImport` of master stylesheet instead of [classname]`@Theme` or multiple [classname]`@CssImport`-s -* Load additional stylesheets through master stylesheet with `@import` -* Move stylesheets from `frontend/themes/` to `frontend` - == Security Configuration Changes The deprecated [classname]`VaadinWebSecurity` class has been removed from Vaadin 25. Use instead the [classname]`VaadinSecurityConfigurer` base class for your security configuration. Below is an example of this: From 2c7ec120208ead8918e8014060b4df94daf03344 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Tue, 28 Oct 2025 11:11:29 +0400 Subject: [PATCH 13/24] Update articles/upgrading/index.adoc Co-authored-by: Serhii Kulykov --- articles/upgrading/index.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index d040a09de0..862b195a48 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -591,7 +591,7 @@ The [classname]`TabsVariant.LUMO_ICON_ON_TOP` and [classname]`TabSheetVariant.LU The [classname]`HasPrefixAndSuffix` interface has been removed from the Flow [classname]`TextField` and related components. The components now implement [classname]`HasPrefix` and [classname]`HasSuffix` instead. === Upload -The `upload-file` elements representing files in the list now use CSS grid layout instead of flexbox. This may affect custom styling of the element. +The `vaadin-upload-file` elements representing files in the list now use CSS grid layout instead of flexbox. This may affect custom styling of the element. The `row` and `info` parts have been removed. From 73895c6b9c00521241489054f90f7c5599c5460b Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Tue, 28 Oct 2025 11:11:38 +0400 Subject: [PATCH 14/24] Update articles/upgrading/index.adoc Co-authored-by: Serhii Kulykov --- articles/upgrading/index.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index 862b195a48..abb092deec 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -593,7 +593,7 @@ The [classname]`HasPrefixAndSuffix` interface has been removed from the Flow [cl === Upload The `vaadin-upload-file` elements representing files in the list now use CSS grid layout instead of flexbox. This may affect custom styling of the element. -The `row` and `info` parts have been removed. +The `row` and `info` parts have been removed from the `vaadin-upload-file` element. === Validation Flow components using validation do not implement [classname]`HasClientValidation` anymore, as such the [methodname]`addClientValidatedEventListener` method has been removed. Consider using [classname]`ValidationStatusChangeEvent` to get notified when users enter input that can not be parsed. From f3ff2f10a56db9e12a81725546076ea6217d06fa Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Tue, 28 Oct 2025 11:25:10 +0400 Subject: [PATCH 15/24] Update articles/upgrading/index.adoc Co-authored-by: Rolf Smeds --- articles/upgrading/index.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index abb092deec..460615ef85 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -287,7 +287,7 @@ These changes are optional, as old approaches still work (with the exceptions li * Refactor component styles from shadow DOM styles to normal CSS (this was the recommended approach already in V24) * Single [classname]`@CssImport` of master stylesheet instead of [classname]`@Theme` or multiple [classname]`@CssImport`-s * Load additional stylesheets through master stylesheet with `@import` -* Move stylesheets from `frontend/themes/` to `frontend` +* Move stylesheets from `frontend/themes/` to `src/main/resources/META-INF/resources` == Components From 6bdb5a76b6315ca4a446bd3df37e6843b33f5767 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Tue, 28 Oct 2025 11:25:17 +0400 Subject: [PATCH 16/24] Update articles/upgrading/index.adoc Co-authored-by: Rolf Smeds --- articles/upgrading/index.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index 460615ef85..63f0245af7 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -285,7 +285,7 @@ One exception is the `@vaadin/react-components/css/lumo/Utility.module.css` CSS These changes are optional, as old approaches still work (with the exceptions listed in the Breaking Changes section), but recommended to get your application to the new best practices in Vaadin 25, and to avoid breaking changes in later major versions. * Refactor component styles from shadow DOM styles to normal CSS (this was the recommended approach already in V24) -* Single [classname]`@CssImport` of master stylesheet instead of [classname]`@Theme` or multiple [classname]`@CssImport`-s +* Load a master stylesheet with [classname]`@StyleSheet` instead of [classname]`@Theme` or multiple [classname]`@CssImport`-s * Load additional stylesheets through master stylesheet with `@import` * Move stylesheets from `frontend/themes/` to `src/main/resources/META-INF/resources` From e05df113970e15db0703fffd25d65d03ef473b91 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Tue, 28 Oct 2025 11:24:40 +0400 Subject: [PATCH 17/24] sort sections alphabetically --- articles/upgrading/index.adoc | 274 +++++++++++++++++----------------- 1 file changed, 137 insertions(+), 137 deletions(-) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index 63f0245af7..dc3732a3e2 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -305,9 +305,6 @@ Methods that allowed passing an [classname]`Element` instance have been removed. === Context Menu The [methodname]`add` method has been removed from the Flow [classname]`ContextMenu`. Instead, use [methodname]`addItem` to add menu items, or [methodname]`addComponent` to add generic components without wrapping them into a menu item. -=== Popover -The Lit/React component’s `contentWidth` and `contentHeight` properties have been replaced by `width` and `height`. - === CRUD The “New Item” button in the CRUD component no longer uses the primary style variant by default. To get the old default back: @@ -317,135 +314,6 @@ The “New Item” button in the CRUD component no longer uses the primary style crud.getNewButton().addThemeVariants(ButtonVariant.LUMO_PRIMARY); ---- -=== Tree Grid -Tree Grid's client-side approach to data loading has been refactored. Instead of requesting data for each hierarchy level separately, it now sends a single request for the visible range, and the server returns the corresponding items as a flat list. On the server side, in turn, it's now possible to choose how the data provider returns hierarchical data: `HierarchyFormat.NESTED` (default, each expanded level separately) or `HierarchyFormat.FLATTENED` (all expanded levels as a flat list). These updates introduce breaking changes, which are described below. - -The [propertyname]`pageSize` property now applies to the entire flattened hierarchy rather than to each level individually as before. - -Expanded items are no longer exposed to the client side as a plain array. Instead, the web component receives depth information for each item and uses it to display the data as a tree structure. - -As a result, the [methodname]`TreeGridElement#isLoadingExpandedRows` TestBench API has been removed. You no longer need to wait for expanded rows specifically since they are loaded in the same request with other rows. - -The [methodname]`TreeGridElement#getNumberOfExpandedRows` TestBench API has also been removed. Use unit tests instead to verify that exact items are expanded: - -[source,java,role="before"] -.integration test ----- -private TreeGridElement treeGridElement; - -@Test -public void shouldHaveSomeRowsExpanded() { - Assert.assertEquals(2, treeGridElement.getNumberOfExpandedItems()); -} ----- -[source,java,role="after"] -.unit test ----- -private TreeGrid treeGrid; - -@Test -public void shouldHaveSomeRowsExpanded() { - Assert.assertTrue(treeGrid.isExpanded("Item 0")); - Assert.assertTrue(treeGrid.isExpanded("Item 0-1")); -} ----- - -The following section is relevant if your code extends [classname]`Grid` or [classname]`TreeGrid`, or accesses low-level Flow APIs like [classname]`HierarchicalDataCommunicator`. - -.Low-Level API Changes -[%collapsible] -==== -The [classname]`GridArrayUpdater.UpdateQueueData` class has been removed, along with related API: - -* The [methodname]`setUpdateQueueData` method in [classname]`GridArrayUpdater` has been removed -* The [methodname]`getUpdateQueueData` method in [classname]`GridArrayUpdater` has been removed -* Parameters that included [classname]`UpdateQueueData` in their type have been removed from all [classname]`Grid` and [classname]`TreeGrid` constructors and methods: -+ --- -[source,java,role="before"] ----- -protected > Grid( - Class beanType, - SerializableBiFunction updateQueueBuilder, - B dataCommunicatorBuilder) ----- -[source,java,role="after"] ----- -protected > Grid( - Class beanType, - B dataCommunicatorBuilder) ----- --- -+ --- -[source,java,role="before"] ----- -protected GridArrayUpdater createDefaultArrayUpdater( - SerializableBiFunction updateQueueFactory) ----- -[source,java,role="after"] ----- -protected GridArrayUpdater createDefaultArrayUpdater() ----- --- - -The [classname]`TreeGridArrayUpdater` interface has also been removed. The [classname]`GridArrayUpdater` interface is now used for both hierarchical and non-hierarchical updates. - -The [classname]`HierarchicalDataCommunicator` class in Flow has been fully refactored to use a flat list structure for representing hierarchical data on the client side. Although it still extends the [classname]`DataCommunicator` class, its internal implementation has been completely redesigned to optimize hierarchy rendering and address various bugs. This caused the following breaking changes: - -* Both the [classname]`HierarchicalCommunicationController` and [classname]`HierarchyMapper` concepts have been retired, and all related protected APIs in [classname]`HierarchicalDataCommunicator` have been removed, including such methods as [methodname]`createHierarchyMapper` and [methodname]`getHierarchyMapper`. -* The [propertyname]`arrayUpdater` parameter has been removed from all [classname]`HierarchicalDataCommunicator` constructors. The data communicator now re-renders modified items by making granular [methodname]`Update#set(int index, List items)` calls. -* The protected [methodname]`doUnregister` and [methodname]`getPassivatedKeys` methods have been removed. -* The protected [methodname]`setFilter` method has been removed. Use the returned consumer of the [methodname]`setDataProvider(HierarchicalDataProvider, Object)` method instead. -* The protected [methodname]`collapse(T item, boolean syncClient)` method has been removed. Use the [methodname]`collapse(T item)` method instead. -* The protected [methodname]`expand(T item, boolean syncClient)` method has been removed. Use the [methodname]`expand(T item)` method instead. -* The public [methodname]`setRequestedRange` and [methodname]`setParentRequestedRange` methods have been merged into a single method [methodname]`setViewportRange(int start, int length)`. Instead of setting ranges separately for each level, this method sets a single range that operates on the flat list of items from all levels. -* The public [methodname]`confirmUpdate(int id, String parentKey)` method has been removed. The [methodname]`confirmUpdate(int id)` method is now called instead. -* The public [methodname]`getParentItem(T item)` method has been removed. Use the [classname]`HierarchicalDataProvider#getParent` method instead to get an item's parent reliably. -* The public [methodname]`getIndex(T item)` and [methodname]`getParentIndex(T item)` methods have been removed. To find an item's index reliably, use a combination of the [classname]`HierarchicalDataProvider#getItemIndex`, [classname]`HierarchicalDataProvider#getParent`, [classname]`HierarchicalDataCommunicator#buildQuery` methods as shown in the example below: -+ -[.example] --- -[source,java] -.HierarchyFormat.NESTED ----- -// By default, the data provider implements HierarchyFormat.NESTED, -// meaning each request returns only the direct children of a parent. -// In this format, items are identified by their hierarchical path, -// a list of indexes from the root to the item. This path can then -// be passed to `TreeGrid#scrollToIndex` to scroll to that item, for -// example. - -public List getIndexPath(T item) { - List path = new LinkedList<>(); - do { - var parent = dataCommunicator.getDataProvider().getParent(item); - var query = dataCommunicator.buildQuery(parent, 0, Integer.MAX_VALUE); - var index = dataCommunicator.getDataProvider().getItemIndex(item, query); - path.addFirst(index); - item = parent; - } while (item != null); - return path; -} ----- -[source,java] -.HierarchyFormat.FLATTENED ----- -// When the data provider implements HierarchyFormat.FLATTENED, -// each request returns all descendants of a parent item in a -// single flat list. In this format, items are identified by -// their index in that list, which is called "flat index". -// This index can then be passed to `TreeGrid#scrollToIndex` -// to scroll to that item, for example. - -public int getFlatIndex(T item) { - var query = dataCommunicator.buildQuery(0, Integer.MAX_VALUE); - return dataCommunicator.getDataProvider().getItemIndex(item, query); -} ----- --- -==== - === Charts The [methodname]`setWidthAdjust` / [methodname]`getWidthAdjust` methods of the [classname]`Title` class have been removed because it was removed from the underlying Highcharts library. @@ -473,11 +341,6 @@ dateTimePicker.setI18n(new DateTimePickerI18n() .setIncompleteInputErrorMessage("Please enter both date and time")); ---- -=== Time Picker -The Time Picker no longer uses `vaadin-time-picker-combo-box` internally. This may affect custom shadow DOM styling of the component. - -The [classname]`TimePickerOverlayElement` TestBench element has been removed as the component now uses the native HTML popover mechanism for its drop-down. The [methodname]`getItem` and [methodname]`getLastItem` methods are now available on [classname]`TimePickerElement` itself. - === Details The [methodname]`setContent` and [methodname]`addContent` methods have been removed from the Flow [classname]`Details` component. Use regular methods from [classname]`HasComponents` such as [methodname]`add`, [methodname]`remove`, [methodname]`removeAll` instead. @@ -568,6 +431,9 @@ Also, the send button now is a `vaadin-message-input-button` instead of `vaadin- === Multi-Select Combo Box The Multi-Select Combo Box no longer uses `vaadin-multi-select-combo-box-internal` internally. This may affect custom shadow DOM styling of the component. +=== Popover +The Lit/React component’s `contentWidth` and `contentHeight` properties have been replaced by `width` and `height`. + === Rich Text Editor The `on` attribute was removed and can no longer be used to target toggled-on buttons. Instead, use the selector `::part(toolbar-button-pressed)` to target them with CSS. @@ -590,6 +456,140 @@ The [classname]`TabsVariant.LUMO_ICON_ON_TOP` and [classname]`TabSheetVariant.LU === Text Field The [classname]`HasPrefixAndSuffix` interface has been removed from the Flow [classname]`TextField` and related components. The components now implement [classname]`HasPrefix` and [classname]`HasSuffix` instead. +=== Time Picker +The Time Picker no longer uses `vaadin-time-picker-combo-box` internally. This may affect custom shadow DOM styling of the component. + +The [classname]`TimePickerOverlayElement` TestBench element has been removed as the component now uses the native HTML popover mechanism for its drop-down. The [methodname]`getItem` and [methodname]`getLastItem` methods are now available on [classname]`TimePickerElement` itself. + +=== Tree Grid +Tree Grid's client-side approach to data loading has been refactored. Instead of requesting data for each hierarchy level separately, it now sends a single request for the visible range, and the server returns the corresponding items as a flat list. On the server side, in turn, it's now possible to choose how the data provider returns hierarchical data: `HierarchyFormat.NESTED` (default, each expanded level separately) or `HierarchyFormat.FLATTENED` (all expanded levels as a flat list). These updates introduce breaking changes, which are described below. + +The [propertyname]`pageSize` property now applies to the entire flattened hierarchy rather than to each level individually as before. + +Expanded items are no longer exposed to the client side as a plain array. Instead, the web component receives depth information for each item and uses it to display the data as a tree structure. + +As a result, the [methodname]`TreeGridElement#isLoadingExpandedRows` TestBench API has been removed. You no longer need to wait for expanded rows specifically since they are loaded in the same request with other rows. + +The [methodname]`TreeGridElement#getNumberOfExpandedRows` TestBench API has also been removed. Use unit tests instead to verify that exact items are expanded: + +[source,java,role="before"] +.integration test +---- +private TreeGridElement treeGridElement; + +@Test +public void shouldHaveSomeRowsExpanded() { + Assert.assertEquals(2, treeGridElement.getNumberOfExpandedItems()); +} +---- +[source,java,role="after"] +.unit test +---- +private TreeGrid treeGrid; + +@Test +public void shouldHaveSomeRowsExpanded() { + Assert.assertTrue(treeGrid.isExpanded("Item 0")); + Assert.assertTrue(treeGrid.isExpanded("Item 0-1")); +} +---- + +The following section is relevant if your code extends [classname]`Grid` or [classname]`TreeGrid`, or accesses low-level Flow APIs like [classname]`HierarchicalDataCommunicator`. + +.Low-Level API Changes +[%collapsible] +==== +The [classname]`GridArrayUpdater.UpdateQueueData` class has been removed, along with related API: + +* The [methodname]`setUpdateQueueData` method in [classname]`GridArrayUpdater` has been removed +* The [methodname]`getUpdateQueueData` method in [classname]`GridArrayUpdater` has been removed +* Parameters that included [classname]`UpdateQueueData` in their type have been removed from all [classname]`Grid` and [classname]`TreeGrid` constructors and methods: ++ +-- +[source,java,role="before"] +---- +protected > Grid( + Class beanType, + SerializableBiFunction updateQueueBuilder, + B dataCommunicatorBuilder) +---- +[source,java,role="after"] +---- +protected > Grid( + Class beanType, + B dataCommunicatorBuilder) +---- +-- ++ +-- +[source,java,role="before"] +---- +protected GridArrayUpdater createDefaultArrayUpdater( + SerializableBiFunction updateQueueFactory) +---- +[source,java,role="after"] +---- +protected GridArrayUpdater createDefaultArrayUpdater() +---- +-- + +The [classname]`TreeGridArrayUpdater` interface has also been removed. The [classname]`GridArrayUpdater` interface is now used for both hierarchical and non-hierarchical updates. + +The [classname]`HierarchicalDataCommunicator` class in Flow has been fully refactored to use a flat list structure for representing hierarchical data on the client side. Although it still extends the [classname]`DataCommunicator` class, its internal implementation has been completely redesigned to optimize hierarchy rendering and address various bugs. This caused the following breaking changes: + +* Both the [classname]`HierarchicalCommunicationController` and [classname]`HierarchyMapper` concepts have been retired, and all related protected APIs in [classname]`HierarchicalDataCommunicator` have been removed, including such methods as [methodname]`createHierarchyMapper` and [methodname]`getHierarchyMapper`. +* The [propertyname]`arrayUpdater` parameter has been removed from all [classname]`HierarchicalDataCommunicator` constructors. The data communicator now re-renders modified items by making granular [methodname]`Update#set(int index, List items)` calls. +* The protected [methodname]`doUnregister` and [methodname]`getPassivatedKeys` methods have been removed. +* The protected [methodname]`setFilter` method has been removed. Use the returned consumer of the [methodname]`setDataProvider(HierarchicalDataProvider, Object)` method instead. +* The protected [methodname]`collapse(T item, boolean syncClient)` method has been removed. Use the [methodname]`collapse(T item)` method instead. +* The protected [methodname]`expand(T item, boolean syncClient)` method has been removed. Use the [methodname]`expand(T item)` method instead. +* The public [methodname]`setRequestedRange` and [methodname]`setParentRequestedRange` methods have been merged into a single method [methodname]`setViewportRange(int start, int length)`. Instead of setting ranges separately for each level, this method sets a single range that operates on the flat list of items from all levels. +* The public [methodname]`confirmUpdate(int id, String parentKey)` method has been removed. The [methodname]`confirmUpdate(int id)` method is now called instead. +* The public [methodname]`getParentItem(T item)` method has been removed. Use the [classname]`HierarchicalDataProvider#getParent` method instead to get an item's parent reliably. +* The public [methodname]`getIndex(T item)` and [methodname]`getParentIndex(T item)` methods have been removed. To find an item's index reliably, use a combination of the [classname]`HierarchicalDataProvider#getItemIndex`, [classname]`HierarchicalDataProvider#getParent`, [classname]`HierarchicalDataCommunicator#buildQuery` methods as shown in the example below: ++ +[.example] +-- +[source,java] +.HierarchyFormat.NESTED +---- +// By default, the data provider implements HierarchyFormat.NESTED, +// meaning each request returns only the direct children of a parent. +// In this format, items are identified by their hierarchical path, +// a list of indexes from the root to the item. This path can then +// be passed to `TreeGrid#scrollToIndex` to scroll to that item, for +// example. + +public List getIndexPath(T item) { + List path = new LinkedList<>(); + do { + var parent = dataCommunicator.getDataProvider().getParent(item); + var query = dataCommunicator.buildQuery(parent, 0, Integer.MAX_VALUE); + var index = dataCommunicator.getDataProvider().getItemIndex(item, query); + path.addFirst(index); + item = parent; + } while (item != null); + return path; +} +---- +[source,java] +.HierarchyFormat.FLATTENED +---- +// When the data provider implements HierarchyFormat.FLATTENED, +// each request returns all descendants of a parent item in a +// single flat list. In this format, items are identified by +// their index in that list, which is called "flat index". +// This index can then be passed to `TreeGrid#scrollToIndex` +// to scroll to that item, for example. + +public int getFlatIndex(T item) { + var query = dataCommunicator.buildQuery(0, Integer.MAX_VALUE); + return dataCommunicator.getDataProvider().getItemIndex(item, query); +} +---- +-- +==== + === Upload The `vaadin-upload-file` elements representing files in the list now use CSS grid layout instead of flexbox. This may affect custom styling of the element. From 92a5649e705ea9aa5cb4fef841057fcd38346aa1 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Tue, 28 Oct 2025 11:26:45 +0400 Subject: [PATCH 18/24] move Overlays under Components section --- articles/upgrading/index.adoc | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index dc3732a3e2..d516a6f176 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -248,15 +248,6 @@ The un-themed base styles in Vaadin components have changed significantly in Vaa The [classname]`WebComponentExporter` feature in Flow allows you to export Flow components as Web Components for embedding into non-Vaadin user interfaces. In Vaadin 25, stylesheets loaded into exported components using the [classname]`@CssImport` annotation only load those styles into the exported component’s shadow DOM, not the surrounding page as before. To load the same styles into the surrounding page, import the stylesheet to it separately. -=== Overlays - -Component overlays (like Dialog or the Combo Box drop-down) are no longer rendered outside of the component itself. This causes the following breaking changes to overlay styling: - -* The `overlayClass` property and the [methodname]`setOverlayClassName` method in Flow are gone. Apply a normal class name to the component instead. -* The `vaadin-xyz-overlay` (such as `vaadin-dialog-overlay`) elements have been removed (as they are now unnecessary). Refactor any CSS targeting these elements to target the component itself instead (e.g. `vaadin-dialog` instead of `vaadin-dialog-overlay`). Other CSS selectors are unaffected by this change. - -You’ll find the appropriate selector in the component’s Styling page. - === React Components The Lumo CSS files have been removed from the `@vaadin/react-components` package. As mentioned above, the Lumo theme should be imported from `@vaadin/vaadin-lumo-styles` instead. @@ -431,6 +422,15 @@ Also, the send button now is a `vaadin-message-input-button` instead of `vaadin- === Multi-Select Combo Box The Multi-Select Combo Box no longer uses `vaadin-multi-select-combo-box-internal` internally. This may affect custom shadow DOM styling of the component. +=== Overlays + +Component overlays (like Dialog or the Combo Box drop-down) are no longer rendered outside of the component itself. This causes the following breaking changes to overlay styling: + +* The `overlayClass` property and the [methodname]`setOverlayClassName` method in Flow are gone. Apply a normal class name to the component instead. +* The `vaadin-xyz-overlay` (such as `vaadin-dialog-overlay`) elements have been removed (as they are now unnecessary). Refactor any CSS targeting these elements to target the component itself instead (e.g. `vaadin-dialog` instead of `vaadin-dialog-overlay`). Other CSS selectors are unaffected by this change. + +You’ll find the appropriate selector in the component’s Styling page. + === Popover The Lit/React component’s `contentWidth` and `contentHeight` properties have been replaced by `width` and `height`. From 7037cd41c838372a50f9d8fc364b655d08bab82f Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Tue, 28 Oct 2025 11:27:19 +0400 Subject: [PATCH 19/24] remove mention of Tailwind --- articles/upgrading/index.adoc | 2 -- 1 file changed, 2 deletions(-) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index d516a6f176..93d1244592 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -232,8 +232,6 @@ All Lumo styles, including badges, but excluding Lumo Utility Classes are includ @import "@vaadin/vaadin-lumo-styles/utility.css"; ---- -Vaadin 25 also supports Tailwind CSS utility classes. - NOTE: The way the Lumo theme is injected into Vaadin components has been refactored to not use the `registerStyles()` helper. This should not cause any breaking changes in applications; please report issues at link:https://github.com/vaadin/web-components/issues[vaadin/web-components] if you find otherwise. === Material Theme From 921e3be322f0a122db4957ba3d3580df151ef635 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Tue, 28 Oct 2025 11:35:08 +0400 Subject: [PATCH 20/24] fix heading level --- articles/upgrading/index.adoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index 93d1244592..8a066ed185 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -312,13 +312,13 @@ All methods that accept [classname]`Date` as parameter that were previously mark Chart configurations are now serialized using Jackson 3. The [methodname]`ChartSerialization.setObjectMapperInstance` method that can be used to customize serialization behavior now expects a [classname]`tools.jackson.databind.ObjectWriter` instance. -==== Date Picker and Date Time Picker +=== Date Picker and Date Time Picker The following changes have been made to the internal DOM structure of the Date Picker overlay, which may affect custom styling: * The `vaadin-date-picker-overlay-content` element is now a CSS grid layout instead of a flexbox. * The `overlay-header` part has been removed. -==== Date Time Picker +=== Date Time Picker In the Flow [classname]`DateTimePicker` component, validation is no longer triggered on blur if the value has remained unchanged after user interaction, making this behavior consistent with the rest of the field components, which already received a similar update in V24. Incomplete input, where only a date or only a time is entered, is now treated as invalid. The corresponding error message can be configured via [classname]`DateTimePickerI18n`: From 8729bd5ec642c287d5c2335b2d466c8043d65813 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Wed, 29 Oct 2025 12:00:23 +0100 Subject: [PATCH 21/24] rework loading Lumo section --- articles/upgrading/index.adoc | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index 8a066ed185..e90c7d9feb 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -218,18 +218,29 @@ The special [filename]`document.css` file (for loading styles into the document === Lumo Theme -The Lumo theme is no longer loaded by default, except if you’re using the [classname]`@Theme` annotation to load an application theme folder. If you’re not using [classname]`@Theme`, and instead load stylesheets with [classname]`@StyleSheet` or [classname]`@CssImport`, you need to add an import for Lumo in one of them: +The Lumo theme is no longer loaded by default, except if you’re using the [classname]`@Theme` annotation to load an application theme folder. If you’re not using [classname]`@Theme`, then add a [classname]`@StyleSheet` annotation to either your application class or a root layout to load the Lumo theme: -[source,css] +[source,java] +---- +@StyleSheet(Lumo.STYLESHEET); +public class Application implements AppShellConfigurator {} +---- + +All Lumo styles, including badges, but excluding Lumo Utility Classes are included by default when the Lumo theme is loaded. To load the utility classes, add a separate [classname]`@StyleSheet` annotation: + +[source,java] ---- -@import "@vaadin/vaadin-lumo-styles/lumo.css"; +@StyleSheet(Lumo.STYLESHEET); +@StyleSheet(Lumo.UTILITY_STYLESHEET); +public class Application implements AppShellConfigurator {} ---- -All Lumo styles, including badges, but excluding Lumo Utility Classes are included by default when the Lumo theme is loaded. To load the utility classes, add the following line to a stylesheet: +Alternatively, if you are importing a master stylesheet using [classname]`@CssImport`, you can load the Lumo theme or utility classes from it like so: [source,css] ---- -@import "@vaadin/vaadin-lumo-styles/utility.css"; +@import '@vaadin/vaadin-lumo-styles/lumo.css'; +@import '@vaadin/vaadin-lumo-styles/utility.css'; ---- NOTE: The way the Lumo theme is injected into Vaadin components has been refactored to not use the `registerStyles()` helper. This should not cause any breaking changes in applications; please report issues at link:https://github.com/vaadin/web-components/issues[vaadin/web-components] if you find otherwise. From dfce621ad646cd6a83b7cd3c7d3c07ee3db4baaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Wed, 29 Oct 2025 12:09:07 +0100 Subject: [PATCH 22/24] improve overlays section --- articles/upgrading/index.adoc | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index e90c7d9feb..863b3d0dc8 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -436,7 +436,16 @@ The Multi-Select Combo Box no longer uses `vaadin-multi-select-combo-box-interna Component overlays (like Dialog or the Combo Box drop-down) are no longer rendered outside of the component itself. This causes the following breaking changes to overlay styling: * The `overlayClass` property and the [methodname]`setOverlayClassName` method in Flow are gone. Apply a normal class name to the component instead. -* The `vaadin-xyz-overlay` (such as `vaadin-dialog-overlay`) elements have been removed (as they are now unnecessary). Refactor any CSS targeting these elements to target the component itself instead (e.g. `vaadin-dialog` instead of `vaadin-dialog-overlay`). Other CSS selectors are unaffected by this change. +* The `vaadin-xyz-overlay` (such as `vaadin-dialog-overlay`) elements can not be targeted with CSS anymore. Refactor any CSS targeting these elements to target the component itself instead (e.g. `vaadin-dialog` instead of `vaadin-dialog-overlay`), using the same part names as before. Other CSS selectors are unaffected by this change. + +[source,css,role="before"] +---- +vaadin-dialog-overlay::part(content) {} +---- +[source,css,role="after"] +---- +vaadin-dialog::part(content) {} +---- You’ll find the appropriate selector in the component’s Styling page. From 578c507204872abb9f5afa2733f745ff92b579bc Mon Sep 17 00:00:00 2001 From: ugur-vaadin Date: Wed, 29 Oct 2025 13:32:17 +0200 Subject: [PATCH 23/24] add scrollToItem section --- articles/upgrading/index.adoc | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index 863b3d0dc8..4f7599ad32 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -608,6 +608,39 @@ public int getFlatIndex(T item) { -- ==== +Tree Grid now supports scrolling to a specific item using [methodname]`scrollToItem(T)`. Unlike [methodname]`scrollToIndex(int...)`, this method automatically expands any collapsed parent items before scrolling to the target item. + +This feature relies on the [methodname]`getParent(T)` and [methodname]`getItemIndex(T, HierarchicalQuery)` methods of the [classname]`HierarchicalDataProvider` interface. To use [methodname]`scrollToItem(T)`, your data provider must implement these methods. The built-in `TreeDataProvider` already provides full support out of the box. + +The following table shows which methods need to be implemented, depending on the data provider type and whether it is in-memory or not: + +[cols="3,2,4,2"] +|=== +| `HierarchicalDataProvider` | `isInMemory()` | `getItemIndex(T, HierarchicalQuery)` | `getParent(T)` + +.2+|`HierarchyFormat.NESTED` +|`true` +|Not required +|Required +|`false` +|Required +|Required + +.2+|`HierarchyFormat.FLATTENED` +|`true` +|Not required +|Required +|`false` +|Required +|Required + + +|`TreeDataProvider` +|`true` +|Not required +|Not required +|=== + === Upload The `vaadin-upload-file` elements representing files in the list now use CSS grid layout instead of flexbox. This may affect custom styling of the element. From f55e64a49179d167ed522760ca1a96d02179af49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Wed, 29 Oct 2025 14:11:31 +0100 Subject: [PATCH 24/24] remove CssImport alternative --- articles/upgrading/index.adoc | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/articles/upgrading/index.adoc b/articles/upgrading/index.adoc index 4f7599ad32..030c24fb40 100644 --- a/articles/upgrading/index.adoc +++ b/articles/upgrading/index.adoc @@ -235,14 +235,6 @@ All Lumo styles, including badges, but excluding Lumo Utility Classes are includ public class Application implements AppShellConfigurator {} ---- -Alternatively, if you are importing a master stylesheet using [classname]`@CssImport`, you can load the Lumo theme or utility classes from it like so: - -[source,css] ----- -@import '@vaadin/vaadin-lumo-styles/lumo.css'; -@import '@vaadin/vaadin-lumo-styles/utility.css'; ----- - NOTE: The way the Lumo theme is injected into Vaadin components has been refactored to not use the `registerStyles()` helper. This should not cause any breaking changes in applications; please report issues at link:https://github.com/vaadin/web-components/issues[vaadin/web-components] if you find otherwise. === Material Theme @@ -285,8 +277,8 @@ One exception is the `@vaadin/react-components/css/lumo/Utility.module.css` CSS These changes are optional, as old approaches still work (with the exceptions listed in the Breaking Changes section), but recommended to get your application to the new best practices in Vaadin 25, and to avoid breaking changes in later major versions. * Refactor component styles from shadow DOM styles to normal CSS (this was the recommended approach already in V24) -* Load a master stylesheet with [classname]`@StyleSheet` instead of [classname]`@Theme` or multiple [classname]`@CssImport`-s -* Load additional stylesheets through master stylesheet with `@import` +* Load custom styles through a master stylesheet with [classname]`@StyleSheet` instead of [classname]`@Theme` or multiple [classname]`@CssImport`-s +* Load additional custom stylesheets through master stylesheet with `@import` * Move stylesheets from `frontend/themes/` to `src/main/resources/META-INF/resources` == Components