Make child menu positioning more robust. More styling flexibility through variables.

Author: aratcliffe

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapbox-gl-contextmenu",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "A contextmenu plugin for Mapbox GL JS",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -17,6 +17,7 @@
   },
   "scripts": {
     "dev": "vite",
+    "dev:tailwind": "vite --config vite.config.tailwind.ts",
     "build": "tsc -p tsconfig.build.json && vite build",
     "preview": "vite preview",
     "docs": "typedoc"

src/components/ContextMenu/ContextMenu.module.scss

@@ -2,7 +2,7 @@
   --context-menu-bg: #141414;
   --context-menu-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
   --context-menu-item-text-color: white;
-  --context-menu-item-hover-bg: #444444;
+  --context-menu-item-focus-bg: #444444;
   --context-menu-item-active-bg: #2a2a2a;
   --context-menu-item-disabled-opacity: 0.5;
   --context-menu-separator-color: #505050;
@@ -27,7 +27,7 @@
   --context-menu-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   --context-menu-item-font-size: 13px;
   --context-menu-item-text-color: black;
-  --context-menu-item-hover-bg: #e8e8e8;
+  --context-menu-item-focus-bg: #e8e8e8;
   --context-menu-item-active-bg: #f3f3f3;
   --context-menu-item-disabled-opacity: 0.5;
   --context-menu-separator-color: #e8e8e8;

src/components/ContextMenuItem/ContextMenuItem.module.scss

@@ -17,11 +17,11 @@
   align-items: center;
   gap: 12px;
   width: 100%;
-  height: 28px;
+  height: var(--context-menu-button-height, 28px);
   padding: 0px 4px 0px 12px;
   margin: 0;
   border: none;
-  border-radius: 3px;
+  border-radius: var(--context-menu-button-radius, 3px);
   background: none;
   color: var(--context-menu-item-text-color);
   text-align: left;
@@ -33,7 +33,7 @@
   font-size: var(--context-menu-item-font-size);
 
   &.focused:not(:disabled):not(.focusedParent) {
-    background-color: var(--context-menu-item-hover-bg);
+    background-color: var(--context-menu-item-focus-bg);
   }
 
   &.focusedParent:not(:disabled) {

src/components/ContextMenuSubmenu/ContextMenuSubmenu.ts

@@ -287,13 +287,14 @@ export default class ContextMenuSubmenu extends ContextMenuItem {
 
     const submenuEl = this._submenu.menuElement;
     if (submenuEl) {
-      // Get the first item's top padding to align submenu item with parent item
+      // Calculate offset from menu top to first item top to align with parent
       const firstChild = submenuEl.firstElementChild as HTMLElement | null;
-      const firstChildPaddingTop = firstChild
-        ? parseFloat(getComputedStyle(firstChild).paddingTop)
-        : 0;
+      const menuTop = submenuEl.getBoundingClientRect().top;
+      const firstChildTop = firstChild
+        ? firstChild.getBoundingClientRect().top
+        : menuTop;
 
-      y -= firstChildPaddingTop;
+      y -= firstChildTop - menuTop;
 
       const submenuWidth = submenuEl.offsetWidth;
       const submenuHeight = submenuEl.offsetHeight;