Append custom class names instead of replacing library placename.

Author: aratcliffe

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapbox-gl-contextmenu",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A contextmenu plugin for Mapbox GL JS",
   "type": "module",
   "main": "./dist/index.cjs",

src/components/ContextMenu/ContextMenu.ts

@@ -30,7 +30,9 @@ export default class ContextMenu {
   private _onEscapeLeft: (() => void) | null = null;
 
   constructor(options?: ContextMenuOptions) {
-    this._className = options?.className ?? styles.menu;
+    this._className = options?.className
+      ? `${styles.menu} ${options.className}`
+      : styles.menu;
     this._theme = options?.theme ?? "auto";
     this._width = options?.width;
   }

src/components/ContextMenuItem/ContextMenuItem.ts

@@ -75,8 +75,12 @@ export default class ContextMenuItem extends Evented<ContextMenuItemEvents> {
    */
   constructor(options: ContextMenuItemOptions) {
     super();
-    this._className = options.className ?? styles.menuItem;
-    this._buttonClassName = options.buttonClassName ?? styles.button;
+    this._className = options.className
+      ? `${styles.menuItem} ${options.className}`
+      : styles.menuItem;
+    this._buttonClassName = options.buttonClassName
+      ? `${styles.button} ${options.buttonClassName}`
+      : styles.button;
     this._label = options.label;
     this._icon = options.icon;
     this._iconPosition = options.iconPosition ?? "before";

src/components/ContextMenuSeparator/ContextMenuSeparator.ts

@@ -31,7 +31,9 @@ export default class ContextMenuSeparator {
    * @param options.className - Custom CSS class name for the separator element.
    */
   constructor(options?: ContextMenuSeparatorOptions) {
-    this._className = options?.className ?? styles.separator;
+    this._className = options?.className
+      ? `${styles.separator} ${options.className}`
+      : styles.separator;
   }
 
   /**