@vaadin/component-base 24.0.5 → 24.1.0-alpha10

package/src/delegate-focus-mixin.js

@@ -1,228 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
-import { FocusMixin } from './focus-mixin.js';
-import { TabindexMixin } from './tabindex-mixin.js';
-
-/**
- * A mixin to forward focus to an element in the light DOM.
- *
- * @polymerMixin
- * @mixes FocusMixin
- * @mixes TabindexMixin
- */
-export const DelegateFocusMixin = dedupingMixin(
-  (superclass) =>
-    class DelegateFocusMixinClass extends FocusMixin(TabindexMixin(superclass)) {
-      static get properties() {
-        return {
-          /**
-           * Specify that this control should have input focus when the page loads.
-           */
-          autofocus: {
-            type: Boolean,
-          },
-
-          /**
-           * A reference to the focusable element controlled by the mixin.
-           * It can be an input, textarea, button or any element with tabindex > -1.
-           *
-           * Any component implementing this mixin is expected to provide it
-           * by using `this._setFocusElement(input)` Polymer API.
-           *
-           * Toggling `tabindex` attribute on the host element propagates its value to `focusElement`.
-           *
-           * @protected
-           * @type {!HTMLElement}
-           */
-          focusElement: {
-            type: Object,
-            readOnly: true,
-            observer: '_focusElementChanged',
-          },
-
-          /**
-           * Override the property from `TabIndexMixin`
-           * to ensure the `tabindex` attribute of the focus element
-           * will be restored to `0` after re-enabling the element.
-           *
-           * @protected
-           * @override
-           */
-          _lastTabIndex: {
-            value: 0,
-          },
-        };
-      }
-
-      constructor() {
-        super();
-
-        this._boundOnBlur = this._onBlur.bind(this);
-        this._boundOnFocus = this._onFocus.bind(this);
-      }
-
-      /** @protected */
-      ready() {
-        super.ready();
-
-        if (this.autofocus && !this.disabled) {
-          requestAnimationFrame(() => {
-            this.focus();
-            this.setAttribute('focus-ring', '');
-          });
-        }
-      }
-
-      /**
-       * @protected
-       * @override
-       */
-      focus() {
-        if (!this.focusElement || this.disabled) {
-          return;
-        }
-
-        this.focusElement.focus();
-        this._setFocused(true);
-      }
-
-      /**
-       * @protected
-       * @override
-       */
-      blur() {
-        if (!this.focusElement) {
-          return;
-        }
-        this.focusElement.blur();
-        this._setFocused(false);
-      }
-
-      /**
-       * @protected
-       * @override
-       */
-      click() {
-        if (this.focusElement && !this.disabled) {
-          this.focusElement.click();
-        }
-      }
-
-      /** @protected */
-      _focusElementChanged(element, oldElement) {
-        if (element) {
-          element.disabled = this.disabled;
-          this._addFocusListeners(element);
-          this.__forwardTabIndex(this.tabindex);
-        } else if (oldElement) {
-          this._removeFocusListeners(oldElement);
-        }
-      }
-
-      /**
-       * @param {HTMLElement} element
-       * @protected
-       */
-      _addFocusListeners(element) {
-        element.addEventListener('blur', this._boundOnBlur);
-        element.addEventListener('focus', this._boundOnFocus);
-      }
-
-      /**
-       * @param {HTMLElement} element
-       * @protected
-       */
-      _removeFocusListeners(element) {
-        element.removeEventListener('blur', this._boundOnBlur);
-        element.removeEventListener('focus', this._boundOnFocus);
-      }
-
-      /**
-       * Focus event does not bubble, so we dispatch it manually
-       * on the host element to support adding focus listeners
-       * when the focusable element is placed in light DOM.
-       * @param {FocusEvent} event
-       * @protected
-       */
-      _onFocus(event) {
-        event.stopPropagation();
-        this.dispatchEvent(new Event('focus'));
-      }
-
-      /**
-       * Blur event does not bubble, so we dispatch it manually
-       * on the host element to support adding blur listeners
-       * when the focusable element is placed in light DOM.
-       * @param {FocusEvent} event
-       * @protected
-       */
-      _onBlur(event) {
-        event.stopPropagation();
-        this.dispatchEvent(new Event('blur'));
-      }
-
-      /**
-       * @param {Event} event
-       * @return {boolean}
-       * @protected
-       * @override
-       */
-      _shouldSetFocus(event) {
-        return event.target === this.focusElement;
-      }
-
-      /**
-       * @param {boolean} disabled
-       * @param {boolean} oldDisabled
-       * @protected
-       * @override
-       */
-      _disabledChanged(disabled, oldDisabled) {
-        super._disabledChanged(disabled, oldDisabled);
-
-        if (this.focusElement) {
-          this.focusElement.disabled = disabled;
-        }
-
-        if (disabled) {
-          this.blur();
-        }
-      }
-
-      /**
-       * Override an observer from `TabindexMixin`.
-       * Do not call super to remove tabindex attribute
-       * from the host after it has been forwarded.
-       * @param {string} tabindex
-       * @protected
-       * @override
-       */
-      _tabindexChanged(tabindex) {
-        this.__forwardTabIndex(tabindex);
-      }
-
-      /** @private */
-      __forwardTabIndex(tabindex) {
-        if (tabindex !== undefined && this.focusElement) {
-          this.focusElement.tabIndex = tabindex;
-
-          // Preserve tabindex="-1" on the host element
-          if (tabindex !== -1) {
-            this.tabindex = undefined;
-          }
-        }
-
-        if (this.disabled && tabindex) {
-          // If tabindex attribute was changed while component was disabled
-          if (tabindex !== -1) {
-            this._lastTabIndex = tabindex;
-          }
-          this.tabindex = undefined;
-        }
-      }
-    },
-);

package/src/disabled-mixin.d.ts

@@ -1,20 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { Constructor } from '@open-wc/dedupe-mixin';
-
-/**
- * A mixin to provide disabled property for field components.
- */
-export declare function DisabledMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<DisabledMixinClass> & T;
-
-export declare class DisabledMixinClass {
-  /**
-   * If true, the user cannot interact with this element.
-   */
-  disabled: boolean;
-
-  protected _disabledChanged(disabled: boolean, oldDisabled: boolean): void;
-}

package/src/disabled-mixin.js

@@ -1,62 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
-
-/**
- * A mixin to provide disabled property for field components.
- *
- * @polymerMixin
- */
-export const DisabledMixin = dedupingMixin(
-  (superclass) =>
-    class DisabledMixinClass extends superclass {
-      static get properties() {
-        return {
-          /**
-           * If true, the user cannot interact with this element.
-           */
-          disabled: {
-            type: Boolean,
-            value: false,
-            observer: '_disabledChanged',
-            reflectToAttribute: true,
-          },
-        };
-      }
-
-      /**
-       * @param {boolean} disabled
-       * @protected
-       */
-      _disabledChanged(disabled) {
-        this._setAriaDisabled(disabled);
-      }
-
-      /**
-       * @param {boolean} disabled
-       * @protected
-       */
-      _setAriaDisabled(disabled) {
-        if (disabled) {
-          this.setAttribute('aria-disabled', 'true');
-        } else {
-          this.removeAttribute('aria-disabled');
-        }
-      }
-
-      /**
-       * Overrides the default element `click` method in order to prevent
-       * firing the `click` event when the element is disabled.
-       * @protected
-       * @override
-       */
-      click() {
-        if (!this.disabled) {
-          super.click();
-        }
-      }
-    },
-);

package/src/focus-mixin.d.ts

@@ -1,30 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { Constructor } from '@open-wc/dedupe-mixin';
-
-/**
- * A mixin to handle `focused` and `focus-ring` attributes based on focus.
- */
-export declare function FocusMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<FocusMixinClass> & T;
-
-export declare class FocusMixinClass {
-  protected readonly _keyboardActive: boolean;
-
-  /**
-   * Override to change how focused and focus-ring attributes are set.
-   */
-  protected _setFocused(focused: boolean): void;
-
-  /**
-   * Override to define if the field receives focus based on the event.
-   */
-  protected _shouldSetFocus(event: FocusEvent): boolean;
-
-  /**
-   * Override to define if the field loses focus based on the event.
-   */
-  protected _shouldRemoveFocus(event: FocusEvent): boolean;
-}

package/src/focus-mixin.js

@@ -1,93 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
-import { isKeyboardActive } from './focus-utils.js';
-
-/**
- * A mixin to handle `focused` and `focus-ring` attributes based on focus.
- *
- * @polymerMixin
- */
-export const FocusMixin = dedupingMixin(
-  (superclass) =>
-    class FocusMixinClass extends superclass {
-      /**
-       * @protected
-       * @return {boolean}
-       */
-      get _keyboardActive() {
-        return isKeyboardActive();
-      }
-
-      /** @protected */
-      ready() {
-        this.addEventListener('focusin', (e) => {
-          if (this._shouldSetFocus(e)) {
-            this._setFocused(true);
-          }
-        });
-
-        this.addEventListener('focusout', (e) => {
-          if (this._shouldRemoveFocus(e)) {
-            this._setFocused(false);
-          }
-        });
-
-        // In super.ready() other 'focusin' and 'focusout' listeners might be
-        // added, so we call it after our own ones to ensure they execute first.
-        // Issue to watch out: when incorrect, <vaadin-combo-box> refocuses the
-        // input field on iOS after "Done" is pressed.
-        super.ready();
-      }
-
-      /** @protected */
-      disconnectedCallback() {
-        super.disconnectedCallback();
-
-        // In non-Chrome browsers, blur does not fire on the element when it is disconnected.
-        // reproducible in `<vaadin-date-picker>` when closing on `Cancel` or `Today` click.
-        if (this.hasAttribute('focused')) {
-          this._setFocused(false);
-        }
-      }
-
-      /**
-       * Override to change how focused and focus-ring attributes are set.
-       *
-       * @param {boolean} focused
-       * @protected
-       */
-      _setFocused(focused) {
-        this.toggleAttribute('focused', focused);
-
-        // Focus-ring is true when the element was focused from the keyboard.
-        // Focus Ring [A11ycasts]: https://youtu.be/ilj2P5-5CjI
-        this.toggleAttribute('focus-ring', focused && this._keyboardActive);
-      }
-
-      /**
-       * Override to define if the field receives focus based on the event.
-       *
-       * @param {FocusEvent} _event
-       * @return {boolean}
-       * @protected
-       */
-      _shouldSetFocus(_event) {
-        return true;
-      }
-
-      /**
-       * Override to define if the field loses focus based on the event.
-       *
-       * @param {FocusEvent} _event
-       * @return {boolean}
-       * @protected
-       */
-      _shouldRemoveFocus(_event) {
-        return true;
-      }
-    },
-);

package/src/focus-trap-controller.d.ts

@@ -1,39 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { ReactiveController } from 'lit';
-
-/**
- * A controller for trapping focus within a DOM node.
- */
-export class FocusTrapController implements ReactiveController {
-  /**
-   * The controller host element.
-   */
-  host: HTMLElement;
-
-  constructor(node: HTMLElement);
-
-  hostConnected(): void;
-
-  hostDisconnected(): void;
-
-  /**
-   * Activates a focus trap for a DOM node that will prevent focus from escaping the node.
-   * The trap can be deactivated with the `.releaseFocus()` method.
-   *
-   * If focus is initially outside the trap, the method will move focus inside,
-   * on the first focusable element of the trap in the tab order.
-   * The first focusable element can be the trap node itself if it is focusable
-   * and comes first in the tab order.
-   */
-  trapFocus(trapNode: HTMLElement): void;
-
-  /**
-   * Deactivates the focus trap set with the `.trapFocus()` method
-   * so that it becomes possible to tab outside the trap node.
-   */
-  releaseFocus(): void;
-}

package/src/focus-trap-controller.js

@@ -1,155 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { getFocusableElements, isElementFocused } from './focus-utils.js';
-
-const instances = [];
-
-/**
- * A controller for trapping focus within a DOM node.
- */
-export class FocusTrapController {
-  /**
-   * @param {HTMLElement} host
-   */
-  constructor(host) {
-    /**
-     * The controller host element.
-     *
-     * @type {HTMLElement}
-     */
-    this.host = host;
-
-    /**
-     * A node for trapping focus in.
-     *
-     * @type {HTMLElement | null}
-     * @private
-     */
-    this.__trapNode = null;
-
-    this.__onKeyDown = this.__onKeyDown.bind(this);
-  }
-
-  /**
-   * An array of tab-ordered focusable elements inside the trap node.
-   *
-   * @return {HTMLElement[]}
-   * @private
-   */
-  get __focusableElements() {
-    return getFocusableElements(this.__trapNode);
-  }
-
-  /**
-   * The index of the element inside the trap node that currently has focus.
-   *
-   * @return {HTMLElement | undefined}
-   * @private
-   */
-  get __focusedElementIndex() {
-    const focusableElements = this.__focusableElements;
-    return focusableElements.indexOf(focusableElements.filter(isElementFocused).pop());
-  }
-
-  hostConnected() {
-    document.addEventListener('keydown', this.__onKeyDown);
-  }
-
-  hostDisconnected() {
-    document.removeEventListener('keydown', this.__onKeyDown);
-  }
-
-  /**
-   * Activates a focus trap for a DOM node that will prevent focus from escaping the node.
-   * The trap can be deactivated with the `.releaseFocus()` method.
-   *
-   * If focus is initially outside the trap, the method will move focus inside,
-   * on the first focusable element of the trap in the tab order.
-   * The first focusable element can be the trap node itself if it is focusable
-   * and comes first in the tab order.
-   *
-   * If there are no focusable elements, the method will throw an exception
-   * and the trap will not be set.
-   *
-   * @param {HTMLElement} trapNode
-   */
-  trapFocus(trapNode) {
-    this.__trapNode = trapNode;
-
-    if (this.__focusableElements.length === 0) {
-      this.__trapNode = null;
-      throw new Error('The trap node should have at least one focusable descendant or be focusable itself.');
-    }
-
-    instances.push(this);
-
-    if (this.__focusedElementIndex === -1) {
-      this.__focusableElements[0].focus();
-    }
-  }
-
-  /**
-   * Deactivates the focus trap set with the `.trapFocus()` method
-   * so that it becomes possible to tab outside the trap node.
-   */
-  releaseFocus() {
-    this.__trapNode = null;
-
-    instances.pop();
-  }
-
-  /**
-   * A `keydown` event handler that manages tabbing navigation when the trap is enabled.
-   *
-   * - Moves focus to the next focusable element of the trap on `Tab` press.
-   * When no next element to focus, the method moves focus to the first focusable element.
-   * - Moves focus to the prev focusable element of the trap on `Shift+Tab` press.
-   * When no prev element to focus, the method moves focus to the last focusable element.
-   *
-   * @param {KeyboardEvent} event
-   * @private
-   */
-  __onKeyDown(event) {
-    if (!this.__trapNode) {
-      return;
-    }
-
-    // Only handle events for the last instance
-    if (this !== Array.from(instances).pop()) {
-      return;
-    }
-
-    if (event.key === 'Tab') {
-      event.preventDefault();
-
-      const backward = event.shiftKey;
-      this.__focusNextElement(backward);
-    }
-  }
-
-  /**
-   * - Moves focus to the next focusable element if `backward === false`.
-   * When no next element to focus, the method moves focus to the first focusable element.
-   * - Moves focus to the prev focusable element if `backward === true`.
-   * When no prev element to focus the method moves focus to the last focusable element.
-   *
-   * If no focusable elements, the method returns immediately.
-   *
-   * @param {boolean} backward
-   * @private
-   */
-  __focusNextElement(backward = false) {
-    const focusableElements = this.__focusableElements;
-    const step = backward ? -1 : 1;
-    const currentIndex = this.__focusedElementIndex;
-    const nextIndex = (focusableElements.length + currentIndex + step) % focusableElements.length;
-    const element = focusableElements[nextIndex];
-    element.focus();
-    if (element.localName === 'input') {
-      element.select();
-    }
-  }
-}

package/src/focus-utils.d.ts

@@ -1,51 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * Returns true if the window has received a keydown
- * event since the last mousedown event.
- */
-export declare function isKeyboardActive(): boolean;
-
-/**
- * Returns true if the element is hidden, false otherwise.
- *
- * An element is treated as hidden when any of the following conditions are met:
- * - the element itself or one of its ancestors has `display: none`.
- * - the element has or inherits `visibility: hidden`.
- */
-export declare function isElementHidden(element: HTMLElement): boolean;
-
-/**
- * Returns true if the element is focusable, otherwise false.
- *
- * The list of focusable elements is taken from http://stackoverflow.com/a/1600194/4228703.
- * However, there isn't a definite list, it's up to the browser.
- * The only standard we have is DOM Level 2 HTML https://www.w3.org/TR/DOM-Level-2-HTML/html.html,
- * according to which the only elements that have a `focus()` method are:
- * - HTMLInputElement
- * - HTMLSelectElement
- * - HTMLTextAreaElement
- * - HTMLAnchorElement
- *
- * This notably omits HTMLButtonElement and HTMLAreaElement.
- * Referring to these tests with tabbables in different browsers
- * http://allyjs.io/data-tables/focusable.html
- */
-export declare function isElementFocusable(element: HTMLElement): boolean;
-
-/**
- * Returns true if the element is focused, false otherwise.
- */
-export declare function isElementFocused(element: HTMLElement): boolean;
-
-/**
- * Returns a tab-ordered array of focusable elements for a root element.
- * The resulting array will include the root element if it is focusable.
- *
- * The method traverses nodes in shadow DOM trees too if any.
- */
-export declare function getFocusableElements(element: HTMLElement): HTMLElement[];