Show radio button selection column

src/main/java/com/flowingcode/vaadin/addons/gridhelpers/GridHelper.java

@@ -555,4 +555,12 @@ public static <T> CheckboxColumn<T> addCheckboxColumn(Grid<T> grid,
   public static <T> void toggleSelectAllCheckbox(Grid<T> grid, boolean visible) {
     getHelper(grid).lazySelectAllGridHelper.toggleSelectAllCheckbox(visible);
   }
+
+  private final GridRadioSelectionColumnHelper<T> radioButtonSelectionColumnHelper =
+      new GridRadioSelectionColumnHelper<>(this);
+
+  public static <T> GridRadioSelectionColumn showRadioSelectionColumn(Grid<T> grid) {
+    return getHelper(grid).radioButtonSelectionColumnHelper.showRadioSelectionColumn();
+  }
+
 }

src/main/java/com/flowingcode/vaadin/addons/gridhelpers/GridRadioSelectionColumn.java

@@ -0,0 +1,58 @@
+/*-
+ * #%L
+ * Grid Helpers Add-on
+ * %%
+ * Copyright (C) 2022 - 2024 Flowing Code
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+
+package com.flowingcode.vaadin.addons.gridhelpers;
+
+import com.vaadin.flow.component.Component;
+import com.vaadin.flow.component.HasStyle;
+import com.vaadin.flow.component.Synchronize;
+import com.vaadin.flow.component.Tag;
+import com.vaadin.flow.component.dependency.JsModule;
+import com.vaadin.flow.component.dependency.NpmPackage;
+
+/**
+ * Server side implementation for the flow specific grid radio selection column.
+ */
+@Tag("grid-flow-radio-selection-column")
+@NpmPackage(value = "@vaadin/polymer-legacy-adapter", version = "24.3.2")
+@JsModule("@vaadin/polymer-legacy-adapter/style-modules.js")
+@JsModule("./fcGridHelper/grid-flow-radio-selection-column.js")
+public class GridRadioSelectionColumn extends Component implements HasStyle {
+
+  /**
+   * Sets this column's frozen state.
+   *
+   * @param frozen whether to freeze or unfreeze this column
+   */
+  public void setFrozen(boolean frozen) {
+    getElement().setProperty("frozen", frozen);
+  }
+
+  /**
+   * Gets the this column's frozen state.
+   *
+   * @return whether this column is frozen
+   */
+  @Synchronize("frozen-changed")
+  public boolean isFrozen() {
+    return getElement().getProperty("frozen", false);
+  }
+
+}

src/main/java/com/flowingcode/vaadin/addons/gridhelpers/GridRadioSelectionColumnHelper.java

@@ -0,0 +1,62 @@
+/*-
+ * #%L
+ * Grid Helpers Add-on
+ * %%
+ * Copyright (C) 2022 - 2024 Flowing Code
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+
+package com.flowingcode.vaadin.addons.gridhelpers;
+
+import com.vaadin.flow.component.grid.Grid;
+import com.vaadin.flow.component.grid.Grid.SelectionMode;
+import java.io.Serializable;
+import lombok.RequiredArgsConstructor;
+
+@SuppressWarnings("serial")
+@RequiredArgsConstructor
+class GridRadioSelectionColumnHelper<T> implements Serializable {
+
+  private final GridHelper<T> helper;
+
+  private GridRadioSelectionColumn selectionColumn;
+
+  public GridRadioSelectionColumn showRadioSelectionColumn() {
+    remove();
+
+    Grid<T> grid = helper.getGrid();
+    grid.setSelectionMode(SelectionMode.SINGLE);
+
+    selectionColumn = new GridRadioSelectionColumn();
+    selectionColumn.setClassName("fc-grid-radio-selection-column");
+
+    if (grid.getElement().getNode().isAttached()) {
+      grid.getElement().insertChild(0, selectionColumn.getElement());
+    } else {
+      grid.getElement().getNode().runWhenAttached(ui -> {
+        grid.getElement().insertChild(0, selectionColumn.getElement());
+      });
+    }
+
+    return selectionColumn;
+  }
+
+  private void remove() {
+    if (selectionColumn != null && selectionColumn.getElement().getNode().isAttached()) {
+      helper.getGrid().getElement().removeChild(selectionColumn.getElement());
+    }
+  }
+
+}

src/main/resources/META-INF/frontend/fcGridHelper/grid-flow-radio-selection-column.js

@@ -0,0 +1,132 @@
+/*-
+ * #%L
+ * Grid Helpers Add-on
+ * %%
+ * Copyright (C) 2022 - 2024 Flowing Code
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+
+import '@vaadin/grid/vaadin-grid-column.js';
+import { GridColumn } from '@vaadin/grid/src/vaadin-grid-column.js';
+import { GridRadioSelectionColumnBaseMixin } from './grid-radio-selection-column-base-mixin.js';
+
+class GridFlowRadioSelectionColumn extends GridRadioSelectionColumnBaseMixin(GridColumn) {
+
+  static get is() {
+    return 'grid-flow-radio-selection-column';
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Override property to enable auto-width
+       */
+      autoWidth: {
+        type: Boolean,
+        value: true
+      },
+
+      /**
+       * Override property to set custom width
+       */
+      width: {
+        type: String,
+        value: '56px'
+      },
+
+      /**
+       * The previous state of activeItem. When activeItem turns to `null`,
+       * previousActiveItem will have an Object with just unselected activeItem
+       * @private
+       */
+      __previousActiveItem: Object,
+    };
+  }
+
+
+  constructor() {
+    super();
+    this.__boundOnActiveItemChanged = this.__onActiveItemChanged.bind(this);
+  }
+
+  /** @protected */
+  disconnectedCallback() {
+    this._grid.removeEventListener('active-item-changed', this.__boundOnActiveItemChanged);
+    super.disconnectedCallback();
+  }
+
+  /** @protected */
+  connectedCallback() {
+    super.connectedCallback();
+    if (this._grid) {
+      this._grid.addEventListener('active-item-changed', this.__boundOnActiveItemChanged);
+//    this._grid.__deselectDisallowed = true;
+    }
+  }
+
+  /**
+   * Override a method from `GridRadioSelectionColumnBaseMixin` to handle the user
+   * selecting an item.
+   *
+   * @param {Object} item the item to select
+   * @protected
+   * @override
+   */
+  _selectItem(item) {
+    this._grid.$connector.doSelection([item], true);
+  }
+
+  /**
+   * Override a method from `GridRadioSelectionColumnBaseMixin` to handle the user
+   * deselecting an item.
+   *
+   * @param {Object} item the item to deselect
+   * @protected
+   * @override
+   */
+  _deselectItem(item) {
+    this._grid.$connector.doDeselection([item], true);
+  }
+
+
+  /** @private */
+  __onActiveItemChanged(e) {
+    const activeItem = e.detail.value;
+    if (activeItem) {
+      if(this.__previousActiveItem !== activeItem) {
+	    this._deselectItem(this.__previousActiveItem);
+	  }      
+      this._selectItem(activeItem);
+      this.__previousActiveItem = activeItem;
+    } else {
+	  this.__previousActiveItem = undefined;
+    }
+  }
+
+  /**
+   * Override a method from `GridRadioSelectionColumnBaseMixin` to handle the user clicked on an item.
+   *
+   * @param {Object} item the clicked item
+   * @protected
+   * @override
+   */
+  _onItemClicked(item) {
+    super._onItemClicked(item);
+    this.__previousActiveItem = item;
+  }
+
+}
+
+customElements.define(GridFlowRadioSelectionColumn.is, GridFlowRadioSelectionColumn);

src/main/resources/META-INF/frontend/fcGridHelper/grid-radio-selection-column-base-mixin.js

@@ -0,0 +1,116 @@
+/*-
+ * #%L
+ * Grid Helpers Add-on
+ * %%
+ * Copyright (C) 2022 - 2024 Flowing Code
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+
+import { addListener } from '@vaadin/component-base/src/gestures.js';
+
+/**
+ * A mixin that provides basic functionality for the
+ * `<grid-radio-selection-column>`. This includes properties, cell rendering,
+ * and overridable methods for handling changes to the selection state.
+ *
+ * **NOTE**: This mixin is re-used by the Flow component, and as such must not
+ * implement any selection state updates for the column element or the grid.
+ * Web component-specific selection state updates must be implemented in the
+ * `<grid-radio-selection-column>` itself, by overriding the protected methods
+ * provided by this mixin.
+ *
+ * @polymerMixin
+ */
+export const GridRadioSelectionColumnBaseMixin = (superClass) =>
+  class GriRadioSelectionColumnBaseMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * Width of the cells for this column.
+         */
+        width: {
+          type: String,
+          value: '58px',
+        },
+
+        /**
+         * Flex grow ratio for the cell widths. When set to 0, cell width is fixed.
+         * @attr {number} flex-grow
+         * @type {number}
+         */
+        flexGrow: {
+          type: Number,
+          value: 0,
+        },
+
+        /**
+         * When true, the active gets automatically selected.
+         * @attr {boolean} auto-select
+         * @type {boolean}
+         */
+        autoSelect: {
+          type: Boolean,
+          value: false,
+        },
+
+      };
+    }
+
+    static get observers() {
+      return [
+        '_onHeaderRendererOrBindingChanged(path)',
+      ];
+    }
+
+    /**
+     * Renders the Select Row radio button to the body cell.
+     *
+     * @override
+     */
+    _defaultRenderer(root, _column, { item, selected }) {
+      let radioButton = root.firstElementChild;
+      if (!radioButton) {
+        radioButton = document.createElement('vaadin-radio-button');
+        radioButton.setAttribute('aria-label', 'Select Row');
+        root.appendChild(radioButton);
+        // Add listener after appending, so we can skip the initial change event
+        radioButton.addEventListener('checked-changed', this.__onSelectRowCheckedChanged.bind(this));
+      }
+
+      radioButton.__item = item;
+      radioButton.__rendererChecked = selected;
+      radioButton.checked = selected;
+    }
+
+    /**
+     * Selects the row when the Select Row radio button is clicked.
+     * The listener handles only user-fired events.
+     *
+     * @private
+     */
+    __onSelectRowCheckedChanged(e) {
+      // Skip if the state is changed by the renderer.
+      if (e.target.checked === e.target.__rendererChecked) {
+        return;
+      }
+
+      this._onItemClicked(e.target.__item);
+    }
+
+    _onItemClicked(item){
+        this._selectItem(item);
+    }
+
+  };