Abstract hooks away from ContextMenuWrapper

Author: TimboKZ

.eslintrc.js

@@ -60,6 +60,10 @@ module.exports = {
         'prettier/prettier': 'off',
     },
     settings: {
+        react: {
+            pragma: 'React', // Pragma to use, default to "React"
+            version: 'detect',
+        },
         'import/extensions': ['.js', '.jsx', '.ts', '.tsx'],
     },
 };

docs/components/BasicLocalMenu.js

@@ -5,7 +5,7 @@ const LocalMenuExample = () => {
     const menuId = 'my-component-local-menu';
     const bannerRef = useRef();
 
-    // This method attaches relevant DOM event listeners to `bannerRef`.
+    // This hook attaches relevant DOM event listeners to `bannerRef`.
     useContextMenuHandlers(bannerRef, { id: menuId });
 
     return (

docs/markdown/2-Basic-menus.md

@@ -4,11 +4,18 @@ This section talks about context menus that always display the same content.
 
 To make a context menu global, simply set the `global` prop to `true`. The simplest global menu could look like this:
 ```jsx
-<ContextMenuWrapper global={true}>
-    <div className="context-menu">
-        <p>I am a global context menu!</p>
-    </div>
-</ContextMenuWrapper>
+import React from 'react';
+import { ContextMenuWrapper } from 'react-context-menu-wrapper';
+
+export const GlobalMenuExample = () => {
+    return (
+        <ContextMenuWrapper global={true}>
+            <div className="context-menu">
+                <p>I am a global context menu!</p>
+            </div>
+        </ContextMenuWrapper>
+    );
+};
 ```
 
 This component will automatically replace the default context menu of your browser. Try right-clicking (or
@@ -33,11 +40,12 @@ export const LocalMenuExample = () => {
     const menuId = 'my-component-local-menu';
     const bannerRef = useRef();
 
-    // This method attaches relevant DOM event listeners to `bannerRef`.
+    // This hook attaches relevant DOM event listeners to `bannerRef`.
     useContextMenuHandlers(bannerRef, { id: menuId });
 
     return (
         <React.Fragment>
+            // We attach `bannerRef` to the component that will trigger the context menu: 
             <div ref={bannerRef} className="banner">Right click or long-press this box</div>
 
             <ContextMenuWrapper id={menuId}>

lib/ContextMenuWrapper.js

@@ -1,15 +1,13 @@
 import React from 'react';
 import { Nullable } from 'tsdef';
-import { ContextMenuEvent, DataAttributes } from './handlers';
+import { ContextMenuEvent } from './handlers';
 export declare const useLazyValue: <T>(factory: () => T) => T;
 export declare const ContextMenuEventContext: React.Context<Nullable<ContextMenuEvent>>;
 export declare const useContextMenuEvent: () => Nullable<ContextMenuEvent>;
-export interface ContextMenuHandlerObject {
-    onContextMenu: (event: React.MouseEvent) => void;
-    [DataAttributes.MenuId]?: string;
-    [DataAttributes.DataId]?: string;
-}
 export declare const useContextMenuHandlers: (ref: React.RefObject<HTMLElement>, { id, data }: {
     id?: string | undefined;
     data?: any;
 }) => void;
+export declare const useMenuToggleMethods: (lastShowMenuEvent: Nullable<ContextMenuEvent>, setShowMenuEvent: (event: Nullable<ContextMenuEvent>) => void, onShow?: ((event: ContextMenuEvent) => void) | undefined, onHide?: (() => void) | undefined) => [(event: ContextMenuEvent) => void, () => void];
+export declare const useMenuPlacementStyle: (lastShowMenuEvent: Nullable<ContextMenuEvent>, setMenuPlacementStyle: (style: Nullable<React.CSSProperties>) => void, wrapperRef: React.RefObject<HTMLElement>) => void;
+export declare const useInternalHandlers: (showMenu: (event: ContextMenuEvent) => void, hideMenu: () => void, id?: string | undefined, global?: boolean | undefined, hideOnSelfClick?: boolean | undefined, hideOnOutsideClick?: boolean | undefined, hideOnEscape?: boolean | undefined, hideOnScroll?: boolean | undefined, hideOnWindowResize?: boolean | undefined) => void;