feat: add ClientItemToggleEvent to notify when user toggles an item

[vursen]

Description

The PR adds a new event ClientItemToggleEvent that fires when the user selects or deselects an item in the grid. The event provides information about the item, its selected state, and whether Shift was pressed during selection. The main purpose of this new event is to enable developers to implement features like range selection. The below example demonstrates how to implement range selection with behavior similar to Gmail:

@Route("range-selection")
public class RangeSelectionPage extends Div {
    private String startItem;

    public RangeSelectionPage() {
        Grid<String> grid = new Grid<>();
        grid.addColumn(s -> s);
        grid.setItems("Item 1", "Item 2", "Item 3", "Item 4");
        grid.setSelectionMode(Grid.SelectionMode.MULTI);
        ((GridMultiSelectionModel<String>) grid.getSelectionModel())
                .addClientItemToggleListener(event -> {
                    String item = event.getItem();

                    startItem = startItem != null ? startItem : item;
                    if (event.isShiftKey()) {
                        Set<String> range = getItemsRange(grid, startItem,
                                item);
                        if (event.isSelected()) {
                            grid.asMultiSelect().select(range);
                        } else {
                            grid.asMultiSelect().deselect(range);
                        }
                    }
                    startItem = item;
                });
        add(grid);
    }

    private Set<String> getItemsRange(Grid<String> grid, String startItem,
            String endItem) {
        var dataView = grid.getListDataView();
        var startIndex = dataView.getItemIndex(startItem).get();
        var endIndex = dataView.getItemIndex(endItem).get();

        return dataView.getItems().skip(Math.min(startIndex, endIndex))
                .limit(Math.abs(startIndex - endIndex) + 1)
                .collect(Collectors.toSet());
    }
}

Depends on

• feat: add item-toggle event to notify when user toggles an item web-components#8231

Part of vaadin/web-components#8142

Type of change

• Feature

[vursen]

In TestBench, the click() method is overridden to use the JS click() function, which doesn't fully simulate a complete mouse action. We need to use the real simulation to trigger mousedown that will set _shiftKeyDown.

[sonarqubecloud]

Quality Gate passed

Issues
5 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud