npm - @vaadin/component-base - Versions diffs - 23.2.0-alpha3 → 23.2.0-alpha6 - Mend

@vaadin/component-base 23.2.0-alpha3 → 23.2.0-alpha6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/package.json +2 -2
package/src/a11y-announcer.d.ts +1 -1
package/src/active-mixin.d.ts +1 -1
package/src/active-mixin.js +11 -14
package/src/controller-mixin.d.ts +1 -1
package/src/dir-mixin.d.ts +1 -1
package/src/element-mixin.d.ts +1 -1
package/src/element-mixin.js +1 -1
package/src/focus-mixin.d.ts +1 -1
package/src/focus-trap-controller.js +5 -1
package/src/gestures.js +1 -1
package/src/keyboard-mixin.d.ts +1 -1
package/src/overflow-controller.d.ts +34 -0
package/src/overflow-controller.js +115 -0
package/src/polylit-mixin.d.ts +1 -1
package/src/resize-mixin.d.ts +1 -1
package/src/slot-mixin.d.ts +1 -1
package/src/tabindex-mixin.d.ts +4 -4

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "23.2.0-alpha3",
+  "version": "23.2.0-alpha6",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "06e5875be93ca50da2846dafc65a8531010c0576"
+  "gitHead": "61f1fb56953434e97d34a8819640064301dd3d8a"
 }

package/src/a11y-announcer.d.ts CHANGED Viewed

@@ -7,4 +7,4 @@
 /**
  * Cause a text string to be announced by screen readers.
  */
-export function announce(text: string, options?: { mode?: 'polite' | 'assertive' | 'alert'; timeout?: number }): void;
+export function announce(text: string, options?: { mode?: 'alert' | 'assertive' | 'polite'; timeout?: number }): void;

package/src/active-mixin.d.ts CHANGED Viewed

@@ -18,7 +18,7 @@ import type { KeyboardMixinClass } from './keyboard-mixin.js';
  */
 export declare function ActiveMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<ActiveMixinClass> & Constructor<DisabledMixinClass> & Constructor<KeyboardMixinClass>;
+): Constructor<ActiveMixinClass> & Constructor<DisabledMixinClass> & Constructor<KeyboardMixinClass> & T;
 export declare class ActiveMixinClass {
   /**

package/src/active-mixin.js CHANGED Viewed

@@ -79,21 +79,18 @@ export const ActiveMixin = (superclass) =>
       if (this._shouldSetActive(event) && this._activeKeys.includes(event.key)) {
         this._setActive(true);
-      }
-    }
-    /**
-     * Removes the `active` attribute from the element if the activation key is released.
-     *
-     * @param {KeyboardEvent} event
-     * @protected
-     * @override
-     */
-    _onKeyUp(event) {
-      super._onKeyUp(event);
-      if (this._activeKeys.includes(event.key)) {
-        this._setActive(false);
+        // 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 },
+        );
       }
     }

package/src/controller-mixin.d.ts CHANGED Viewed

@@ -11,7 +11,7 @@ import type { ReactiveController, ReactiveControllerHost } from 'lit';
  */
 export declare function ControllerMixin<T extends Constructor<HTMLElement>>(
   superclass: T,
-): T & Constructor<ControllerMixinClass>;
+): Constructor<ControllerMixinClass> & T;
 export declare class ControllerMixinClass
   implements Pick<ReactiveControllerHost, 'addController' | 'removeController'>

package/src/dir-mixin.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
 /**
  * A mixin to handle `dir` attribute based on the one set on the `<html>` element.
  */
-export declare function DirMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<DirMixinClass>;
+export declare function DirMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<DirMixinClass> & T;
 export declare class DirMixinClass {
   protected __getNormalizedScrollLeft(element: Element | null): number;

package/src/element-mixin.d.ts CHANGED Viewed

@@ -13,7 +13,7 @@ import type { DirMixinClass } from './dir-mixin.js';
  */
 export declare function ElementMixin<T extends Constructor<HTMLElement>>(
   superclass: T,
-): T & Constructor<DirMixinClass> & Constructor<ElementMixinClass>;
+): Constructor<DirMixinClass> & Constructor<ElementMixinClass> & T;
 export declare class ElementMixinClass {
   static version: string;

package/src/element-mixin.js CHANGED Viewed

@@ -39,7 +39,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '23.2.0-alpha3';
+      return '23.2.0-alpha6';
     }
     /** @protected */

package/src/focus-mixin.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ 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): T & Constructor<FocusMixinClass>;
+export declare function FocusMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<FocusMixinClass> & T;
 export declare class FocusMixinClass {
   protected readonly _keyboardActive: boolean;

package/src/focus-trap-controller.js CHANGED Viewed

@@ -125,7 +125,11 @@ export class FocusTrapController {
     const step = backward ? -1 : 1;
     const currentIndex = this.__focusedElementIndex;
     const nextIndex = (focusableElements.length + currentIndex + step) % focusableElements.length;
-    focusableElements[nextIndex].focus();
+    const element = focusableElements[nextIndex];
+    element.focus();
+    if (element.localName === 'input') {
+      element.select();
+    }
   }
   /**

package/src/gestures.js CHANGED Viewed

@@ -277,7 +277,7 @@ function _handleNative(ev) {
   }
   if (!ev[HANDLED_OBJ]) {
     ev[HANDLED_OBJ] = {};
-    if (type.slice(0, 5) === 'touch') {
+    if (type.startsWith('touch')) {
       const t = ev.changedTouches[0];
       if (type === 'touchstart') {
         // Only handle the first finger

package/src/keyboard-mixin.d.ts CHANGED Viewed

@@ -10,7 +10,7 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
  * 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): T & Constructor<KeyboardMixinClass>;
+export declare function KeyboardMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<KeyboardMixinClass> & T;
 export declare class KeyboardMixinClass {
   /**

package/src/overflow-controller.d.ts ADDED Viewed

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 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 that detects if content inside the element overflows its scrolling viewport,
+ * and sets the `overflow` attribute on the host with a value that indicates the directions
+ * where content is overflowing. Supported values are: `top`, `bottom`, `start`, `end`.
+ */
+export class OverflowController implements ReactiveController {
+  /**
+   * The controller host element.
+   */
+  host: HTMLElement;
+  /**
+   * The element that wraps scrollable content.
+   * If not set, the host element is used.
+   */
+  scrollTarget: HTMLElement;
+  constructor(host: HTMLElement, scrollTarget?: HTMLElement);
+  hostConnected(): void;
+  /**
+   * Setup a scroll listener and observers to update overflow.
+   * Also performs one-time update synchronously when called.
+   */
+  protected observe(): void;
+}

package/src/overflow-controller.js ADDED Viewed

@@ -0,0 +1,115 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
+import { animationFrame } from './async.js';
+import { Debouncer } from './debounce.js';
+/**
+ * A controller that detects if content inside the element overflows its scrolling viewport,
+ * and sets the `overflow` attribute on the host with a value that indicates the directions
+ * where content is overflowing. Supported values are: `top`, `bottom`, `start`, `end`.
+ */
+export class OverflowController {
+  constructor(host, scrollTarget) {
+    /**
+     * The controller host element.
+     *
+     * @type {HTMLElement}
+     */
+    this.host = host;
+    /**
+     * The element that wraps scrollable content.
+     * If not set, the host element is used.
+     *
+     * @type {HTMLElement}
+     */
+    this.scrollTarget = scrollTarget || host;
+    /** @private */
+    this.__boundOnScroll = this.__onScroll.bind(this);
+  }
+  hostConnected() {
+    if (!this.initialized) {
+      this.initialized = true;
+      this.observe();
+    }
+  }
+  /**
+   * Setup scroll listener and observers to update overflow.
+   * Also performs one-time update synchronously when called.
+   * @protected
+   */
+  observe() {
+    this.__resizeObserver = new ResizeObserver(() => {
+      this.__debounceOverflow = Debouncer.debounce(this.__debounceOverflow, animationFrame, () => {
+        this.__updateOverflow();
+      });
+    });
+    this.__resizeObserver.observe(this.host);
+    this.__childObserver = new FlattenedNodesObserver(this.host, (info) => {
+      info.addedNodes.forEach((node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          this.__resizeObserver.observe(node);
+        }
+      });
+      info.removedNodes.forEach((node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          this.__resizeObserver.unobserve(node);
+        }
+      });
+      this.__updateOverflow();
+    });
+    // Update overflow attribute on scroll
+    this.scrollTarget.addEventListener('scroll', this.__boundOnScroll);
+    this.__updateOverflow();
+  }
+  /** @private */
+  __onScroll() {
+    this.__updateOverflow();
+  }
+  /** @private */
+  __updateOverflow() {
+    const target = this.scrollTarget;
+    let overflow = '';
+    if (target.scrollTop > 0) {
+      overflow += ' top';
+    }
+    if (target.scrollTop < target.scrollHeight - target.clientHeight) {
+      overflow += ' bottom';
+    }
+    const scrollLeft = Math.abs(target.scrollLeft);
+    if (scrollLeft > 0) {
+      overflow += ' start';
+    }
+    if (scrollLeft < target.scrollWidth - target.clientWidth) {
+      overflow += ' end';
+    }
+    overflow = overflow.trim();
+    if (overflow.length > 0 && this.host.getAttribute('overflow') !== overflow) {
+      this.host.setAttribute('overflow', overflow);
+    } else if (overflow.length === 0 && this.host.hasAttribute('overflow')) {
+      this.host.removeAttribute('overflow');
+    }
+  }
+}

package/src/polylit-mixin.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { LitElement } from 'lit';
-export declare function PolylitMixin<T extends Constructor<LitElement>>(base: T): T & Constructor<PolylitMixinClass>;
+export declare function PolylitMixin<T extends Constructor<LitElement>>(base: T): Constructor<PolylitMixinClass> & T;
 export declare class PolylitMixinClass {
   ready(): void;

package/src/resize-mixin.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
 /**
  * A mixin that uses a ResizeObserver to listen to host size changes.
  */
-export declare function ResizeMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<ResizeMixinClass>;
+export declare function ResizeMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<ResizeMixinClass> & T;
 export declare class ResizeMixinClass {
   /**

package/src/slot-mixin.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
 /**
  * A mixin to provide content for named slots defined by component.
  */
-export declare function SlotMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<SlotMixinClass>;
+export declare function SlotMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<SlotMixinClass> & T;
 export declare class SlotMixinClass {
   /**

package/src/tabindex-mixin.d.ts CHANGED Viewed

@@ -14,23 +14,23 @@ import type { DisabledMixinClass } from './disabled-mixin.js';
  */
 export declare function TabindexMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<DisabledMixinClass> & Constructor<TabindexMixinClass>;
+): Constructor<DisabledMixinClass> & Constructor<TabindexMixinClass> & T;
 export declare class TabindexMixinClass {
   /**
    * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
    */
-  tabindex: number | undefined | null;
+  tabindex: number | null | undefined;
   /**
    * Stores the last known tabindex since the element has been disabled.
    */
-  protected _lastTabIndex: number | undefined | null;
+  protected _lastTabIndex: number | null | undefined;
   /**
    * When the user has changed tabindex while the element is disabled,
    * the observer reverts tabindex to -1 and rather saves the new tabindex value to apply it later.
    * The new value will be applied as soon as the element becomes enabled.
    */
-  protected _tabindexChanged(tabindex: number | undefined | null): void;
+  protected _tabindexChanged(tabindex: number | null | undefined): void;
 }