@vaadin/component-base - npm Package Compare versions

Comparing version 23.2.0-dev.8a7678b70 to 23.2.0-rc1

custom_typings/vaadin.d.ts

 interface Vaadin {
   developmentModeCallback?: {
     'usage-statistics'?(): void;
-    'vaadin-license-checker'?(): void;
   };
@@ -6,0 +5,0 @@ registrations?: Array<{ is: string; version: string }>;

package.json

 {
   "name": "@vaadin/component-base",
-  "version": "23.2.0-dev.8a7678b70",
+  "version": "23.2.0-rc1",
   "publishConfig": {
@@ -45,3 +45,3 @@ "access": "public"
   },
-  "gitHead": "85b403f96d8282f262322b56c0ff4289f843d02a"
+  "gitHead": "e78a1f2fe6f42d78cefa3f48085b09a3033c9588"
 }

src/a11y-announcer.d.ts

@@ -10,2 +10,2 @@ /**
  */
-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;

src/active-mixin.d.ts

@@ -6,5 +6,5 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DisabledMixinClass } from './disabled-mixin.js';
-import { KeyboardMixinClass } from './keyboard-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from './disabled-mixin.js';
+import type { KeyboardMixinClass } from './keyboard-mixin.js';
 
@@ -22,3 +22,3 @@ /**
   base: T,
-): T & Constructor<ActiveMixinClass> & Constructor<DisabledMixinClass> & Constructor<KeyboardMixinClass>;
+): Constructor<ActiveMixinClass> & Constructor<DisabledMixinClass> & Constructor<KeyboardMixinClass> & T;
 
@@ -25,0 +25,0 @@ export declare class ActiveMixinClass {

src/active-mixin.js

@@ -82,17 +82,14 @@ /**
         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 },
+        );
       }
@@ -99,0 +96,0 @@ }

src/controller-mixin.d.ts

@@ -6,4 +6,4 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
 
@@ -15,3 +15,3 @@ /**
   superclass: T,
-): T & Constructor<ControllerMixinClass>;
+): Constructor<ControllerMixinClass> & T;
 
@@ -18,0 +18,0 @@ export declare class ControllerMixinClass

src/debounce.d.ts

@@ -10,3 +10,3 @@ /**
  */
-import { AsyncInterface } from './async.js';
+import type { AsyncInterface } from './async.js';
 
@@ -13,0 +13,0 @@ export declare class Debouncer {

src/dir-mixin.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
@@ -12,3 +12,3 @@ /**
  */
-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;
 
@@ -15,0 +15,0 @@ export declare class DirMixinClass {

src/disabled-mixin.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
@@ -9,0 +9,0 @@ /**

src/dom-utils.d.ts

@@ -15,1 +15,12 @@ /**
 export function getAncestorRootNodes(node: Node): Node[];
+
+/**
+ * Adds a value to an attribute containing space-delimited values.
+ */
+export function addValueToAttribute(element: HTMLElement, attr: string, value: string): void;
+
+/**
+ * Removes a value from an attribute containing space-delimited values.
+ * If the value is the last one, the whole attribute is removed.
+ */
+export function removeValueFromAttribute(element: HTMLElement, attr: string, value: string): void;

src/dom-utils.js

@@ -42,1 +42,52 @@ /**
 }
+
+/**
+ * @param {string} value
+ * @return {Set<string>}
+ */
+function deserializeAttributeValue(value) {
+  if (!value) {
+    return new Set();
+  }
+
+  return new Set(value.split(' '));
+}
+
+/**
+ * @param {Set<string>} values
+ * @return {string}
+ */
+function serializeAttributeValue(values) {
+  return [...values].join(' ');
+}
+
+/**
+ * Adds a value to an attribute containing space-delimited values.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attr
+ * @param {string} value
+ */
+export function addValueToAttribute(element, attr, value) {
+  const values = deserializeAttributeValue(element.getAttribute(attr));
+  values.add(value);
+  element.setAttribute(attr, serializeAttributeValue(values));
+}
+
+/**
+ * Removes a value from an attribute containing space-delimited values.
+ * If the value is the last one, the whole attribute is removed.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attr
+ * @param {string} value
+ */
+export function removeValueFromAttribute(element, attr, value) {
+  const values = deserializeAttributeValue(element.getAttribute(attr));
+  values.delete(value);
+  if (values.size === 0) {
+    element.removeAttribute(attr);
+    return;
+  }
+  element.setAttribute(attr, serializeAttributeValue(values));
+}

src/element-mixin.d.ts

@@ -8,4 +8,4 @@ /**
 import '../custom_typings/vaadin.js';
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DirMixinClass } from './dir-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DirMixinClass } from './dir-mixin.js';
 
@@ -17,3 +17,3 @@ /**
   superclass: T,
-): T & Constructor<DirMixinClass> & Constructor<ElementMixinClass>;
+): Constructor<DirMixinClass> & Constructor<ElementMixinClass> & T;
 
@@ -20,0 +20,0 @@ export declare class ElementMixinClass {

src/element-mixin.js

@@ -42,3 +42,3 @@ /**
     static get version() {
-      return '23.2.0-alpha1';
+      return '23.2.0-rc1';
     }
@@ -45,0 +45,0 @@

src/focus-mixin.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
@@ -12,3 +12,3 @@ /**
  */
-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;
 
@@ -15,0 +15,0 @@ export declare class FocusMixinClass {

src/focus-mixin.js

@@ -7,25 +7,4 @@ /**
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+import { isKeyboardActive } from './focus-utils.js';
 
-// We consider the keyboard to be active if the window has received a keydown
-// event since the last mousedown event.
-let keyboardActive = false;
-
-// Listen for top-level keydown and mousedown events.
-// Use capture phase so we detect events even if they're handled.
-window.addEventListener(
-  'keydown',
-  () => {
-    keyboardActive = true;
-  },
-  { capture: true },
-);
-
-window.addEventListener(
-  'mousedown',
-  () => {
-    keyboardActive = false;
-  },
-  { capture: true },
-);
-
 /**
@@ -44,3 +23,3 @@ * A mixin to handle `focused` and `focus-ring` attributes based on focus.
       get _keyboardActive() {
-        return keyboardActive;
+        return isKeyboardActive();
       }
@@ -47,0 +26,0 @@

src/focus-trap-controller.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { ReactiveController } from 'lit';
+import type { ReactiveController } from 'lit';
 
@@ -9,0 +9,0 @@ /**

src/focus-trap-controller.js

@@ -128,3 +128,7 @@ /**
     const nextIndex = (focusableElements.length + currentIndex + step) % focusableElements.length;
-    focusableElements[nextIndex].focus();
+    const element = focusableElements[nextIndex];
+    element.focus();
+    if (element.localName === 'input') {
+      element.select();
+    }
   }
@@ -131,0 +135,0 @@

src/focus-utils.d.ts

@@ -8,2 +8,8 @@ /**
 /**
+ * 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.
@@ -10,0 +16,0 @@ *

src/focus-utils.js

@@ -7,3 +7,35 @@ /**
 
+// We consider the keyboard to be active if the window has received a keydown
+// event since the last mousedown event.
+let keyboardActive = false;
+
+// Listen for top-level keydown and mousedown events.
+// Use capture phase so we detect events even if they're handled.
+window.addEventListener(
+  'keydown',
+  () => {
+    keyboardActive = true;
+  },
+  { capture: true },
+);
+
+window.addEventListener(
+  'mousedown',
+  () => {
+    keyboardActive = false;
+  },
+  { capture: true },
+);
+
 /**
+ * Returns true if the window has received a keydown
+ * event since the last mousedown event.
+ *
+ * @return {boolean}
+ */
+export function isKeyboardActive() {
+  return keyboardActive;
+}
+
+/**
  * Returns true if the element is hidden directly with `display: none` or `visibility: hidden`,
@@ -10,0 +42,0 @@ * false otherwise.

src/gestures.js

@@ -280,3 +280,3 @@ /**
     ev[HANDLED_OBJ] = {};
-    if (type.slice(0, 5) === 'touch') {
+    if (type.startsWith('touch')) {
       const t = ev.changedTouches[0];
@@ -283,0 +283,0 @@ if (type === 'touchstart') {

src/keyboard-mixin.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
@@ -14,3 +14,3 @@ /**
  */
-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;
 
@@ -17,0 +17,0 @@ export declare class KeyboardMixinClass {

src/media-query-controller.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { ReactiveController } from 'lit';
+import type { ReactiveController } from 'lit';
 
@@ -9,0 +9,0 @@ /**

src/polylit-mixin.d.ts

@@ -6,6 +6,6 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { LitElement } from 'lit';
+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;
 
@@ -12,0 +12,0 @@ export declare class PolylitMixinClass {

src/polylit-mixin.js

@@ -13,3 +13,4 @@ /**
 function camelToDash(camel) {
-  return caseMap[camel] || (caseMap[camel] = camel.replace(CAMEL_TO_DASH, '-$1').toLowerCase());
+  caseMap[camel] = caseMap[camel] || camel.replace(CAMEL_TO_DASH, '-$1').toLowerCase();
+  return caseMap[camel];
 }
@@ -169,6 +170,5 @@
     /** @protected */
-    ready() {
-      if (super.ready) {
-        super.ready();
-      }
+    firstUpdated() {
+      super.firstUpdated();
+
       this.$ = this.$ || {};
@@ -181,8 +181,4 @@ this.shadowRoot.querySelectorAll('[id]').forEach((node) => {
     /** @protected */
-    firstUpdated() {
-      super.firstUpdated();
+    ready() {}
 
-      this.ready();
-    }
-
     /** @protected */
@@ -205,2 +201,7 @@ updated(props) {
       }
+
+      if (!this.__isReadyInvoked) {
+        this.ready();
+        this.__isReadyInvoked = true;
+      }
     }
@@ -207,0 +208,0 @@

src/resize-mixin.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
@@ -12,3 +12,3 @@ /**
  */
-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;
 
@@ -15,0 +15,0 @@ export declare class ResizeMixinClass {

src/slot-controller.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { ReactiveController } from 'lit';
+import type { ReactiveController } from 'lit';
 
@@ -31,2 +31,3 @@ export class SlotController extends EventTarget implements ReactiveController {
     slotInitializer?: (host: HTMLElement, node: HTMLElement) => void,
+    useUniqueId?: boolean,
   );
@@ -33,0 +34,0 @@

src/slot-controller.js

@@ -26,3 +26,3 @@ /**
 
-  constructor(host, slotName, slotFactory, slotInitializer) {
+  constructor(host, slotName, slotFactory, slotInitializer, useUniqueId) {
     super();
@@ -34,3 +34,7 @@
     this.slotInitializer = slotInitializer;
-    this.defaultId = SlotController.generateId(slotName, host);
+
+    // Only generate the default ID if requested by the controller.
+    if (useUniqueId) {
+      this.defaultId = SlotController.generateId(slotName, host);
+    }
   }
@@ -37,0 +41,0 @@

src/slot-mixin.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
@@ -12,3 +12,3 @@ /**
  */
-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;
 
@@ -15,0 +15,0 @@ export declare class SlotMixinClass {

src/tabindex-mixin.d.ts

@@ -6,4 +6,4 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DisabledMixinClass } from './disabled-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from './disabled-mixin.js';
 
@@ -18,3 +18,3 @@ /**
   base: T,
-): T & Constructor<DisabledMixinClass> & Constructor<TabindexMixinClass>;
+): Constructor<DisabledMixinClass> & Constructor<TabindexMixinClass> & T;
 
@@ -25,3 +25,3 @@ export declare class TabindexMixinClass {
    */
-  tabindex: number | undefined | null;
+  tabindex: number | null | undefined;
 
@@ -31,3 +31,3 @@ /**
    */
-  protected _lastTabIndex: number | undefined | null;
+  protected _lastTabIndex: number | null | undefined;
 
@@ -39,3 +39,3 @@ /**
    */
-  protected _tabindexChanged(tabindex: number | undefined | null): void;
+  protected _tabindexChanged(tabindex: number | null | undefined): void;
 }

src/virtualizer-iron-list-adapter.js

@@ -58,3 +58,5 @@ /**
       // Need to defer reordering until the user lets go of the scroll bar handle.
-      this.scrollTarget.addEventListener('mousedown', () => (this.__mouseDown = true));
+      this.scrollTarget.addEventListener('mousedown', () => {
+        this.__mouseDown = true;
+      });
       this.scrollTarget.addEventListener('mouseup', () => {
@@ -302,3 +304,5 @@ this.__mouseDown = false;
     // Workaround an issue in iron-list that can cause it to freeze on fast scroll
-    setTimeout(() => (this.__clientFull = true));
+    setTimeout(() => {
+      this.__clientFull = true;
+    });
     return this.__clientFull || super._isClientFull();
@@ -383,3 +387,5 @@ }
       animationFrame,
-      () => (this._wheelAnimationFrame = false),
+      () => {
+        this._wheelAnimationFrame = false;
+      },
     );
@@ -400,3 +406,5 @@
         timeOut.after(this.timeouts.IGNORE_WHEEL),
-        () => (this._ignoreNewWheel = false),
+        () => {
+          this._ignoreNewWheel = false;
+        },
       );
@@ -501,3 +509,5 @@ } else if ((this._hasResidualMomentum && momentum <= this._previousMomentum) || this._ignoreNewWheel) {
       this.scrollTarget.style.transform = 'translateZ(0)';
-      setTimeout(() => (this.scrollTarget.style.transform = transform));
+      setTimeout(() => {
+        this.scrollTarget.style.transform = transform;
+      });
     }
@@ -504,0 +514,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

182317

increased by3.76%

Number of package files

58

increased by3.57%

Lines of code

5244

increased by4.15%

No dependency changes