From ad608c8f1f445e70a082bae755dd30bda5b5f205 Mon Sep 17 00:00:00 2001
From: David Pordomingo <David.Pordomingo.F@gmail.com>
Date: Tue, 11 Feb 2020 12:31:15 +0100
Subject: [PATCH] Update MenuPlacer context usage to the new context API

This solves #3916, and partially addresses #3703.
From React 16.3 the old Context API was deprecated and
it's rising warnings when runng in strict-mode.
---
 .changeset/update-context-api.md             |  5 +++++
 packages/react-select/src/components/Menu.js | 23 +++++++++-----------
 2 files changed, 15 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/update-context-api.md

diff --git a/.changeset/update-context-api.md b/.changeset/update-context-api.md
new file mode 100644
index 0000000000..bdb032114a
--- /dev/null
+++ b/.changeset/update-context-api.md
@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Update MenuPlacer context usage in order to the new React Context API
diff --git a/packages/react-select/src/components/Menu.js b/packages/react-select/src/components/Menu.js
index 2777297ef4..fcdbaaf336 100644
--- a/packages/react-select/src/components/Menu.js
+++ b/packages/react-select/src/components/Menu.js
@@ -1,6 +1,7 @@
 // @flow
 /** @jsx jsx */
 import {
+  createContext,
   Component,
   type Element as ReactElement,
   type ElementRef,
@@ -8,7 +9,6 @@ import {
 } from 'react';
 import { jsx } from '@emotion/core';
 import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
 
 import {
   animatedScrollTo,
@@ -258,15 +258,16 @@ export const menuCSS = ({
   zIndex: 1,
 });
 
+const PortalPlacementContext = createContext<() => void>(() => { });
+
 // NOTE: internal only
 export class MenuPlacer extends Component<MenuPlacerProps, MenuState> {
   state = {
     maxHeight: this.props.maxMenuHeight,
     placement: null,
   };
-  static contextTypes = {
-    getPortalPlacement: PropTypes.func,
-  };
+  static contextType = PortalPlacementContext;
+
   getPlacement = (ref: ElementRef<*>) => {
     const {
       minMenuHeight,
@@ -481,14 +482,6 @@ export const menuPortalCSS = ({ rect, offset, position }: PortalStyleArgs) => ({
 
 export class MenuPortal extends Component<MenuPortalProps, MenuPortalState> {
   state = { placement: null };
-  static childContextTypes = {
-    getPortalPlacement: PropTypes.func,
-  };
-  getChildContext() {
-    return {
-      getPortalPlacement: this.getPortalPlacement,
-    };
-  }
 
   // callback for occassions where the menu must "flip"
   getPortalPlacement = ({ placement }: MenuState) => {
@@ -526,6 +519,10 @@ export class MenuPortal extends Component<MenuPortalProps, MenuPortalState> {
       <div css={getStyles('menuPortal', state)}>{children}</div>
     );
 
-    return appendTo ? createPortal(menuWrapper, appendTo) : menuWrapper;
+    return (
+      <PortalPlacementContext.Provider value={this.getPortalPlacement}>
+        {appendTo ? createPortal(menuWrapper, appendTo) : menuWrapper}
+      </PortalPlacementContext.Provider>
+    );
   }
 }