@vaadin/component-base 24.0.0 → 24.1.0-alpha2

package/src/keyboard-direction-mixin.js

@@ -1,192 +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 { isElementFocused, isElementHidden } from './focus-utils.js';
-import { KeyboardMixin } from './keyboard-mixin.js';
-
-/**
- * A mixin for navigating items with keyboard.
- *
- * @polymerMixin
- * @mixes KeyboardMixin
- */
-export const KeyboardDirectionMixin = (superclass) =>
-  class KeyboardDirectionMixinClass extends KeyboardMixin(superclass) {
-    /**
-     * @return {Element | null}
-     * @protected
-     */
-    get focused() {
-      return (this._getItems() || []).find(isElementFocused);
-    }
-
-    /**
-     * @return {boolean}
-     * @protected
-     */
-    get _vertical() {
-      return true;
-    }
-
-    /** @protected */
-    focus() {
-      const items = this._getItems();
-      if (Array.isArray(items)) {
-        const idx = this._getAvailableIndex(items, 0, null, (item) => !isElementHidden(item));
-        if (idx >= 0) {
-          items[idx].focus();
-        }
-      }
-    }
-
-    /**
-     * Get the list of items participating in keyboard navigation.
-     * By default, it treats all the light DOM children as items.
-     * Override this method to provide custom list of elements.
-     *
-     * @return {Element[]}
-     * @protected
-     */
-    _getItems() {
-      return Array.from(this.children);
-    }
-
-    /**
-     * Override an event listener from `KeyboardMixin`.
-     *
-     * @param {!KeyboardEvent} event
-     * @protected
-     * @override
-     */
-    _onKeyDown(event) {
-      super._onKeyDown(event);
-
-      if (event.metaKey || event.ctrlKey) {
-        return;
-      }
-
-      const { key } = event;
-      const items = this._getItems() || [];
-      const currentIdx = items.indexOf(this.focused);
-
-      let idx;
-      let increment;
-
-      const isRTL = !this._vertical && this.getAttribute('dir') === 'rtl';
-      const dirIncrement = isRTL ? -1 : 1;
-
-      if (this.__isPrevKey(key)) {
-        increment = -dirIncrement;
-        idx = currentIdx - dirIncrement;
-      } else if (this.__isNextKey(key)) {
-        increment = dirIncrement;
-        idx = currentIdx + dirIncrement;
-      } else if (key === 'Home') {
-        increment = 1;
-        idx = 0;
-      } else if (key === 'End') {
-        increment = -1;
-        idx = items.length - 1;
-      }
-
-      idx = this._getAvailableIndex(items, idx, increment, (item) => !isElementHidden(item));
-
-      if (idx >= 0) {
-        event.preventDefault();
-        this._focus(idx, true);
-      }
-    }
-
-    /**
-     * @param {string} key
-     * @return {boolean}
-     * @private
-     */
-    __isPrevKey(key) {
-      return this._vertical ? key === 'ArrowUp' : key === 'ArrowLeft';
-    }
-
-    /**
-     * @param {string} key
-     * @return {boolean}
-     * @private
-     */
-    __isNextKey(key) {
-      return this._vertical ? key === 'ArrowDown' : key === 'ArrowRight';
-    }
-
-    /**
-     * Focus the item at given index. Override this method to add custom logic.
-     *
-     * @param {number} index
-     * @param {boolean} navigating
-     * @protected
-     */
-    _focus(index, navigating = false) {
-      const items = this._getItems();
-
-      this._focusItem(items[index], navigating);
-    }
-
-    /**
-     * Focus the given item. Override this method to add custom logic.
-     *
-     * @param {Element} item
-     * @param {boolean} navigating
-     * @protected
-     */
-    _focusItem(item) {
-      if (item) {
-        item.focus();
-
-        // Generally, the items are expected to implement `FocusMixin`
-        // that would set this attribute based on the `keydown` event.
-        // We set it manually to handle programmatic focus() calls.
-        item.setAttribute('focus-ring', '');
-      }
-    }
-
-    /**
-     * Returns index of the next item that satisfies the given condition,
-     * based on the index of the current item and a numeric increment.
-     *
-     * @param {Element[]} items - array of items to iterate over
-     * @param {number} index - index of the current item
-     * @param {number} increment - numeric increment, can be either 1 or -1
-     * @param {Function} condition - function used to check the item
-     * @return {number}
-     * @protected
-     */
-    _getAvailableIndex(items, index, increment, condition) {
-      const totalItems = items.length;
-      let idx = index;
-      for (let i = 0; typeof idx === 'number' && i < totalItems; i += 1, idx += increment || 1) {
-        if (idx < 0) {
-          idx = totalItems - 1;
-        } else if (idx >= totalItems) {
-          idx = 0;
-        }
-
-        const item = items[idx];
-
-        if (!item.hasAttribute('disabled') && this.__isMatchingItem(item, condition)) {
-          return idx;
-        }
-      }
-      return -1;
-    }
-
-    /**
-     * Returns true if the item matches condition.
-     *
-     * @param {Element} item - item to check
-     * @param {Function} condition - function used to check the item
-     * @return {number}
-     * @private
-     */
-    __isMatchingItem(item, condition) {
-      return typeof condition === 'function' ? condition(item) : true;
-    }
-  };

package/src/keyboard-mixin.d.ts

@@ -1,40 +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 that manages keyboard handling.
- * The mixin subscribes to the keyboard events while an actual implementation
- * for the event handlers is left to the client (a component or another mixin).
- */
-export declare function KeyboardMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<KeyboardMixinClass> & T;
-
-export declare class KeyboardMixinClass {
-  /**
-   * A handler for the "Enter" key. By default, it does nothing.
-   * Override the method to implement your own behavior.
-   */
-  protected _onEnter(event: KeyboardEvent): void;
-
-  /**
-   * A handler for the "Escape" key. By default, it does nothing.
-   * Override the method to implement your own behavior.
-   */
-  protected _onEscape(event: KeyboardEvent): void;
-
-  /**
-   * A handler for the `keydown` event. By default, it calls
-   * separate methods for handling "Enter" and "Escape" keys.
-   * Override the method to implement your own behavior.
-   */
-  protected _onKeyDown(event: KeyboardEvent): void;
-
-  /**
-   * A handler for the `keyup` event. By default, it does nothing.
-   * Override the method to implement your own behavior.
-   */
-  protected _onKeyUp(event: KeyboardEvent): void;
-}

package/src/keyboard-mixin.js

@@ -1,85 +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 that manages keyboard handling.
- * The mixin subscribes to the keyboard events while an actual implementation
- * for the event handlers is left to the client (a component or another mixin).
- *
- * @polymerMixin
- */
-export const KeyboardMixin = dedupingMixin(
-  (superclass) =>
-    class KeyboardMixinClass extends superclass {
-      /** @protected */
-      ready() {
-        super.ready();
-
-        this.addEventListener('keydown', (event) => {
-          this._onKeyDown(event);
-        });
-
-        this.addEventListener('keyup', (event) => {
-          this._onKeyUp(event);
-        });
-      }
-
-      /**
-       * A handler for the `keydown` event. By default, it calls
-       * separate methods for handling "Enter" and "Escape" keys.
-       * Override the method to implement your own behavior.
-       *
-       * @param {KeyboardEvent} event
-       * @protected
-       */
-      _onKeyDown(event) {
-        switch (event.key) {
-          case 'Enter':
-            this._onEnter(event);
-            break;
-          case 'Escape':
-            this._onEscape(event);
-            break;
-          default:
-            break;
-        }
-      }
-
-      /**
-       * A handler for the `keyup` event. By default, it does nothing.
-       * Override the method to implement your own behavior.
-       *
-       * @param {KeyboardEvent} _event
-       * @protected
-       */
-      _onKeyUp(_event) {
-        // To be implemented.
-      }
-
-      /**
-       * A handler for the "Enter" key. By default, it does nothing.
-       * Override the method to implement your own behavior.
-       *
-       * @param {KeyboardEvent} _event
-       * @protected
-       */
-      _onEnter(_event) {
-        // To be implemented.
-      }
-
-      /**
-       * A handler for the "Escape" key. By default, it does nothing.
-       * Override the method to implement your own behavior.
-       *
-       * @param {KeyboardEvent} _event
-       * @protected
-       */
-      _onEscape(_event) {
-        // To be implemented.
-      }
-    },
-);

package/src/list-mixin.d.ts

@@ -1,57 +0,0 @@
-/**
- * @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 { Constructor } from '@open-wc/dedupe-mixin';
-import type { KeyboardDirectionMixinClass } from './keyboard-direction-mixin.js';
-import type { KeyboardMixinClass } from './keyboard-mixin.js';
-
-/**
- * A mixin for list elements, facilitating navigation and selection of items.
- */
-export declare function ListMixin<T extends Constructor<HTMLElement>>(
-  base: T,
-): Constructor<KeyboardDirectionMixinClass> & Constructor<KeyboardMixinClass> & Constructor<ListMixinClass> & T;
-
-export declare class ListMixinClass {
-  /**
-   * Used for mixin detection because `instanceof` does not work with mixins.
-   */
-  _hasVaadinListMixin: boolean;
-
-  /**
-   * If true, the user cannot interact with this element.
-   * When the element is disabled, the selected item is
-   * not updated when `selected` property is changed.
-   */
-  disabled: boolean;
-
-  /**
-   * The index of the item selected in the items array.
-   * Note: Not updated when used in `multiple` selection mode.
-   */
-  selected: number | null | undefined;
-
-  /**
-   * Define how items are disposed in the dom.
-   * Possible values are: `horizontal|vertical`.
-   * It also changes navigation keys from left/right to up/down.
-   */
-  orientation: 'horizontal' | 'vertical';
-
-  /**
-   * The list of items from which a selection can be made.
-   * It is populated from the elements passed to the light DOM,
-   * and updated dynamically when adding or removing items.
-   *
-   * The item elements must implement `Vaadin.ItemMixin`.
-   *
-   * Note: unlike `<vaadin-combo-box>`, this property is read-only,
-   * so if you want to provide items by iterating array of data,
-   * you have to use `dom-repeat` and place it to the light DOM.
-   */
-  readonly items: Element[] | undefined;
-
-  protected readonly _scrollerElement: HTMLElement;
-}