Merge pull request #1435 from habx/fix/4.1/APP-15727

APP-15727: fix deps

src/Menu/Menu.context.ts

@@ -1,5 +1,5 @@
 import * as React from 'react'
 
-export const MenuContext = React.createContext<{ close: () => void }>({
+export const MenuContext = React.createContext({
   close: () => {},
 })

src/Menu/Menu.tsx

@@ -8,6 +8,7 @@ import { breakpoints } from '../breakpoints'
 import { TogglePanel, TogglePanelProps } from '../TogglePanel'
 import { withTriggerElement } from '../withTriggerElement'
 
+import { MenuContext } from './Menu.context'
 import { MenuInstance, InnerMenuProps } from './Menu.interface'
 import { FloatingMenu, FullScreenMenu } from './Menu.style'
 
@@ -37,13 +38,19 @@ export const InnerMenu = React.forwardRef<HTMLDivElement, InnerMenuProps>(
       (modal: Modal<HTMLDivElement>) => {
         const content = isFunction(children) ? children(modal) : children
 
-        return fullScreenOnMobile && size.width < breakpoints.raw.phone ? (
-          <FullScreenMenu>{content}</FullScreenMenu>
-        ) : (
-          <FloatingMenu data-scrollable={scrollable}>{content}</FloatingMenu>
+        return (
+          <MenuContext.Provider value={{ close: onClose }}>
+            {fullScreenOnMobile && size.width < breakpoints.raw.phone ? (
+              <FullScreenMenu>{content}</FullScreenMenu>
+            ) : (
+              <FloatingMenu data-scrollable={scrollable}>
+                {content}
+              </FloatingMenu>
+            )}
+          </MenuContext.Provider>
         )
       },
-      [children]
+      [children, fullScreenOnMobile, scrollable, size.width]
     )
 
     const setStyle = React.useCallback<Required<TogglePanelProps>['setStyle']>(

src/TogglePanel/TogglePanel.tsx

@@ -78,15 +78,21 @@ const InnerTogglePanel = React.forwardRef<
       }
 
       setCustomStyle({ ...setStyle(dimensions, triggerDimensions), ...style })
-    }, [modal.ref, style, triggerRef])
+    }, [modal.ref, setStyle, style, triggerRef])
 
     React.useEffect(() => {
       if (open) {
-        onOpen?.()
         updateStyle()
       }
     }, [open, updateStyle])
 
+    React.useEffect(() => {
+      if (open) {
+        onOpen?.()
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open])
+
     const size = useWindowSize()
 
     React.useEffect(updateStyle, [children, size]) // eslint-disable-line react-hooks/exhaustive-deps