@salesforcedevs/docs-components - npm Package Compare versions

Comparing version 1.3.396 to 1.3.399

package.json

 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.396",
+    "version": "1.3.399",
     "description": "Docs Lightning web components for DSC",
@@ -27,3 +27,3 @@ "license": "MIT",
     },
-    "gitHead": "ef208488b6cf979514f09d3b4a643bee356d984b"
+    "gitHead": "970b521a455eea0f683d2e6c37bdbd7b103fec5e"
 }

src/modules/doc/breadcrumbs/breadcrumbs.ts

@@ -31,4 +31,4 @@ import { LightningElement, api } from "lwc";
         this.calculateBreadcrumbsConfigs();
-        if (this.observer) {
-            this.updateDropdownOptionAmount();
+        if (this.isRendered) {
+            this.onWidthOrContentChange();
         }
@@ -49,5 +49,5 @@ }
     private navWidth = 0;
-    private observer: ResizeObserver | null = null;
     private breadcrumbConfigs: BreadcrumbConfig[] = [];
     private dropdownOptionAmount? = 0;
+    private isRendered = false;
 
@@ -115,26 +115,17 @@ private get renderSmallVariant(): boolean {
 
+    private onWidthOrContentChange = () => {
+        this.navWidth = this.template
+            .querySelector("nav")!
+            .getBoundingClientRect().width;
+        this.updateDropdownOptionAmount();
+    };
+
     renderedCallback(): void {
-        if (!this.observer) {
-            try {
-                this.observer = new ResizeObserver((entries) => {
-                    const [nav] = entries;
-                    if (this.navWidth === nav.contentRect.width) {
-                        return;
-                    }
-                    this.navWidth = nav.contentRect.width;
-                    this.updateDropdownOptionAmount();
-                });
-
-                this.observer.observe(this.template.querySelector("nav")!);
-            } catch (error) {
-                console.error(
-                    "Error occured while setting up ResizeObserver on breadcrumbs",
-                    error
-                );
-            }
-        }
+        this.isRendered = true;
+        this.onWidthOrContentChange();
+        window.addEventListener("resize", this.onWidthOrContentChange);
     }
 
     disconnectedCallback(): void {
-        this.observer?.disconnect();
+        window.removeEventListener("resize", this.onWidthOrContentChange);
     }
@@ -141,0 +132,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

279435

decreased by-0.11%

Lines of code

6922

decreased by-0.13%

No dependency changes