@salesforcedevs/dx-components 1.3.102 → 1.3.104

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.102",
+    "version": "1.3.104",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -40,5 +40,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "3e8a3f0d4092d9d819a05ebfcffd71977a699df2"
+    "gitHead": "5c5892f9f85207284a94a39243f47e948e5e3fdf"
 }

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

@@ -32,10 +32,6 @@ dx-empty-state {
     display: none;
 }
 
-.container.collapsed .header-toggle-button {
-    transform: rotate(180deg);
-}
-
 .container.collapsed .sidebar-header,
 .container.collapsed .sidebar-content {
     display: none;

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

@@ -16,17 +16,6 @@
             </div>
         </div>
 
-        <dx-button
-            if:false={mobile}
-            aria-expanded={expanded}
-            aria-label="icon"
-            class="header-toggle-button"
-            icon-symbol="close_panel"
-            variant="custom"
-            onclick={onToggleClick}
-            onmouseenter={onToggleMouseEnter}
-            onmouseleave={onToggleMouseLeave}
-        ></dx-button>
         <div class="sidebar-header padding-horizontal">
             <div class="header" if:false={mobile}>
                 <h2 class="dx-text-display-6 header-title">{header}</h2>

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

@@ -53,7 +53,6 @@ export default class Sidebar extends SidebarBase {
     }
 
     private expanded: boolean = true;
-    private _toggleHovered: boolean = false;
     private _value?: string = undefined;
 
     @track
@@ -113,7 +112,6 @@ export default class Sidebar extends SidebarBase {
     private get containerClass() {
         return cx("container", {
             collapsed: !this.expanded,
-            "container-border-active": this._toggleHovered,
             "container-mobile": this.mobile,
             "user-searching": this.isUserSearching,
             "show-tree": !this.isUserSearching,
@@ -158,8 +156,10 @@ export default class Sidebar extends SidebarBase {
         this.matchMedia.removeEventListener("change", this.onMediaChange);
     }
 
-    private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) =>
-        (this.mobile = event.matches);
+    private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
+        this.mobile = event.matches;
+        this.expanded = !this.mobile;
+    };
 
     private onSelect(event: CustomEvent) {
         this._value = event.detail.name;
@@ -167,15 +167,6 @@ export default class Sidebar extends SidebarBase {
 
     private onToggleClick() {
         this.expanded = !this.expanded;
-        this._toggleHovered = false;
-    }
-
-    private onToggleMouseEnter() {
-        this._toggleHovered = true;
-    }
-
-    private onToggleMouseLeave() {
-        this._toggleHovered = false;
     }
 
     private makeKey(): string {

package/src/modules/dx/sidebarOld/sidebarOld.css

@@ -1,9 +1,5 @@
 @import "dxHelpers/commonSidebar";
 
-.collapsed .header-toggle-button {
-    transform: rotate(180deg);
-}
-
 .sidebar-content {
     overflow-y: auto;
 }

package/src/modules/dx/sidebarOld/sidebarOld.html

@@ -16,18 +16,6 @@
             </div>
         </div>
 
-        <dx-button
-            if:false={mobile}
-            aria-expanded={expanded}
-            aria-label="icon"
-            class="header-toggle-button"
-            icon-symbol="close_panel"
-            variant="custom"
-            onclick={onToggleClick}
-            onmouseenter={onToggleMouseEnter}
-            onmouseleave={onToggleMouseLeave}
-        ></dx-button>
-
         <template if:true={expanded}>
             <div class="padding-horizontal">
                 <div class="header" if:false={mobile}>

package/src/modules/dx/sidebarOld/sidebarOld.ts

@@ -38,7 +38,6 @@ export default class Sidebar extends SidebarBase {
     }
 
     private expanded: boolean = true;
-    private _toggleHovered: boolean = false;
     private _searchTimeout?: number;
     private _value?: string = undefined;
     private _trees!: Array<TreeNode>;
@@ -56,7 +55,6 @@ export default class Sidebar extends SidebarBase {
     private get containerClass() {
         return cx("container", {
             collapsed: !this.expanded,
-            "container-border-active": this._toggleHovered,
             "container-mobile": this.mobile
         });
     }
@@ -88,8 +86,10 @@ export default class Sidebar extends SidebarBase {
         this.matchMedia.removeEventListener("change", this.onMediaChange);
     }
 
-    private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) =>
-        (this.mobile = event.matches);
+    private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
+        this.mobile = event.matches;
+        this.expanded = !this.mobile;
+    };
 
     private onSelect(event: CustomEvent) {
         this._value = event.detail.name;
@@ -97,15 +97,6 @@ export default class Sidebar extends SidebarBase {
 
     private onToggleClick() {
         this.expanded = !this.expanded;
-        this._toggleHovered = false;
-    }
-
-    private onToggleMouseEnter() {
-        this._toggleHovered = true;
-    }
-
-    private onToggleMouseLeave() {
-        this._toggleHovered = false;
     }
 
     /*

package/src/modules/dxHelpers/commonSidebar/commonSidebar.css

@@ -39,21 +39,6 @@ dx-tree:not(:last-child) {
     line-height: inherit;
 }
 
-.header-toggle-button {
-    position: absolute;
-    right: calc((-1 * (var(--dx-g-spacing-xl) / 2)) - 1px);
-
-    --dx-c-button-opacity: 0;
-    --dx-c-button-custom-color: var(--dx-c-sidebar-button-color);
-    --dx-c-button-custom-background: var(--dx-c-sidebar-button-background);
-    --dx-c-button-custom-border: var(--dx-c-sidebar-button-border);
-    --dx-c-button-custom-color-hover: var(--dx-c-sidebar-button-color-hover);
-    --dx-c-button-custom-background-hover: var(
-        --dx-c-sidebar-button-background-hover
-    );
-    --dx-c-button-custom-border-hover: var(--dx-c-sidebar-button-border-hover);
-}
-
 .header-toggle-icon {
     margin: auto 0 auto auto;
     color: var(--dx-g-blue-vibrant-30);
@@ -96,10 +81,6 @@ dx-tree:not(:last-child) {
     --border-color: transparent;
 }
 
-.container:hover .header-toggle-button {
-    --dx-c-button-opacity: 1;
-}
-
 .container.container-mobile {
     width: 100%;
 }