@vaadin/radio-group 24.3.0-alpha4 → 24.3.0-alpha6

package/src/vaadin-radio-group-mixin.js

@@ -0,0 +1,424 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
+import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
+import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
+import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
+import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
+import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
+
+/**
+ * A mixin providing common radio-group functionality.
+ *
+ * @polymerMixin
+ * @mixes DisabledMixin
+ * @mixes FieldMixin
+ * @mixes FocusMixin
+ * @mixes KeyboardMixin
+ */
+export const RadioGroupMixin = (superclass) =>
+  class RadioGroupMixinClass extends FieldMixin(FocusMixin(DisabledMixin(KeyboardMixin(superclass)))) {
+    static get properties() {
+      return {
+        /**
+         * The value of the radio group.
+         *
+         * @type {string}
+         */
+        value: {
+          type: String,
+          notify: true,
+          value: '',
+          observer: '__valueChanged',
+        },
+
+        /**
+         * When present, the user cannot modify the value of the radio group.
+         * The property works similarly to the `disabled` property.
+         * While the `disabled` property disables all radio buttons inside the group,
+         * the `readonly` property disables only unchecked ones.
+         *
+         * @type {boolean}
+         */
+        readonly: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+          observer: '__readonlyChanged',
+        },
+
+        /**
+         * @type {string}
+         * @private
+         */
+        _fieldName: {
+          type: String,
+        },
+      };
+    }
+
+    constructor() {
+      super();
+
+      this.__registerRadioButton = this.__registerRadioButton.bind(this);
+      this.__unregisterRadioButton = this.__unregisterRadioButton.bind(this);
+      this.__onRadioButtonCheckedChange = this.__onRadioButtonCheckedChange.bind(this);
+
+      this._tooltipController = new TooltipController(this);
+      this._tooltipController.addEventListener('tooltip-changed', (event) => {
+        const tooltip = event.detail.node;
+        if (tooltip && tooltip.isConnected) {
+          // Tooltip element has been added to the DOM
+          const inputs = this.__radioButtons.map((radio) => radio.inputElement);
+          this._tooltipController.setAriaTarget(inputs);
+        } else {
+          // Tooltip element is no longer connected
+          this._tooltipController.setAriaTarget([]);
+        }
+      });
+    }
+
+    /**
+     * A collection of the group's radio buttons.
+     *
+     * @return {!Array<!RadioButton>}
+     * @private
+     */
+    get __radioButtons() {
+      return this.__filterRadioButtons([...this.children]);
+    }
+
+    /**
+     * A currently selected radio button.
+     *
+     * @return {!RadioButton | undefined}
+     * @private
+     */
+    get __selectedRadioButton() {
+      return this.__radioButtons.find((radioButton) => radioButton.checked);
+    }
+
+    /**
+     * @return {boolean}
+     * @private
+     */
+    get isHorizontalRTL() {
+      return this.__isRTL && this._theme !== 'vertical';
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this.ariaTarget = this;
+
+      // See https://github.com/vaadin/vaadin-web-components/issues/94
+      this.setAttribute('role', 'radiogroup');
+
+      this._fieldName = `${this.localName}-${generateUniqueId()}`;
+
+      const slot = this.shadowRoot.querySelector('slot:not([name])');
+      this._observer = new SlotObserver(slot, ({ addedNodes, removedNodes }) => {
+        // Registers the added radio buttons in the reverse order
+        // in order for the group to take the value of the most recent button.
+        this.__filterRadioButtons(addedNodes).reverse().forEach(this.__registerRadioButton);
+
+        // Unregisters the removed radio buttons.
+        this.__filterRadioButtons(removedNodes).forEach(this.__unregisterRadioButton);
+
+        const inputs = this.__radioButtons.map((radio) => radio.inputElement);
+        this._tooltipController.setAriaTarget(inputs);
+      });
+
+      this.addController(this._tooltipController);
+    }
+
+    /**
+     * @param {!Array<!Node>} nodes
+     * @return {!Array<!RadioButton>}
+     * @private
+     */
+    __filterRadioButtons(nodes) {
+      return nodes.filter((node) => node.nodeType === Node.ELEMENT_NODE && node.localName === 'vaadin-radio-button');
+    }
+
+    /**
+     * Override method inherited from `KeyboardMixin`
+     * to implement the custom keyboard navigation as a replacement for the native one
+     * in order for the navigation to work the same way across different browsers.
+     *
+     * @param {!KeyboardEvent} event
+     * @override
+     * @protected
+     */
+    _onKeyDown(event) {
+      super._onKeyDown(event);
+
+      const radioButton = event
+        .composedPath()
+        .find((node) => node.nodeType === Node.ELEMENT_NODE && node.localName === 'vaadin-radio-button');
+
+      if (['ArrowLeft', 'ArrowUp'].includes(event.key)) {
+        event.preventDefault();
+        this.__selectNextRadioButton(radioButton);
+      }
+
+      if (['ArrowRight', 'ArrowDown'].includes(event.key)) {
+        event.preventDefault();
+        this.__selectPrevRadioButton(radioButton);
+      }
+    }
+
+    /**
+     * Override an observer from `FieldMixin`.
+     *
+     * @param {boolean} invalid
+     * @protected
+     * @override
+     */
+    _invalidChanged(invalid) {
+      super._invalidChanged(invalid);
+
+      if (invalid) {
+        this.setAttribute('aria-invalid', 'true');
+      } else {
+        this.removeAttribute('aria-invalid');
+      }
+    }
+
+    /**
+     * @param {number} index
+     * @private
+     */
+    __selectNextRadioButton(radioButton) {
+      const index = this.__radioButtons.indexOf(radioButton);
+
+      this.__selectIncRadioButton(index, this.isHorizontalRTL ? 1 : -1);
+    }
+
+    /**
+     * @param {number} index
+     * @private
+     */
+    __selectPrevRadioButton(radioButton) {
+      const index = this.__radioButtons.indexOf(radioButton);
+
+      this.__selectIncRadioButton(index, this.isHorizontalRTL ? -1 : 1);
+    }
+
+    /**
+     * @param {number} index
+     * @param {number} step
+     * @private
+     */
+    __selectIncRadioButton(index, step) {
+      const newIndex = (this.__radioButtons.length + index + step) % this.__radioButtons.length;
+      const newRadioButton = this.__radioButtons[newIndex];
+
+      if (newRadioButton.disabled) {
+        this.__selectIncRadioButton(newIndex, step);
+      } else {
+        newRadioButton.focusElement.focus();
+        newRadioButton.focusElement.click();
+      }
+    }
+
+    /**
+     * Registers the radio button after adding it to the group.
+     *
+     * @param {!RadioButton} radioButton
+     * @private
+     */
+    __registerRadioButton(radioButton) {
+      radioButton.name = this._fieldName;
+      radioButton.addEventListener('checked-changed', this.__onRadioButtonCheckedChange);
+
+      if (this.disabled || this.readonly) {
+        radioButton.disabled = true;
+      }
+
+      if (radioButton.checked) {
+        this.__selectRadioButton(radioButton);
+      }
+    }
+
+    /**
+     * Unregisters the radio button before removing it from the group.
+     *
+     * @param {!RadioButton} radioButton
+     * @private
+     */
+    __unregisterRadioButton(radioButton) {
+      radioButton.removeEventListener('checked-changed', this.__onRadioButtonCheckedChange);
+
+      if (radioButton.value === this.value) {
+        this.__selectRadioButton(null);
+      }
+    }
+
+    /**
+     * @param {!CustomEvent} event
+     * @private
+     */
+    __onRadioButtonCheckedChange(event) {
+      if (event.target.checked) {
+        this.__selectRadioButton(event.target);
+      }
+    }
+
+    /**
+     * Whenever the user sets a non-empty value,
+     * the method tries to select the radio button with that value
+     * showing a warning if no radio button was found with the given value.
+     * If the new value is empty, the method deselects the currently selected radio button.
+     * At last, the method toggles the `has-value` attribute considering the new value.
+     *
+     * @param {string | null | undefined} newValue
+     * @param {string | null | undefined} oldValue
+     * @private
+     */
+    __valueChanged(newValue, oldValue) {
+      if (oldValue === undefined && newValue === '') {
+        return;
+      }
+
+      if (newValue) {
+        const newSelectedRadioButton = this.__radioButtons.find((radioButton) => {
+          return radioButton.value === newValue;
+        });
+
+        if (newSelectedRadioButton) {
+          this.__selectRadioButton(newSelectedRadioButton);
+          this.toggleAttribute('has-value', true);
+        } else {
+          console.warn(`The radio button with the value "${newValue}" was not found.`);
+        }
+      } else {
+        this.__selectRadioButton(null);
+        this.removeAttribute('has-value');
+      }
+
+      if (oldValue !== undefined) {
+        this.validate();
+      }
+    }
+
+    /**
+     * Whenever `readonly` property changes on the group element,
+     * the method updates the `disabled` property for the radio buttons.
+     *
+     * @param {boolean} newValue
+     * @param {boolean} oldValue
+     * @private
+     */
+    __readonlyChanged(newValue, oldValue) {
+      // Prevent updating the `disabled` property for the radio buttons at initialization.
+      // Otherwise, the group's radio buttons may end up enabled regardless
+      // an intentionally added `disabled` attribute on some of them.
+      if (!newValue && oldValue === undefined) {
+        return;
+      }
+
+      if (oldValue !== newValue) {
+        this.__updateRadioButtonsDisabledProperty();
+      }
+    }
+
+    /**
+     * Override method inherited from `DisabledMixin`
+     * to update the `disabled` property for the radio buttons
+     * whenever the property changes on the group element.
+     *
+     * @param {boolean} newValue
+     * @param {boolean} oldValue
+     * @override
+     * @protected
+     */
+    _disabledChanged(newValue, oldValue) {
+      super._disabledChanged(newValue, oldValue);
+
+      // Prevent updating the `disabled` property for the radio buttons at initialization.
+      // Otherwise, the group's radio buttons may end up enabled regardless
+      // an intentionally added `disabled` attribute on some of them.
+      if (!newValue && oldValue === undefined) {
+        return;
+      }
+
+      if (oldValue !== newValue) {
+        this.__updateRadioButtonsDisabledProperty();
+      }
+    }
+
+    /**
+     * Override method inherited from `FocusMixin`
+     * to prevent removing the `focused` attribute
+     * when focus moves between radio buttons inside the group.
+     *
+     * @param {!FocusEvent} event
+     * @return {boolean}
+     * @protected
+     */
+    _shouldRemoveFocus(event) {
+      return !this.contains(event.relatedTarget);
+    }
+
+    /**
+     * Override method inherited from `FocusMixin`
+     * to run validation when the group loses focus.
+     *
+     * @param {boolean} focused
+     * @override
+     * @protected
+     */
+    _setFocused(focused) {
+      super._setFocused(focused);
+
+      // Do not validate when focusout is caused by document
+      // losing focus, which happens on browser tab switch.
+      if (!focused && document.hasFocus()) {
+        this.validate();
+      }
+    }
+
+    /**
+     * @param {RadioButton} radioButton
+     * @private
+     */
+    __selectRadioButton(radioButton) {
+      if (radioButton) {
+        this.value = radioButton.value;
+      } else {
+        this.value = '';
+      }
+
+      this.__radioButtons.forEach((button) => {
+        button.checked = button === radioButton;
+      });
+
+      if (this.readonly) {
+        this.__updateRadioButtonsDisabledProperty();
+      }
+    }
+
+    /**
+     * If the group is read-only, the method disables the unchecked radio buttons.
+     * Otherwise, the method propagates the group's `disabled` property to the radio buttons.
+     *
+     * @private
+     */
+    __updateRadioButtonsDisabledProperty() {
+      this.__radioButtons.forEach((button) => {
+        if (this.readonly) {
+          // The native radio button doesn't support the `readonly` attribute
+          // so the state can be only imitated, by disabling unchecked radio buttons.
+          button.disabled = button !== this.__selectedRadioButton;
+        } else {
+          button.disabled = this.disabled;
+        }
+      });
+    }
+  };

package/src/vaadin-radio-group-styles.d.ts

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

package/src/vaadin-radio-group-styles.js

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+export const radioGroupStyles = css`
+  :host {
+    display: inline-flex;
+  }
+
+  :host::before {
+    content: '\\2003';
+    width: 0;
+    display: inline-block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  .vaadin-group-field-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  [part='group-field'] {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  :host(:not([has-label])) [part='label'] {
+    display: none;
+  }
+`;

package/src/vaadin-radio-group.d.ts

@@ -3,37 +3,11 @@
  * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
-import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
-import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { type RadioGroupEventMap, RadioGroupMixin } from './vaadin-radio-group-mixin.js';
 
-/**
- * Fired when the `invalid` property changes.
- */
-export type RadioGroupInvalidChangedEvent = CustomEvent<{ value: boolean }>;
-
-/**
- * Fired when the `value` property changes.
- */
-export type RadioGroupValueChangedEvent = CustomEvent<{ value: string }>;
-
-/**
- * Fired whenever the field is validated.
- */
-export type RadioGroupValidatedEvent = CustomEvent<{ valid: boolean }>;
-
-export interface RadioGroupCustomEventMap {
-  'invalid-changed': RadioGroupInvalidChangedEvent;
-
-  'value-changed': RadioGroupValueChangedEvent;
-
-  validated: RadioGroupValidatedEvent;
-}
-
-export interface RadioGroupEventMap extends HTMLElementEventMap, RadioGroupCustomEventMap {}
+export * from './vaadin-radio-group-mixin.js';
 
 /**
  * `<vaadin-radio-group>` is a web component that allows the user to choose one item from a group of choices.
@@ -77,22 +51,7 @@ export interface RadioGroupEventMap extends HTMLElementEventMap, RadioGroupCusto
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
-declare class RadioGroup extends FieldMixin(
-  FocusMixin(DisabledMixin(KeyboardMixin(ElementMixin(ThemableMixin(HTMLElement))))),
-) {
-  /**
-   * The value of the radio group.
-   */
-  value: string | null | undefined;
-
-  /**
-   * When present, the user cannot modify the value of the radio group.
-   * The property works similarly to the `disabled` property.
-   * While the `disabled` property disables all the radio buttons inside the group,
-   * the `readonly` property disables only unchecked ones.
-   */
-  readonly: boolean;
-
+declare class RadioGroup extends RadioGroupMixin(ElementMixin(ThemableMixin(HTMLElement))) {
   addEventListener<K extends keyof RadioGroupEventMap>(
     type: K,
     listener: (this: RadioGroup, ev: RadioGroupEventMap[K]) => void,