From e49235960ae05bb83d8dff4c06887a86550f2012 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 5 Oct 2023 13:32:52 -0500
Subject: [PATCH] refactor submenu properties

---
 .../menu-item/submenu-controller.ts           | 37 +++++++++++--------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/components/menu-item/submenu-controller.ts b/src/components/menu-item/submenu-controller.ts
index b42f9ce8..67b0ee35 100644
--- a/src/components/menu-item/submenu-controller.ts
+++ b/src/components/menu-item/submenu-controller.ts
@@ -62,6 +62,7 @@ export class SubmenuController implements ReactiveController {
     if (!this.isPopupConnected) {
       if (this.popupRef.value) {
         this.popupRef.value.addEventListener('mouseover', this.handlePopupMouseover);
+        this.popupRef.value.addEventListener('sl-reposition', this.handlePopupReposition);
         this.isPopupConnected = true;
       }
     }
@@ -79,30 +80,16 @@ export class SubmenuController implements ReactiveController {
     if (this.isPopupConnected) {
       if (this.popupRef.value) {
         this.popupRef.value.removeEventListener('mouseover', this.handlePopupMouseover);
+        this.popupRef.value.removeEventListener('sl-reposition', this.handlePopupReposition);
         this.isPopupConnected = false;
       }
     }
   }
 
+  // Set the safe triangle cursor position
   private handleMouseMove = (event: MouseEvent) => {
-    const submenuSlot: HTMLSlotElement | null = this.host.renderRoot.querySelector("slot[name='submenu']");
-    const menu = submenuSlot?.assignedElements({ flatten: true }).filter(el => el.localName === 'sl-menu')[0];
-    const isRtl = this.localize.dir() === 'rtl';
-
-    if (!menu) {
-      return;
-    }
-
-    const { left, top, width, height } = menu.getBoundingClientRect();
-    const startX = isRtl ? left + width : left;
-    const endX = isRtl ? left + width : left;
-
     this.host.style.setProperty('--safe-triangle-cursor-x', `${event.clientX}px`);
     this.host.style.setProperty('--safe-triangle-cursor-y', `${event.clientY}px`);
-    this.host.style.setProperty('--safe-triangle-submenu-start-x', `${startX}px`);
-    this.host.style.setProperty('--safe-triangle-submenu-start-y', `${top}px`);
-    this.host.style.setProperty('--safe-triangle-submenu-end-x', `${endX}px`);
-    this.host.style.setProperty('--safe-triangle-submenu-end-y', `${top + height}px`);
   };
 
   private handleMouseOver = () => {
@@ -211,6 +198,24 @@ export class SubmenuController implements ReactiveController {
     event.stopPropagation();
   };
 
+  // Set the safe triangle values for the submenu when the position changes
+  private handlePopupReposition = () => {
+    const submenuSlot: HTMLSlotElement | null = this.host.renderRoot.querySelector("slot[name='submenu']");
+    const menu = submenuSlot?.assignedElements({ flatten: true }).filter(el => el.localName === 'sl-menu')[0];
+    const isRtl = this.localize.dir() === 'rtl';
+
+    if (!menu) {
+      return;
+    }
+
+    const { left, top, width, height } = menu.getBoundingClientRect();
+
+    this.host.style.setProperty('--safe-triangle-submenu-start-x', `${isRtl ? left + width : left}px`);
+    this.host.style.setProperty('--safe-triangle-submenu-start-y', `${top}px`);
+    this.host.style.setProperty('--safe-triangle-submenu-end-x', `${isRtl ? left + width : left}px`);
+    this.host.style.setProperty('--safe-triangle-submenu-end-y', `${top + height}px`);
+  };
+
   private setSubmenuState(state: boolean) {
     if (this.popupRef.value) {
       if (this.popupRef.value.active !== state) {