@salesforcedevs/dx-components 0.43.2-alpha1 → 0.43.3-tree-selected-scroll

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.43.2-alpha1",
+    "version": "0.43.3-tree-selected-scroll",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/cardContent/cardContent.css

@@ -26,7 +26,7 @@
 
 /* mobile responsiveness */
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 1024px) {
     .card-content:not(.dx-card-base_featured) {
         flex-direction: row;
     }

package/src/modules/dx/cardVideoPreview/cardVideoPreview.html

@@ -16,7 +16,6 @@
             slot="image-badge"
         ></dx-icon-badge>
         <dx-formatted-date-time
-            if:true={datetime}
             slot="datetime"
             day="2-digit"
             month="long"

package/src/modules/dx/cardVideoPreview/cardVideoPreview.ts

@@ -2,7 +2,7 @@ import { LightningElement, api } from "lwc";
 
 export default class CardVideoPreview extends LightningElement {
     @api body?: string | null = null;
-    @api datetime?: string;
+    @api datetime!: string;
     @api featured?: boolean = false;
     @api href!: string;
     @api imgAlt?: string;

package/src/modules/dx/section/section.css

@@ -69,7 +69,7 @@
     margin-bottom: var(--dx-g-spacing-md);
 }
 
-.text > .label:not(:last-child) {
+.text > .label {
     margin-bottom: var(--dx-g-spacing-lg);
 }
 

package/src/modules/dx/section/section.ts

@@ -3,16 +3,16 @@ import cx from "classnames";
 import { toDxColor } from "utils/css";
 
 export default class Section extends LightningElement {
-    @api backgroundColor: string = "transparent";
-    @api dark: boolean = false;
+    @api backgroundColor?: string | null = "transparent";
+    @api dark?: boolean = false;
     @api headingLevel: "1" | "2" | "3" | "4" | "5" = "3";
-    @api label?: string;
-    @api subtitle?: string;
-    @api textAlign: "center" | "left" = "left";
-    @api title?: string;
-    @api topGraphic: boolean = false;
-    @api graphicOverlap: boolean = false;
-    @api bottomGraphic: boolean = false;
+    @api label?: string | null = null;
+    @api subtitle?: string | null = null;
+    @api textAlign?: "center" | "left" = "left";
+    @api title?: string | null = null;
+    @api topGraphic?: boolean = false;
+    @api graphicOverlap?: boolean = false;
+    @api bottomGraphic?: boolean = false;
 
     private get style(): string {
         return `--dx-c-section-background-color: ${toDxColor(

package/src/modules/dx/treeItem/treeItem.css

@@ -4,6 +4,11 @@
     display: block;
 }
 
+/* This is to scroll to some more space in the bottom so that user will see some more available items in the bottom */
+dx-tree-tile {
+    scroll-margin-bottom: 90px;
+}
+
 button {
     width: 100%;
     text-align: left;

package/src/modules/dx/treeItem/treeItem.ts

@@ -61,6 +61,24 @@ export default class TreeItem extends LightningElement {
         }
     }
 
+    renderedCallback(): void {
+        /**
+         * This is to scroll to the selected element in the sidebar if it's not visible in the viewport
+         * Please refer https://stackoverflow.com/a/67433987/5059959 for reason of values given to scrollIntoView props
+         */
+
+        if (this.isSelected) {
+            const element = this.template.querySelector("dx-tree-tile");
+            if (element) {
+                element.scrollIntoView({
+                    block: "nearest",
+                    inline: "nearest",
+                    behavior: "smooth"
+                });
+            }
+        }
+    }
+
     private onIconClick(event: CustomEvent): void {
         const isSelectAction = false;
         this.doExpand(isSelectAction);

package/src/modules/dx/vimeoPlayer/vimeoPlayer.html

@@ -1,3 +1,3 @@
 <template>
-    <div class="video-container" lwc:dom="manual"></div>
+    <div class="video-container"></div>
 </template>