feat: Add context

Author: totase

src/components/ContextMenu.tsx

@@ -4,8 +4,10 @@ import cx from 'clsx';
 import MenuItem from './MenuItem';
 import Separator from './Separator';
 import SubMenu from './SubMenu';
+
 import { cloneChildren, getCursorPosition, validateMenuPosition } from '../utils';
 import { HIDE_ON_EVENTS } from '../constants';
+import ContextProvider from '../context';
 import { Position } from '../types';
 
 export interface ContextMenuProps extends HTMLAttributes<HTMLDivElement> {
@@ -58,16 +60,14 @@ const ContextMenu = ({
   };
 
   const hide = () => {
-    const position = { x: 0, y: 0 };
-
-    if (animateExit) setState((prev) => ({ ...prev, position, leaving: true }));
-    else setState((prev) => ({ ...prev, position, active: false }));
+    if (animateExit) setState((prev) => ({ ...prev, leaving: true }));
+    else setState((prev) => ({ ...prev, active: false }));
   };
 
   const handleAnimationEnd = () => {
     const { leaving, active } = state;
 
-    if (leaving && active) setState((prev) => ({ ...prev, active: false, leaving: false }));
+    if (leaving && active) setState(() => ({ position: { x: 0, y: 0 }, active: false, leaving: false }));
   };
 
   useEffect(() => {
@@ -109,7 +109,7 @@ const ContextMenu = ({
       onClick={(event) => event.stopPropagation()}
       tabIndex={-1}
     >
-      {cloneChildren(children, { hide })}
+      <ContextProvider hide={hide}>{cloneChildren(children)}</ContextProvider>
     </div>
   );
 };

src/components/MenuItem.tsx

@@ -1,18 +1,17 @@
-import { useState, useCallback, ButtonHTMLAttributes } from 'react';
+import { useState, useCallback, ButtonHTMLAttributes, useContext } from 'react';
 import cx from 'clsx';
 
-export interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
+import { ContextMenuContext } from '../context';
 
-export interface MenuItemExternalProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  hide: () => void;
-}
+export interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
 
 interface MenuItemState {
   clicked: boolean;
   eventRef: React.MouseEvent<HTMLButtonElement> | null;
 }
 
 const MenuItem = ({ children, onClick, className, disabled = false, ...rest }: MenuItemProps) => {
+  const context = useContext(ContextMenuContext);
   const [state, setState] = useState<MenuItemState>({ clicked: false, eventRef: null });
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -22,11 +21,10 @@ const MenuItem = ({ children, onClick, className, disabled = false, ...rest }: M
   };
 
   const handleAnimationEnd = useCallback(() => {
-    const { hide } = rest as MenuItemExternalProps;
     setState((prev) => ({ ...prev, clicked: false }));
 
     if (state.clicked && state.eventRef) {
-      hide();
+      context?.hide();
       onClick!(state.eventRef);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/components/SubMenu.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect, useRef, HTMLAttributes } from 'react';
 import cx from 'clsx';
 
-import { MenuItemExternalProps } from './MenuItem';
 import { BOTTOM_CLASS, CLOSE_DELAY, RIGHT_CLASS } from '../constants';
 import { cloneChildren } from '../utils';
 
@@ -85,7 +84,7 @@ const SubMenu = ({ label, children, className, disabled = false, ...rest }: SubM
         className="react-context-menu__submenu"
       >
         {/* rest is sent from the ContextMenu element */}
-        {cloneChildren(children, rest as MenuItemExternalProps)}
+        {cloneChildren(children)}
       </div>
     </div>
   );

src/context/context.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+export interface ContextMenuContextProps {
+  hide: () => void;
+}
+
+export const ContextMenuContext = createContext<ContextMenuContextProps | null>(null);

src/context/index.tsx

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+
+import { ContextMenuContext, ContextMenuContextProps } from './context';
+
+export interface ContextProviderProps extends ContextMenuContextProps {
+  children: ReactNode;
+}
+
+const ContextProvider = ({ hide, children }: ContextProviderProps) => {
+  return <ContextMenuContext.Provider value={{ hide }}>{children}</ContextMenuContext.Provider>;
+};
+
+export default ContextProvider;
+export { ContextMenuContext };

src/index.ts

@@ -10,4 +10,5 @@ export {
   SubMenu,
   type SubMenuProps,
 } from './components';
+export { default as ContextProvider, ContextMenuContext } from './context';
 export type { Position } from './types';

src/utils.ts

@@ -1,6 +1,5 @@
 import { Children, cloneElement, ReactElement, ReactNode } from 'react';
 
-import { MenuItemExternalProps } from './components/MenuItem';
 import { Position } from './types';
 
 export const getCursorPosition = (e: MouseEvent): Position => {
@@ -26,8 +25,8 @@ export const validateMenuPosition = (position: Position, element: HTMLDivElement
   return { x, y };
 };
 
-export const cloneChildren = (children: ReactNode, props?: MenuItemExternalProps) => {
+export const cloneChildren = (children: ReactNode) => {
   const filteredItems = Children.toArray(children).filter(Boolean);
 
-  return filteredItems.map((item) => cloneElement(item as ReactElement<any>, props));
+  return filteredItems.map((item) => cloneElement(item as ReactElement<any>));
 };