Add onOpenChange handler for contextMenu (#226)

* Add onOpenChange handler for contextMenu

* changelog and bump version

* minor version

CHANGELOG.md

@@ -1,5 +1,8 @@
 ## Changelog
 
+## 2.11.0
+- [feature] support onOpenChange handler for contextMenu
+
 ## 2.10.2
 - [feature] upgrade @mapbox/mbx-assembly to 1.6.0
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapbox/mr-ui",
-  "version": "2.10.2",
+  "version": "2.11.0",
   "description": "UI components for Mapbox projects",
   "main": "index.js",
   "homepage": "./",

src/components/context-menu/context-menu.tsx

@@ -20,6 +20,7 @@ type Option = {
 interface Props {
   children: ReactNode;
   onChange: (value: string) => void;
+  onOpenChange?: (open: boolean) => void;
   options: Array<Options>;
   themeControlWrapper?: string;
   themeItem?: string;
@@ -30,6 +31,7 @@ interface Props {
 export default function ContextMenu({
   children,
   onChange,
+  onOpenChange,
   options,
   themeControlWrapper = 'bg-white round shadow-darken10 px6 py6 txt-s wmin240',
   themeItem = 'px6 py6 round color-blue-on-hover bg-darken5-on-hover',
@@ -93,7 +95,7 @@ export default function ContextMenu({
   }
 
   return (
-    <ContextMenuPrimitive.Root>
+    <ContextMenuPrimitive.Root onOpenChange={onOpenChange}>
       <ContextMenuPrimitive.Trigger asChild>
         {children}
       </ContextMenuPrimitive.Trigger>
@@ -143,6 +145,8 @@ ContextMenu.propTypes = {
    * - The value. A string matching the `value` field of one of the `options`
    */
   onChange: PropTypes.func.isRequired,
+  /** Event handler called when the open state of the context menu changes. */
+  onOpenChange: PropTypes.func,
   /** Assembly classes to apply to the menu container */
   themeControlWrapper: PropTypes.string,
   /** Assembly classes to apply to menu items */

src/components/context-menu/examples/context-menu-example-basic.tsx

@@ -8,6 +8,7 @@ export default function Example() {
   return (
     <ContextMenu
       onChange={(value => console.log('value is: ', value))}
+      onOpenChange={open => console.log('context menu open state', open)}
       options={[
         {
           options: [