@vaadin/component-base 24.4.0-alpha12 → 24.4.0-alpha14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.4.0-alpha12",
+  "version": "24.4.0-alpha14",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.6.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "811e8327e02a8ecdca0bb5d6528856e70d429d0c"
+  "gitHead": "303c07338b748bc6036a92a92cf1733c3bc351eb"
 }

package/src/define.js

@@ -9,7 +9,7 @@ export function defineCustomElement(CustomElement) {
   if (!defined) {
     Object.defineProperty(CustomElement, 'version', {
       get() {
-        return '24.4.0-alpha12';
+        return '24.4.0-alpha14';
       },
     });
 

package/src/url-utils.d.ts

@@ -5,7 +5,11 @@
  */
 
 /**
- * Check if two paths can be resolved as URLs
- * with the same origin and pathname.
+ * Checks if two paths match based on their origin, pathname, and query parameters.
+ *
+ * The function matches an actual URL against an expected URL to see if they share
+ * the same base origin (like https://example.com), the same path (like /path/to/page),
+ * and if the actual URL contains at least all the query parameters with the same values
+ * from the expected URL.
  */
-export declare function matchPaths(path1: string, path2: string): boolean;
+export declare function matchPaths(actual: string, expected: string): boolean;

package/src/url-utils.js

@@ -5,15 +5,37 @@
  */
 
 /**
- * Check if two paths can be resolved as URLs
- * with the same origin and pathname.
+ * Checks if one set of URL parameters contains all the parameters
+ * with the same values from another set.
  *
- * @param {string} path1
- * @param {string} path2
+ * @param {URLSearchParams} actual
+ * @param {URLSearchParams} expected
  */
-export function matchPaths(path1, path2) {
+function containsQueryParams(actual, expected) {
+  return [...expected.entries()].every(([key, value]) => {
+    return actual.getAll(key).includes(value);
+  });
+}
+
+/**
+ * Checks if two paths match based on their origin, pathname, and query parameters.
+ *
+ * The function matches an actual URL against an expected URL to see if they share
+ * the same base origin (like https://example.com), the same path (like /path/to/page),
+ * and if the actual URL contains at least all the query parameters with the same values
+ * from the expected URL.
+ *
+ * @param {string} actual The actual URL to match.
+ * @param {string} expected The expected URL to match.
+ */
+export function matchPaths(actual, expected) {
   const base = document.baseURI;
-  const url1 = new URL(path1, base);
-  const url2 = new URL(path2, base);
-  return url1.origin === url2.origin && url1.pathname === url2.pathname;
+  const actualUrl = new URL(actual, base);
+  const expectedUrl = new URL(expected, base);
+
+  return (
+    actualUrl.origin === expectedUrl.origin &&
+    actualUrl.pathname === expectedUrl.pathname &&
+    containsQueryParams(actualUrl.searchParams, expectedUrl.searchParams)
+  );
 }

package/src/virtualizer-iron-list-adapter.js

@@ -55,6 +55,13 @@ export class IronListAdapter {
     this._scrollLineHeight = this._getScrollLineHeight();
     this.scrollTarget.addEventListener('wheel', (e) => this.__onWheel(e));
 
+    this.scrollTarget.addEventListener('virtualizer-element-focused', (e) => this.__onElementFocused(e));
+    this.elementsContainer.addEventListener('focusin', (e) => {
+      this.scrollTarget.dispatchEvent(
+        new CustomEvent('virtualizer-element-focused', { detail: { element: this.__getFocusedElement() } }),
+      );
+    });
+
     if (this.reorderElements) {
       // Reordering the physical elements cancels the user's grab of the scroll bar handle on Safari.
       // Need to defer reordering until the user lets go of the scroll bar handle.
@@ -227,6 +234,7 @@ export class IronListAdapter {
     // Clean up temporary placeholder sizing
     if (el.__virtualizerPlaceholder) {
       el.style.paddingTop = '';
+      el.style.opacity = '';
       el.__virtualizerPlaceholder = false;
     }
 
@@ -251,6 +259,7 @@ export class IronListAdapter {
         // Assign a temporary placeholder sizing to elements that would otherwise end up having
         // no height.
         el.style.paddingTop = `${this.__placeholderHeight}px`;
+        el.style.opacity = '0';
         el.__virtualizerPlaceholder = true;
 
         // Manually schedule the resize handler to make sure the placeholder padding is
@@ -425,6 +434,75 @@ export class IronListAdapter {
   /** @private */
   toggleScrollListener() {}
 
+  /** @private */
+  __getFocusedElement(visibleElements = this.__getVisibleElements()) {
+    return visibleElements.find(
+      (element) =>
+        element.contains(this.elementsContainer.getRootNode().activeElement) ||
+        element.contains(this.scrollTarget.getRootNode().activeElement),
+    );
+  }
+
+  /** @private */
+  __nextFocusableSiblingMissing(focusedElement, visibleElements) {
+    return (
+      // Check if focused element is the last visible DOM element
+      visibleElements.indexOf(focusedElement) === visibleElements.length - 1 &&
+      // ...while there are more items available
+      this.size > focusedElement.__virtualIndex + 1
+    );
+  }
+
+  /** @private */
+  __previousFocusableSiblingMissing(focusedElement, visibleElements) {
+    return (
+      // Check if focused element is the first visible DOM element
+      visibleElements.indexOf(focusedElement) === 0 &&
+      // ...while there are preceding items available
+      focusedElement.__virtualIndex > 0
+    );
+  }
+
+  /** @private */
+  __onElementFocused(e) {
+    if (!this.reorderElements) {
+      return;
+    }
+
+    const focusedElement = e.detail.element;
+    if (!focusedElement) {
+      return;
+    }
+
+    // User has tabbed to or within a virtualizer element.
+    // Check if a next or previous focusable sibling is missing while it should be there (so the user can continue tabbing).
+    // The focusable sibling might be missing due to the elements not yet being in the correct DOM order.
+    // First try flushing (which also flushes any active __scrollReorderDebouncer).
+    const visibleElements = this.__getVisibleElements();
+    if (
+      this.__previousFocusableSiblingMissing(focusedElement, visibleElements) ||
+      this.__nextFocusableSiblingMissing(focusedElement, visibleElements)
+    ) {
+      this.flush();
+    }
+
+    // If the focusable sibling is still missing (because the focused element is at the edge of the viewport and
+    // the virtual scrolling logic hasn't had the need to recycle elements), scroll the virtualizer just enough to
+    // have the focusable sibling inside the visible viewport to force the virtualizer to recycle.
+    const reorderedVisibleElements = this.__getVisibleElements();
+    if (this.__nextFocusableSiblingMissing(focusedElement, reorderedVisibleElements)) {
+      this._scrollTop +=
+        Math.ceil(focusedElement.getBoundingClientRect().bottom) -
+        Math.floor(this.scrollTarget.getBoundingClientRect().bottom - 1);
+      this.flush();
+    } else if (this.__previousFocusableSiblingMissing(focusedElement, reorderedVisibleElements)) {
+      this._scrollTop -=
+        Math.ceil(this.scrollTarget.getBoundingClientRect().top + 1) -
+        Math.floor(focusedElement.getBoundingClientRect().top);
+      this.flush();
+    }
+  }
+
   _scrollHandler() {
     // The scroll target is hidden.
     if (this.scrollTarget.offsetHeight === 0) {
@@ -662,13 +740,7 @@ export class IronListAdapter {
 
     // Which row to use as a target?
     const visibleElements = this.__getVisibleElements();
-
-    const elementWithFocus = visibleElements.find(
-      (element) =>
-        element.contains(this.elementsContainer.getRootNode().activeElement) ||
-        element.contains(this.scrollTarget.getRootNode().activeElement),
-    );
-    const targetElement = elementWithFocus || visibleElements[0];
+    const targetElement = this.__getFocusedElement(visibleElements) || visibleElements[0];
     if (!targetElement) {
       // All elements are hidden, don't reorder
       return;