@vaadin/component-base 24.0.0-rc2 → 24.1.0-alpha1

package/index.d.ts

@@ -1,11 +1,6 @@
-export { ActiveMixin } from './src/active-mixin.js';
 export { ControllerMixin } from './src/controller-mixin.js';
+export { DelegateStateMixin } from './src/delegate-state-mixin.js';
 export { DirMixin } from './src/dir-mixin.js';
-export { DisabledMixin } from './src/disabled-mixin.js';
 export { ElementMixin } from './src/element-mixin.js';
-export { FocusMixin } from './src/focus-mixin.js';
-export { FocusTrapController } from './src/focus-trap-controller.js';
-export { KeyboardMixin } from './src/keyboard-mixin.js';
 export { ResizeMixin } from './src/resize-mixin.js';
 export { SlotController } from './src/slot-controller.js';
-export { TabindexMixin } from './src/tabindex-mixin.js';

package/index.js

@@ -1,10 +1,6 @@
-export { ActiveMixin } from './src/active-mixin.js';
 export { ControllerMixin } from './src/controller-mixin.js';
+export { DelegateStateMixin } from './src/delegate-state-mixin.js';
 export { DirMixin } from './src/dir-mixin.js';
-export { DisabledMixin } from './src/disabled-mixin.js';
 export { ElementMixin } from './src/element-mixin.js';
-export { FocusMixin } from './src/focus-mixin.js';
-export { FocusTrapController } from './src/focus-trap-controller.js';
-export { KeyboardMixin } from './src/keyboard-mixin.js';
+export { ResizeMixin } from './src/resize-mixin.js';
 export { SlotController } from './src/slot-controller.js';
-export { TabindexMixin } from './src/tabindex-mixin.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.0.0-rc2",
+  "version": "24.1.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.4.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "7601e71eaf22c45309852d5d491e0e01bb6322f0"
+  "gitHead": "599a339181595923b9ad6373d6888d8a79540141"
 }

package/src/element-mixin.js

@@ -45,7 +45,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '24.0.0-rc2';
+      return '24.1.0-alpha1';
     }
 
     /** @protected */

package/src/a11y-announcer.d.ts

@@ -1,10 +0,0 @@
-/**
- * @license
- * Copyright (c) 2022 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * Cause a text string to be announced by screen readers.
- */
-export function announce(text: string, options?: { mode?: 'alert' | 'assertive' | 'polite'; timeout?: number }): void;

package/src/a11y-announcer.js

@@ -1,47 +0,0 @@
-/**
- * @license
- * Copyright (c) 2022 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { animationFrame } from './async.js';
-import { Debouncer } from './debounce.js';
-
-const region = document.createElement('div');
-
-region.style.position = 'fixed';
-region.style.clip = 'rect(0px, 0px, 0px, 0px)';
-region.setAttribute('aria-live', 'polite');
-
-document.body.appendChild(region);
-
-let alertDebouncer;
-/**
- * Cause a text string to be announced by screen readers.
- *
- * @param {string} text The text that should be announced by the screen reader.
- * @param {{mode?: string, timeout?: number}} options Additional options.
- */
-export function announce(text, options = {}) {
-  const mode = options.mode || 'polite';
-  const timeout = options.timeout === undefined ? 150 : options.timeout;
-
-  if (mode === 'alert') {
-    region.removeAttribute('aria-live');
-    region.removeAttribute('role');
-    alertDebouncer = Debouncer.debounce(alertDebouncer, animationFrame, () => {
-      region.setAttribute('role', 'alert');
-    });
-  } else {
-    if (alertDebouncer) {
-      alertDebouncer.cancel();
-    }
-    region.removeAttribute('role');
-    region.setAttribute('aria-live', mode);
-  }
-
-  region.textContent = '';
-
-  setTimeout(() => {
-    region.textContent = text;
-  }, timeout);
-}

package/src/active-mixin.d.ts

@@ -1,41 +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';
-import type { DisabledMixinClass } from './disabled-mixin.js';
-import type { KeyboardMixinClass } from './keyboard-mixin.js';
-
-/**
- * A mixin to toggle the `active` attribute.
- *
- * The attribute is set whenever the user activates the element by a pointer
- * or presses an activation key on the element from the keyboard.
- *
- * The attribute is removed as soon as the element is deactivated
- * by the pointer or by releasing the activation key.
- */
-export declare function ActiveMixin<T extends Constructor<HTMLElement>>(
-  base: T,
-): Constructor<ActiveMixinClass> & Constructor<DisabledMixinClass> & Constructor<KeyboardMixinClass> & T;
-
-export declare class ActiveMixinClass {
-  /**
-   * An array of activation keys.
-   *
-   * See possible values here:
-   * https://developer.mozilla.org/ru/docs/Web/API/KeyboardEvent/key/Key_Values
-   */
-  protected readonly _activeKeys: string[];
-
-  /**
-   * Override to define if the component needs to be activated.
-   */
-  protected _shouldSetFocus(event: KeyboardEvent | MouseEvent): boolean;
-
-  /**
-   * Toggles the `active` attribute on the element.
-   */
-  protected _setActive(active: boolean): void;
-}

package/src/active-mixin.js

@@ -1,106 +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 { DisabledMixin } from './disabled-mixin.js';
-import { addListener } from './gestures.js';
-import { KeyboardMixin } from './keyboard-mixin.js';
-
-/**
- * A mixin to toggle the `active` attribute.
- *
- * The attribute is set whenever the user activates the element by a pointer
- * or presses an activation key on the element from the keyboard.
- *
- * The attribute is removed as soon as the element is deactivated
- * by the pointer or by releasing the activation key.
- *
- * @polymerMixin
- */
-export const ActiveMixin = (superclass) =>
-  class ActiveMixinClass extends DisabledMixin(KeyboardMixin(superclass)) {
-    /**
-     * An array of activation keys.
-     *
-     * See possible values here:
-     * https://developer.mozilla.org/ru/docs/Web/API/KeyboardEvent/key/Key_Values
-     *
-     * @protected
-     * @return {!Array<!string>}
-     */
-    get _activeKeys() {
-      return [' '];
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      addListener(this, 'down', (event) => {
-        if (this._shouldSetActive(event)) {
-          this._setActive(true);
-        }
-      });
-
-      addListener(this, 'up', () => {
-        this._setActive(false);
-      });
-    }
-
-    /** @protected */
-    disconnectedCallback() {
-      super.disconnectedCallback();
-
-      // When the element is disconnecting from the DOM at the moment being active,
-      // the `active` attribute needs to be manually removed from the element.
-      // Otherwise, it will preserve on the element until the element is activated once again.
-      // The case reproduces for `<vaadin-date-picker>` when closing on `Cancel` or `Today` click.
-      this._setActive(false);
-    }
-
-    /**
-     * @param {KeyboardEvent | MouseEvent} _event
-     * @protected
-     */
-    _shouldSetActive(_event) {
-      return !this.disabled;
-    }
-
-    /**
-     * Sets the `active` attribute on the element if an activation key is pressed.
-     *
-     * @param {KeyboardEvent} event
-     * @protected
-     * @override
-     */
-    _onKeyDown(event) {
-      super._onKeyDown(event);
-
-      if (this._shouldSetActive(event) && this._activeKeys.includes(event.key)) {
-        this._setActive(true);
-
-        // Element can become hidden before the `keyup` event, e.g. on button click.
-        // Use document listener to ensure `active` attribute is removed correctly.
-        document.addEventListener(
-          'keyup',
-          (e) => {
-            if (this._activeKeys.includes(e.key)) {
-              this._setActive(false);
-            }
-          },
-          { once: true },
-        );
-      }
-    }
-
-    /**
-     * Toggles the `active` attribute on the element.
-     *
-     * @param {boolean} active
-     * @protected
-     */
-    _setActive(active) {
-      this.toggleAttribute('active', active);
-    }
-  };

package/src/delegate-focus-mixin.d.ts

@@ -1,48 +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';
-import type { DisabledMixinClass } from './disabled-mixin.js';
-import type { FocusMixinClass } from './focus-mixin.js';
-import type { TabindexMixinClass } from './tabindex-mixin.js';
-
-/**
- * A mixin to forward focus to an element in the light DOM.
- */
-export declare function DelegateFocusMixin<T extends Constructor<HTMLElement>>(
-  base: T,
-): Constructor<DelegateFocusMixinClass> &
-  Constructor<DisabledMixinClass> &
-  Constructor<FocusMixinClass> &
-  Constructor<TabindexMixinClass> &
-  T;
-
-export declare class DelegateFocusMixinClass {
-  /**
-   * Specify that this control should have input focus when the page loads.
-   */
-  autofocus: 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.
-   */
-  readonly focusElement: HTMLElement | null | undefined;
-
-  protected _addFocusListeners(element: HTMLElement): void;
-
-  protected _removeFocusListeners(element: HTMLElement): void;
-
-  protected _focusElementChanged(element: HTMLElement, oldElement: HTMLElement): void;
-
-  protected _onBlur(event: FocusEvent): void;
-
-  protected _onFocus(event: FocusEvent): void;
-
-  protected _setFocusElement(element: HTMLElement): void;
-}

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;
-}