Key control fixes

docs/api.md

@@ -47,18 +47,27 @@ A Simple Component for menu items.
 | onClick      | Function | ✓         |         | The function to be called on click of item. The function will receive three parameters. The first is `event` object. The second is the merged data passed using `props.data` and collect from `ContextMenuTrigger`. The third is the element on which right-click occured. |
 | data         | Object   |           | `{}`    | The extra data (if required) to be passed to `onClick` event.                                                                                                                                                                                                              |
 | disabled     | Boolean  |           | `false` | If `true`, disables the click event and adds `.disabled` class.                                                                                                                                                                                                            |
-| preventClose | Boolean  |           | false   | By default, the context menu is closed as soon as an item is clicked. Set this prop to control this behavior.                                                                                                                                                              |
+| preventClose | Boolean  |           | `false` | By default, the context menu is closed as soon as an item is clicked. Set this prop to control this behavior.                                                                                                                                                              |
 | attributes   | Object   |           |         | The attributes will be passed directly passed to the root element of `MenuItem`. Use this to customize it like adding custom classes, etc.                                                                                                                                 |
+| selected    | boolean   |           | `false` | **Internal Prop**: will be set from the surrounded context `ContextMenu` or `SubMenu`. If set to `true` the css class `react-contextmenu-item--selected` will be added to associated element.                                                                         |
+| onMouseMove | Function  |           |         | **Internal Prop**: will be directly passed to associated element, so the surrounded context `ContextMenu` or `SubMenu` can handle the interactions to pass the correct `selected` state. Also the surrounded context can store the current selected `MenuItem`.    |
+| onMouseLeave | Function  |           |         | **Internal Prop**: will be directly passed to associated element, so the surrounded context `ContextMenu` or `SubMenu` can handle the interactions to pass the correct `selected` state. Also the surrounded context can store the current selected `MenuItem`.    |
 
 ### `<SubMenu />`
 
 A component for using submenus within the contextmenu.
 
 #### PropTypes
 
-| Property   | Type    | Required? | Default | Description                                                                 |
-|------------|---------|-----------|---------|-----------------------------------------------------------------------------|
-| title      | String  | ✓         |         | The content to be displayed in parent menu.                                 |
-| disabled   | Boolean |           | `false` | If `true`, disables the menu from opening and adds `.disabled` class.       |
-| hoverDelay | Number  |           | `500`   | The time (in ms) after which the menu is to be displayed when hovered upon. |
-| classNames | String  |           |         | Custom `className` applied to root element of the context-menu.             |
+| Property    | Type     | Required? | Default | Description                                                                 |
+|-------------|----------|-----------|---------|-----------------------------------------------------------------------------|
+| title       | String   | ✓         |         | The content to be displayed in parent menu.                                 |
+| disabled    | Boolean  |           | `false` | If `true`, disables the menu from opening and adds `.disabled` class.       |
+| hoverDelay  | Number   |           | `500`   | The time (in ms) after which the menu is to be displayed when hovered upon. |
+| classNames  | String   |           |         | Custom `className` applied to root element of the context-menu.             |
+| selected    | boolean  |           | `false` | **Internal Prop**: will be set from the surrounded context `ContextMenu` or `SubMenu`. If set to `true` the css class `react-contextmenu-item--selected` will be added to associated element.           |
+| onMouseMove | Function |           |         | **Internal Prop**: will be directly passed to associated element, so the surrounded context `ContextMenu` or `SubMenu` can handle the interactions to pass the correct `selected` state. Also the surrounded context can store the current selected `SubMenu` entry.    |
+| onMouseOut  | Function |           |         | **Internal Prop**: will be directly passed to associated element, so the surrounded context `ContextMenu` or `SubMenu` can handle the interactions to pass the correct `selected` state. Also the surrounded context can store the current selected `SubMenu` entry.    |
+| forceOpen   | boolean  |           | `false` | **Internal Prop**: if the user hits enter or the right arrow key on a selected `SubMenu` entry, the surrounded context will pass `true` to this flag. The `SubMenu` stays open until this flag is `false`.    |
+| forceClose  | Function |           |         | **Internal Prop**: if the user hits the escape key during an open `SubMenu`, this function will be called to indicate the surrounding context to reset the `forceOpen` flag.    |
+| parentKeyNavigationHandler | Function |           |         | **Internal Prop**: the `keydown` handler from the surrounding context will be passed to every open `SubMenu`. Then the `Submenu` will unregister the referenced handler and use it's own for key control. When the `SubMenu` hides again the original handler will be restored.    |

src/MenuItem.js

@@ -16,8 +16,8 @@ export default class MenuItem extends Component {
         preventClose: PropTypes.bool,
         onClick: PropTypes.func,
         selected: PropTypes.bool,
-        onMouseMove: PropTypes.func.isRequired,
-        onMouseLeave: PropTypes.func.isRequired
+        onMouseMove: PropTypes.func,
+        onMouseLeave: PropTypes.func
     };
 
     static defaultProps = {
@@ -28,7 +28,9 @@ export default class MenuItem extends Component {
         preventClose: false,
         onClick() { return null; },
         children: null,
-        selected: false
+        selected: false,
+        onMouseMove: () => null,
+        onMouseLeave: () => null
     };
 
     handleClick = (event) => {

src/SubMenu.js

@@ -14,19 +14,24 @@ export default class SubMenu extends AbstractMenu {
         hoverDelay: PropTypes.number,
         rtl: PropTypes.bool,
         selected: PropTypes.bool,
-        onMouseMove: PropTypes.func.isRequired,
-        onMouseOut: PropTypes.func.isRequired,
-        forceOpen: PropTypes.bool.isRequired,
-        forceClose: PropTypes.func.isRequired,
-        parentKeyNavigationHandler: PropTypes.func.isRequired
+        onMouseMove: PropTypes.func,
+        onMouseOut: PropTypes.func,
+        forceOpen: PropTypes.bool,
+        forceClose: PropTypes.func,
+        parentKeyNavigationHandler: PropTypes.func
     };
 
     static defaultProps = {
         disabled: false,
         hoverDelay: 500,
         className: '',
         rtl: false,
-        selected: false
+        selected: false,
+        onMouseMove: () => null,
+        onMouseOut: () => null,
+        forceOpen: false,
+        forceClose: () => null,
+        parentKeyNavigationHandler: () => null
     };
 
     constructor(props) {