@salesforcedevs/docs-components - npm Package Compare versions

Comparing version 1.3.296 to 1.3.300-scroll-fix-alpha2

package.json

 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.296",
+    "version": "1.3.300-scroll-fix-alpha2",
     "description": "Docs Lightning web components for DSC",
@@ -27,3 +27,3 @@ "license": "MIT",
     },
-    "gitHead": "7a3e47bb11802dbded4c5bd3814b408cbeedecd7"
+    "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
 }

src/modules/doc/breadcrumbs/breadcrumbs.ts

@@ -115,12 +115,19 @@ import { LightningElement, api } from "lwc";
         if (!this.observer) {
-            this.observer = new ResizeObserver((entries) => {
-                const [nav] = entries;
-                if (this.navWidth === nav.contentRect.width) {
-                    return;
-                }
-                this.navWidth = nav.contentRect.width;
-                this.updateDropdownOptionAmount();
-            });
+            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")!);
+                this.observer.observe(this.template.querySelector("nav")!);
+            } catch (error) {
+                console.error(
+                    "Error occured while setting up ResizeObserver on breadcrumbs",
+                    error
+                );
+            }
         }
@@ -127,0 +134,0 @@ }

src/modules/doc/contentLayout/contentLayout.ts

@@ -234,2 +234,9 @@ /* eslint-disable @lwc/lwc/no-document-query */
             const docHeaderHeight = docHeaderEl.getBoundingClientRect().height;
+            const totalHeaderHeight = globalNavHeight + docHeaderHeight;
+
+            const docHeadingEls = Array.from(
+                document.querySelectorAll("doc-heading")
+            );
+            const rightNavBarEl = this.template.querySelector(".right-nav-bar");
+
             sidebarEl.style.setProperty(
@@ -240,7 +247,23 @@ "--dx-c-content-sidebar-sticky-top",
 
-            docHeaderEl.style.setProperty(
-                "--dx-g-global-header-height",
-                `${globalNavHeight}px`
-            );
+            docHeadingEls.forEach((docHeadingEl) => {
+                (docHeadingEl as any).style.scrollMarginTop = docPhaseEl
+                    ? `${
+                          totalHeaderHeight +
+                          docPhaseEl.getBoundingClientRect().height
+                      }px`
+                    : `${totalHeaderHeight + 30}px`;
+            });
 
+            if (rightNavBarEl) {
+                rightNavBarEl.style.setProperty(
+                    "--dx-c-content-sidebar-sticky-top",
+                    docPhaseEl
+                        ? `${
+                              totalHeaderHeight +
+                              docPhaseEl.getBoundingClientRect().height
+                          }px`
+                        : `${totalHeaderHeight}px`
+                );
+            }
+
             // If doc phase element exists, we need to account for its sticky position. Mobile should include the sidebar height (since it becomes sticky aswell).
@@ -258,26 +281,2 @@ if (docPhaseEl) {
                 );
-
-                // Adjust scroll margin for doc headings when doc phase is present
-                const docHeadingEls = Array.from(
-                    document.querySelectorAll("doc-heading")
-                );
-                docHeadingEls.forEach((docHeadingEl) => {
-                    (docHeadingEl as any).style.scrollMarginTop = `${
-                        globalNavHeight +
-                        docHeaderHeight +
-                        docPhaseEl.getBoundingClientRect().height
-                    }px`;
-                });
-
-                // Adjust right nav bar position when doc phase is present
-                const rightNavBarEl =
-                    this.template.querySelector(".right-nav-bar");
-
-                if (rightNavBarEl) {
-                    rightNavBarEl.style.top = `${
-                        globalNavHeight +
-                        docHeaderHeight +
-                        docPhaseEl.getBoundingClientRect().height
-                    }px`;
-                }
             }
@@ -284,0 +283,0 @@ });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

0

decreased by-100%

Lines of code

6525

increased by0.09%

Worsened metrics

Total package byte prevSize

254352

decreased by-0.5%

Number of package files

75

decreased by-1.32%

Number of low quality alerts

2

increased by100%

No dependency changes