@momentum-design/components 0.139.0 → 0.139.2

package/dist/components/formfieldgroup/formfieldgroup.component.js

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { ROLE } from '../../utils/roles';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import styles from './formfieldgroup.styles';
@@ -69,7 +69,9 @@ class FormfieldGroup extends FormfieldWrapper {
     }
     render() {
         return html `
-      <div part="group-header">${this.renderLabel()} ${this.renderHelperText()}</div>
+      ${this.label || this.helpText
+            ? html `<div part="group-header">${this.renderLabel()} ${this.renderHelperText()}</div>`
+            : nothing}
       <slot></slot>
     `;
     }

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/package.json

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