@salesforcedevs/docs-components 1.3.196 → 1.3.199

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.196",
+    "version": "1.3.199",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -24,5 +24,5 @@
         "@types/lodash.orderby": "^4.6.7",
         "@types/lodash.uniqby": "^4.7.7"
     },
-    "gitHead": "3ca1796a050dd87c8083f73e41d8cb0cfb15328d"
+    "gitHead": "d6096f0f0260b2007a3077f47ce588ef6cf32742"
 }

package/src/modules/doc/amfReference/amfReference.html

@@ -51,7 +51,10 @@
         <template if:true={showSpecBasedReference}>
             <div class="container">
                 <div class="api-documentation">
-                    <doc-amf-topic model={topicModel}></doc-amf-topic>
+                    <doc-amf-topic
+                        if:true={topicModel}
+                        model={topicModel}
+                    ></doc-amf-topic>
                 </div>
             </div>
         </template>

package/src/modules/doc/amfTopic/amfTopic.css

@@ -1 +1,21 @@
 @import "docHelpers/amfStyle";
+
+:host {
+    --reference-container-margin-top: var(--dx-g-spacing-sm);
+    --api-documentation-margin-top: var(--dx-g-spacing-3xl);
+}
+
+/**
+ * 1. We need to scroll to top from the tablet size as side nav bar and content in side by side from tablet size
+ * 2. Consider global nav height, doc header height and content margins to scroll to the right position
+ */
+
+@media screen and (min-width: 769px) {
+    .topic-container {
+        scroll-margin-top: calc(
+            var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
+                var(--reference-container-margin-top) +
+                var(--api-documentation-margin-top)
+        );
+    }
+}

package/src/modules/doc/amfTopic/amfTopic.ts

@@ -10,6 +10,8 @@ import {
 import type { TopicModel } from "./types";
 import { Json } from "typings/custom";
 
+const TABLE_SIZE_MATCH = "769px";
+
 export default class AmfTopic extends LightningElement {
     private _model: TopicModel | undefined;
     private amf: Json;
@@ -85,6 +87,22 @@ export default class AmfTopic extends LightningElement {
             container.firstChild.remove();
         }
         container?.appendChild(element as Node);
+
+        this.scrollToTop(container);
+    }
+
+    scrollToTop(container: Element) {
+        const isTabletOrDesktop = window.matchMedia(
+            `(min-width: ${TABLE_SIZE_MATCH})`
+        ).matches;
+
+        // We need to scroll to top from the tablet size as side nav bar and content in side by side from tablet size
+        if (isTabletOrDesktop) {
+            // Sync with the browser to account for any reflows that may have happened
+            requestAnimationFrame(() => {
+                container?.scrollIntoView(true);
+            });
+        }
     }
 
     renderedCallback(): void {