@momentum-design/components 0.139.1 → 0.139.3

package/dist/components/icon/icon.utils.js

@@ -12,6 +12,8 @@ const fetchIcon = async (request) => fetch(request).then(response => {
     }
     return response;
 });
+// Map of in-flight fetch promises keyed by URL to deduplicate concurrent requests
+const pendingFetches = new Map();
 /**
  * Fetches a dynamic SVG icon based on the provided `url`, `name` and `fileExtension`.
  * The fetch is aborted if the signal is aborted.
@@ -37,7 +39,8 @@ const svgFetch = async ({ url, name, fileExtension, cacheStrategy, cacheName, re
     // abort the previous fetch request if it is still pending
     // and create a new signal
     const signal = renewSignal();
-    const request = new Request(`${url}/${name}.${fileExtension}`, {
+    const iconUrl = `${url}/${name}.${fileExtension}`;
+    const request = new Request(iconUrl, {
         signal,
     });
     // if there is no cache defined (cacheName and cacheStrategy properly set),
@@ -52,11 +55,16 @@ const svgFetch = async ({ url, name, fileExtension, cacheStrategy, cacheName, re
         if (responseFromCache) {
             return responseFromCache;
         }
+        // **Check for in-flight fetch for same URL**
+        const pending = pendingFetches.get(iconUrl);
+        if (pending) {
+            return pending;
+        }
         // **Otherwise, fetch and cache if successful**
         // Both fetchIcon() and iconsCache.set() "consume" the request,
         // so we need to make a copy.
         // (see https://developer.mozilla.org/en-US/docs/Web/API/Request/clone)
-        return fetchIcon(request.clone()).then(response => {
+        const fetchPromise = fetchIcon(new Request(iconUrl)).then(response => {
             var _a;
             // This avoids caching responses that we know are errors
             // (i.e. HTTP status code of 4xx or 5xx).
@@ -66,7 +74,11 @@ const svgFetch = async ({ url, name, fileExtension, cacheStrategy, cacheName, re
                 return (_a = iconsCache.set) === null || _a === void 0 ? void 0 : _a.call(iconsCache, request, response.clone()).then(() => response.text());
             }
             return response.text();
+        }).finally(() => {
+            pendingFetches.delete(iconUrl);
         });
+        pendingFetches.set(iconUrl, fetchPromise);
+        return fetchPromise;
     })
         .catch(error => {
         // Note that a HTTP error response (e.g. 404) will NOT trigger

package/dist/components/illustration/illustration.utils.js

@@ -12,6 +12,8 @@ const fetchIllustration = async (request) => fetch(request).then(response => {
     }
     return response;
 });
+// Map of in-flight fetch promises keyed by URL to deduplicate concurrent requests
+const pendingFetches = new Map();
 /**
  * Fetches a dynamic SVG illustration based on the provided `url`, `name` and `fileExtension`.
  * The fetch is aborted if the signal is aborted.
@@ -37,7 +39,8 @@ const svgFetch = async ({ url, name, fileExtension, cacheStrategy, cacheName, re
     // abort the previous fetch request if it is still pending
     // and create a new signal
     const signal = renewSignal();
-    const request = new Request(`${url}/${name}.${fileExtension}`, {
+    const illustrationUrl = `${url}/${name}.${fileExtension}`;
+    const request = new Request(illustrationUrl, {
         signal,
     });
     // if there is no cache defined (cacheName and cacheStrategy properly set),
@@ -52,11 +55,16 @@ const svgFetch = async ({ url, name, fileExtension, cacheStrategy, cacheName, re
         if (responseFromCache) {
             return responseFromCache;
         }
+        // **Check for in-flight fetch for same URL**
+        const pending = pendingFetches.get(illustrationUrl);
+        if (pending) {
+            return pending;
+        }
         // **Otherwise, fetch and cache if successful**
         // Both fetchIllustration() and illustrationsCache.set() "consume" the request,
         // so we need to make a copy.
         // (see https://developer.mozilla.org/en-US/docs/Web/API/Request/clone)
-        return fetchIllustration(request.clone()).then(response => {
+        const fetchPromise = fetchIllustration(new Request(illustrationUrl)).then(response => {
             var _a;
             // This avoids caching responses that we know are errors
             // (i.e. HTTP status code of 4xx or 5xx).
@@ -66,7 +74,11 @@ const svgFetch = async ({ url, name, fileExtension, cacheStrategy, cacheName, re
                 return (_a = illustrationsCache.set) === null || _a === void 0 ? void 0 : _a.call(illustrationsCache, request, response.clone()).then(() => response.text());
             }
             return response.text();
+        }).finally(() => {
+            pendingFetches.delete(illustrationUrl);
         });
+        pendingFetches.set(illustrationUrl, fetchPromise);
+        return fetchPromise;
     })
         .catch(error => {
         // Note that a HTTP error response (e.g. 404) will NOT trigger

package/dist/components/tablist/tablist.component.d.ts

@@ -82,6 +82,7 @@ declare class TabList extends TabList_base {
      * @internal
      */
     private showBackwardArrowButton;
+    private readonly boundHandleFocus;
     /**
      * @internal
      */

package/dist/components/tablist/tablist.component.js

@@ -126,6 +126,9 @@ class TabList extends ListNavigationMixin(CaptureDestroyEventForChildElement(Key
          * @internal
          */
         this.showBackwardArrowButton = false;
+        this.boundHandleFocus = (event) => {
+            void this.handleFocus(event);
+        };
         // This must be initialized after the destroyed event listener
         // to keep the element in the itemStore in order to move the focus correctly
         this.itemsStore = new ElementStore(this, {
@@ -168,12 +171,12 @@ class TabList extends ListNavigationMixin(CaptureDestroyEventForChildElement(Key
         if (!this.activeTabId) {
             this.activeTabId = (_a = getFirstTab(this.navItems)) === null || _a === void 0 ? void 0 : _a.tabId;
         }
-        (_b = this.tabsContainer) === null || _b === void 0 ? void 0 : _b.addEventListener('focusin', this.handleFocus.bind(this));
+        (_b = this.tabsContainer) === null || _b === void 0 ? void 0 : _b.addEventListener('focusin', this.boundHandleFocus);
     }
     disconnectedCallback() {
         var _a;
         super.disconnectedCallback();
-        (_a = this.tabsContainer) === null || _a === void 0 ? void 0 : _a.removeEventListener('focusin', this.handleFocus);
+        (_a = this.tabsContainer) === null || _a === void 0 ? void 0 : _a.removeEventListener('focusin', this.boundHandleFocus);
     }
     /**
      * Override focus to delegate to the active tab.
@@ -205,6 +208,11 @@ class TabList extends ListNavigationMixin(CaptureDestroyEventForChildElement(Key
         if (event.relatedTarget instanceof Tab || !(event.target instanceof Tab)) {
             return;
         }
+        // After scrolling with arrow buttons, focus moves from the button to the clicked tab.
+        // Do not redirect that focus back to the currently active tab.
+        if (event.relatedTarget instanceof Button) {
+            return;
+        }
         const activeTab = getActiveTab(this.navItems || []);
         if (!(activeTab instanceof Tab)) {
             return;

package/dist/custom-elements.json

@@ -48481,6 +48481,12 @@
                 "module": "utils/mixins/TabListComponentMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "boundHandleFocus",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "dataAriaLabel",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.139.1",
+  "version": "0.139.3",
   "engines": {
     "node": ">=24.0.0",
     "npm": ">=8.0.0"