fix: Adjust function declarations

Author: totase

src/components/ContextMenu.tsx

@@ -47,7 +47,7 @@ const ContextMenu = ({
 
   const contextMenuRef = useRef<HTMLDivElement>(null);
 
-  const show = (event: MouseEvent) => {
+  function show(event: MouseEvent) {
     let position = getCursorPosition(event);
     position = validateMenuPosition(position, contextMenuRef.current);
 
@@ -57,18 +57,18 @@ const ContextMenu = ({
     event.preventDefault();
 
     setState((prev) => ({ ...prev, active: true, position }));
-  };
+  }
 
-  const hide = () => {
+  function hide() {
     if (animateExit) setState((prev) => ({ ...prev, leaving: true }));
     else setState((prev) => ({ ...prev, active: false }));
-  };
+  }
 
-  const handleAnimationEnd = () => {
+  function handleAnimationEnd() {
     const { leaving, active } = state;
 
     if (leaving && active) setState(() => ({ position: { x: 0, y: 0 }, active: false, leaving: false }));
-  };
+  }
 
   useEffect(() => {
     const { position } = state;

src/components/MenuItem.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, ButtonHTMLAttributes, useContext } from 'react';
+import { useState, ButtonHTMLAttributes, useContext } from 'react';
 import cx from 'clsx';
 
 import { ContextMenuContext } from '../context';
@@ -14,21 +14,20 @@ const MenuItem = ({ children, onClick, className, disabled = false, ...rest }: M
   const context = useContext(ContextMenuContext);
   const [state, setState] = useState<MenuItemState>({ clicked: false, eventRef: null });
 
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+  function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
     event.stopPropagation();
 
     if (onClick) setState({ clicked: true, eventRef: event });
-  };
+  }
 
-  const handleAnimationEnd = useCallback(() => {
+  function handleAnimationEnd() {
     setState((prev) => ({ ...prev, clicked: false }));
 
     if (state.clicked && state.eventRef) {
       context?.hide();
       onClick!(state.eventRef);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.clicked, state.eventRef]);
+  }
 
   const classNames = cx('react-context-menu__item', className, {
     'react-context-menu__item--disabled': disabled,

src/components/SubMenu.tsx

@@ -37,11 +37,11 @@ const SubMenu = ({
     };
   }, []);
 
-  const clearTimer = () => {
+  function clearTimer() {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
-  };
+  }
 
-  const calculatePosition = () => {
+  function calculatePosition() {
     if (subMenuRef.current && itemRef.current) {
       clearTimer();
       setActive(true);
@@ -59,15 +59,15 @@ const SubMenu = ({
         subMenuRef.current.classList.add(BOTTOM_CLASS);
       }
     }
-  };
+  }
 
-  const onLeave = () => {
+  function onLeave() {
     clearTimer();
 
     timeoutRef.current = setTimeout(() => {
       setActive(false);
     }, CLOSE_DELAY);
-  };
+  }
 
   const classNames = cx('react-context-menu__item', className, {
     'react-context-menu__item--disabled': disabled,

src/stories/ContextMenu.stories.tsx

@@ -120,3 +120,21 @@ export const SubMenu: Story = {
     </StoryWrapper>
   ),
 };
+
+export const SubMenuIndicator: Story = {
+  args: {
+    children: [
+      <ContextMenu.Item onClick={() => clickFunction()}>Item 1</ContextMenu.Item>,
+      <ContextMenu.Separator />,
+      <ContextMenu.SubMenu label="Sub Menu" iconElement={<span>▶</span>}>
+        <ContextMenu.Item onClick={() => clickFunction()}>Sub item 2</ContextMenu.Item>
+        <ContextMenu.Item onClick={() => clickFunction()}>Sub item 3</ContextMenu.Item>
+      </ContextMenu.SubMenu>,
+    ],
+  },
+  render: (args) => (
+    <StoryWrapper triggerId={TRIGGER_ID}>
+      <ContextMenu {...args} />
+    </StoryWrapper>
+  ),
+};