@salesforcedevs/docs-components 1.3.396 → 1.3.399

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.396",
+    "version": "1.3.399",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -24,5 +24,5 @@
         "@types/lodash.orderby": "4.6.9",
         "@types/lodash.uniqby": "4.7.9"
     },
-    "gitHead": "ef208488b6cf979514f09d3b4a643bee356d984b"
+    "gitHead": "970b521a455eea0f683d2e6c37bdbd7b103fec5e"
 }

package/src/modules/doc/breadcrumbs/breadcrumbs.ts

@@ -28,8 +28,8 @@ export default class Breadcrumbs extends LightningElement {
     set breadcrumbs(value) {
         this.normalizeAndAssignBreadcrumbs(value);
         this.calculateBreadcrumbsConfigs();
-        if (this.observer) {
-            this.updateDropdownOptionAmount();
+        if (this.isRendered) {
+            this.onWidthOrContentChange();
         }
     }
 
@@ -45,9 +45,9 @@ export default class Breadcrumbs extends LightningElement {
     private _breadcrumbs: Breadcrumb[] = [];
     private _pixelPerCharacter = CONSTANTS.pixelPerCharacter;
     private navWidth = 0;
-    private observer: ResizeObserver | null = null;
     private breadcrumbConfigs: BreadcrumbConfig[] = [];
     private dropdownOptionAmount? = 0;
+    private isRendered = false;
 
     private get renderSmallVariant(): boolean {
         return (
@@ -110,30 +110,21 @@ export default class Breadcrumbs extends LightningElement {
         };
     }
 
+    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);
     }
 
     private normalizeAndAssignBreadcrumbs(breadcrumbs?: Breadcrumb[] | string) {

package/src/modules/doc/componentPlayground/componentPlayground.html

@@ -9,6 +9,7 @@
             src={playgroundSrc}
             onload={handleIframeLoad}
             title="Component Playground"
+            allow="clipboard-write"
         ></iframe>
     </div>
 </template>