Better menu shadows.

aratcliffe · aratcliffe · commit ec62f7a0c505 · 2025-12-08T21:11:34.000-08:00
diff --git a/README.md b/README.md
@@ -201,20 +201,19 @@ The menu supports light and dark themes via the `theme` option. Use `'auto'` to
 
 Custom styling can be applied via the `className` options on each component, or by overriding the CSS custom properties:
 
-| Variable                               | Description             | Light Default                | Dark Default                |
-| -------------------------------------- | ----------------------- | ---------------------------- | --------------------------- |
-| `--context-menu-bg`                    | Menu background color   | `white`                      | `#141414`                   |
-| `--context-menu-shadow`                | Menu box shadow         | `0 2px 8px rgba(0,0,0,0.15)` | `0 2px 8px rgba(0,0,0,0.3)` |
-| `--context-menu-border-radius`         | Menu border radius      | `4px`                        | `4px`                       |
-| `--context-menu-min-width`             | Menu minimum width      | `200px`                      | `200px`                     |
-| `--context-menu-item-text-color`       | Item text color         | `black`                      | `white`                     |
-| `--context-menu-item-font-size`        | Item font size          | `13px`                       | `13px`                      |
-| `--context-menu-item-focus-bg`         | Focused item background | `#e8e8e8`                    | `#444444`                   |
-| `--context-menu-item-active-bg`        | Active item background  | `#f3f3f3`                    | `#2a2a2a`                   |
-| `--context-menu-item-disabled-opacity` | Disabled item opacity   | `0.5`                        | `0.5`                       |
-| `--context-menu-button-height`         | Button height           | `30px`                       | `30px`                      |
-| `--context-menu-button-radius`         | Button border radius    | `3px`                        | `3px`                       |
-| `--context-menu-separator-color`       | Separator line color    | `#e8e8e8`                    | `#505050`                   |
+| Variable                               | Description             | Light Default | Dark Default |
+| -------------------------------------- | ----------------------- | ------------- | ------------ |
+| `--context-menu-bg`                    | Menu background color   | `white`       | `#141414`    |
+| `--context-menu-border-radius`         | Menu border radius      | `5px`         | `5px`        |
+| `--context-menu-min-width`             | Menu minimum width      | `200px`       | `200px`      |
+| `--context-menu-item-text-color`       | Item text color         | `black`       | `white`      |
+| `--context-menu-item-font-size`        | Item font size          | `13px`        | `13px`       |
+| `--context-menu-item-focus-bg`         | Focused item background | `#e8e8e8`     | `#444444`    |
+| `--context-menu-item-active-bg`        | Active item background  | `#f3f3f3`     | `#2a2a2a`    |
+| `--context-menu-item-disabled-opacity` | Disabled item opacity   | `0.5`         | `0.5`        |
+| `--context-menu-button-height`         | Button height           | `30px`        | `30px`       |
+| `--context-menu-button-radius`         | Button border radius    | `3px`         | `3px`        |
+| `--context-menu-separator-color`       | Separator line color    | `#e8e8e8`     | `#505050`    |
 
 ## License
 
diff --git a/assets/screenshot.png b/assets/screenshot.png
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mapbox-gl-contextmenu",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "A contextmenu plugin for Mapbox GL JS",
   "type": "module",
   "main": "./dist/index.cjs",
diff --git a/src/components/ContextMenu/ContextMenu.module.scss b/src/components/ContextMenu/ContextMenu.module.scss
@@ -1,7 +1,5 @@
 @mixin dark-mode-vars {
   --context-menu-bg: #141414;
-  --context-menu-shadow: 0 4px 26px -6px rgba(0, 0, 0, 0.4),
-    0 2px 12px -4px rgba(0, 0, 0, 0.2);
   --context-menu-item-text-color: white;
   --context-menu-item-focus-bg: #444444;
   --context-menu-item-active-bg: #2a2a2a;
@@ -14,8 +12,9 @@
   margin: 0;
   padding: 4px 0;
   background: var(--context-menu-bg);
-  border-radius: var(--context-menu-border-radius, 4px);
-  box-shadow: var(--context-menu-shadow);
+  border-radius: var(--context-menu-border-radius, 5px);
+  box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.25),
+    0 1px 4px -2px rgba(0, 0, 0, 0.12);
   min-width: var(--context-menu-min-width, 200px);
   opacity: 0;
   pointer-events: none;
@@ -25,8 +24,6 @@
   outline: none;
 
   --context-menu-bg: white;
-  --context-menu-shadow: 0 4px 26px -6px rgba(0, 0, 0, 0.25),
-    0 2px 12px -4px rgba(0, 0, 0, 0.12);
   --context-menu-item-font-size: 13px;
   --context-menu-item-text-color: black;
   --context-menu-item-focus-bg: #e8e8e8;
@@ -50,3 +47,8 @@
   pointer-events: auto;
   visibility: visible;
 }
+
+.submenu {
+  box-shadow: 0 3px 18px -5px rgba(0, 0, 0, 0.28),
+    0 2px 8px -3px rgba(0, 0, 0, 0.14);
+}
diff --git a/src/components/ContextMenu/ContextMenu.ts b/src/components/ContextMenu/ContextMenu.ts
@@ -13,6 +13,11 @@ export interface ContextMenuOptions {
   theme?: ContextMenuTheme;
   /** The menu width as a CSS value (e.g., "200px") or number in pixels. */
   width?: string | number;
+  /**
+   * Whether this menu is a submenu. Submenus have elevated shadow styling.
+   * @internal
+   */
+  isSubmenu?: boolean;
 }
 
 export default class ContextMenu {
@@ -22,6 +27,7 @@ export default class ContextMenu {
   private _width: string | number | undefined;
   protected _menuEl: HTMLElement | null = null;
   private _container: HTMLElement | null = null;
+  private _isSubmenu: boolean = false;
 
   protected _handlers: Record<string, EventListener | null> = {};
 
@@ -35,6 +41,7 @@ export default class ContextMenu {
       : styles.menu;
     this._theme = options?.theme ?? "auto";
     this._width = options?.width;
+    this._isSubmenu = options?.isSubmenu ?? false;
   }
 
   /**
@@ -77,9 +84,7 @@ export default class ContextMenu {
    */
   set className(value: string) {
     this._className = value;
-    if (this._menuEl) {
-      this._menuEl.className = value;
-    }
+    this._applyClassName();
   }
 
   /**
@@ -381,8 +386,7 @@ export default class ContextMenu {
     if (!this._container) return;
 
     const menu = createElement("menu", {
-      role: "menu",
-      class: this._className
+      role: "menu"
     });
     menu.style.position = "absolute";
     menu.setAttribute("tabindex", "-1"); // Essential for focusing the menu itself
@@ -407,10 +411,19 @@ export default class ContextMenu {
 
     this._menuEl = menu;
 
+    this._applyClassName();
     this._updateWidth();
     this._updateTheme();
   }
 
+  private _applyClassName(): void {
+    if (!this._menuEl) return;
+    this._menuEl.className = this._className;
+    if (this._isSubmenu) {
+      this._menuEl.classList.add(styles.submenu);
+    }
+  }
+
   private _updateWidth(): void {
     if (!this._menuEl) return;
 
diff --git a/src/components/ContextMenuSubmenu/ContextMenuSubmenu.ts b/src/components/ContextMenuSubmenu/ContextMenuSubmenu.ts
@@ -8,7 +8,7 @@ import itemStyles from "../ContextMenuItem/ContextMenuItem.module.scss";
 import chevronSvg from "../../icons/chevron-right.svg?raw";
 
 /** Horizontal overlap between submenu and parent menu item (in pixels) */
-const SUBMENU_OVERLAP = 2;
+const SUBMENU_OVERLAP = 6;
 
 /**
  * Configuration options for creating a context menu submenu.
@@ -71,7 +71,7 @@ export default class ContextMenuSubmenu extends ContextMenuItem {
    */
   constructor(options: ContextMenuSubmenuOptions) {
     super(options);
-    this._submenu = new ContextMenu();
+    this._submenu = new ContextMenu({ isSubmenu: true });
     this._showDelay = options.showDelay ?? 300;
     this._hideDelay = options.hideDelay ?? 200;
   }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "mapbox-gl-contextmenu",`
`3`		`- "version": "1.0.11",`
	`3`	`+ "version": "1.0.12",`
`4`	`4`	`"description": "A contextmenu plugin for Mapbox GL JS",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "./dist/index.cjs",`