@salesforcedevs/dx-components 1.3.31 → 1.3.33

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.31",
+    "version": "1.3.33",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -38,5 +38,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "ba2b0b5eae88123861d953a9c1ebc80a5b3bbe22"
+    "gitHead": "bc1e71ba19a01c9479ba93b8f827cc152c359c33"
 }

package/src/modules/dx/dropdownOption/dropdownOption.html

@@ -6,7 +6,7 @@
         target={option.link.target}
         key={option.id}
         role="menuitem"
-        tabindex="-1"
+        tabindex="0"
         data-index={indexPosition}
         onclick={onClick}
     >
@@ -35,7 +35,7 @@
         if:false={option.link}
         class={className}
         role="menuitem"
-        tabindex="-1"
+        tabindex="0"
         data-index={indexPosition}
         onclick={onClick}
     >

package/src/modules/dx/mainContentHeader/mainContentHeader.css

@@ -37,7 +37,6 @@ img {
 }
 
 img.desktop {
-    height: fit-content;
     min-width: 876px;
     margin-left: var(--dx-g-spacing-lg);
 }
@@ -88,3 +87,16 @@ dx-button {
         display: block;
     }
 }
+
+@media screen and (max-width: 768px) {
+    .body,
+    .subtitle {
+        font-size: var(--dx-g-text-base);
+        line-height: var(--dx-g-text-xl);
+    }
+
+    .heading {
+        font-size: var(--dx-g-text-3xl);
+        line-height: var(--dx-g-text-4xl);
+    }
+}

package/src/modules/dx/mainContentHeader/mainContentHeader.html

@@ -3,8 +3,10 @@
         <div class="text-container" style={style}>
             <h1 class="heading dx-text-heading-2">{title}</h1>
             <span class="body dx-text-body-1">{body}</span>
-            <span class="subtitle dx-text-heading-4b">{subtitle}</span>
-            <dx-button href={ctaHref} target={ctaTarget} size="hero">
+            <span if:true={subtitle} class="subtitle dx-text-heading-4b">
+                {subtitle}
+            </span>
+            <dx-button href={ctaHref} target={ctaTarget} size="large">
                 {ctaLabel}
             </dx-button>
         </div>

package/src/modules/dx/mainContentHeader/mainContentHeader.ts

@@ -3,7 +3,7 @@ import { track } from "dxUtils/analytics";
 
 export default class MainContentHeader extends LightningElement {
     @api title!: string;
-    @api subtitle!: string;
+    @api subtitle?: string;
     @api body!: string;
     @api ctaLabel!: string;
     @api ctaHref!: string;

package/src/modules/dx/sidebar/sidebar.css

@@ -12,6 +12,10 @@ dx-empty-state {
     padding-bottom: var(--dx-g-spacing-md);
 }
 
+.sidebar-content-tree {
+    padding: var(--dx-g-spacing-xs);
+}
+
 .loading-skeleton {
     margin-top: var(--dx-g-spacing-md);
 }

package/src/modules/dx/sidebar/sidebar.html

@@ -88,6 +88,7 @@
                 tree-root={tree.tree}
                 onselect={onSelect}
                 value={value}
+                onfocus={onItemsFocused}
                 onselecteditemrendered={onSelectedItemRendered}
             ></dx-tree>
         </div>

package/src/modules/dx/sidebar/sidebar.ts

@@ -257,4 +257,10 @@ export default class Sidebar extends SidebarBase {
             node.children.forEach((child) => this.assignValueToLabel(child));
         }
     }
+
+    private onItemsFocused(): void {
+        this.template
+            .querySelector("dx-sidebar-search")
+            ?.requestOpenDropdown(false);
+    }
 }

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -78,6 +78,11 @@ export default class SidebarSearch extends LightningElement {
         }
     }
 
+    @api
+    requestOpenDropdown(value: boolean) {
+        this.dropdownRequestedOpen = value;
+    }
+
     private _coveoAdvancedQueryConfig!: { [key: string]: any };
     private dropdownRequestedOpen: boolean = false;
     private recentSearches: Option[] = [];

package/src/modules/dx/treeItem/treeItem.html

@@ -1,5 +1,5 @@
 <template>
-    <a href={href} target={target} onclick={onLinkClick}>
+    <a href={href} target={target} onclick={onLinkClick} tabindex="-1">
         <dx-tree-tile
             href={href}
             is-root={isRoot}
@@ -18,7 +18,7 @@
         src="/assets/svg/sidebar-item-loading.svg"
         alt="childrenLoading"
     />
-    <template if:true={showChildren}>
+    <template if:true={showChildren} tabindex="0">
         <template for:each={treeNode.children} for:item="child">
             <dx-tree-item
                 key={child.key}