Separate menu placement logic from menu primitive

docs/examples/MenuBuffer.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Select from '../../src';
+
+import { colourOptions } from '../data';
+
+export default () => (
+  <Select
+    defaultValue={colourOptions[0]}
+    options={colourOptions}
+    styles={{ menu: base => ({ ...base, marginBottom: 76 }) }}
+  />
+);

docs/examples/index.js

@@ -43,5 +43,6 @@ export { default as StyledMulti } from './StyledMulti';
 export { default as StyledSingle } from './StyledSingle';
 export { default as OnSelectResetsInput } from './OnSelectResetsInput';
 export { default as AsyncMulti } from './AsyncMulti';
+export { default as MenuBuffer } from './MenuBuffer';
 export { default as MenuPortal } from './MenuPortal';
 export { default as Theme } from './Theme';

docs/pages/advanced/index.js

@@ -14,6 +14,7 @@ import {
   CustomIsOptionDisabled,
   Experimental,
   Popout,
+  MenuBuffer,
   MenuPortal,
 } from '../../examples';
 
@@ -101,6 +102,15 @@ export default function Advanced() {
         </ExampleWrapper>
       )}
 
+      ${(
+        <ExampleWrapper
+          label="Using the style API to replace `menuBuffer`"
+          raw={require('!!raw-loader!../../examples/MenuBuffer.js')}
+        >
+          <MenuBuffer />
+        </ExampleWrapper>
+      )}
+
       ## Methods
 
       These two methods sit as callable methods on the component. They are designed

docs/pages/upgradeGuide/props.js

@@ -44,7 +44,7 @@ const propChangeData = [
   ['labelKey', 'removed'],
   ['matchPos', 'removed', md`see \`createFilter()\``],
   ['matchProp', 'removed', md`see \`createFilter()\``],
-  ['menuBuffer', 'components'],
+  ['menuBuffer', 'styles'],
   ['menuContainerStyle', 'styles'],
   ['menuRenderer', 'components'],
   ['menuStyle', 'styles'],

src/Select.js

@@ -3,6 +3,7 @@
 import React, { Component, type ElementRef, type Node } from 'react';
 
 import memoizeOne from 'memoize-one';
+import { MenuPlacer } from './components/Menu';
 import isEqual from './internal/react-fast-compare';
 
 import { createFilter } from './filters';
@@ -899,7 +900,10 @@ export default class Select extends Component<Props, State> {
   };
   onScroll = (event: Event) => {
     if (typeof this.props.closeMenuOnScroll === 'boolean') {
-      if (event.target instanceof HTMLElement && isDocumentElement(event.target)) {
+      if (
+        event.target instanceof HTMLElement &&
+        isDocumentElement(event.target)
+      ) {
         this.props.onMenuClose();
       }
     } else if (typeof this.props.closeMenuOnScroll === 'function') {
@@ -1562,9 +1566,7 @@ export default class Select extends Component<Props, State> {
       // for performance, the menu options in state aren't changed when the
       // focused option changes so we calculate additional props based on that
       const isFocused = focusedOption === props.data;
-      props.innerRef = isFocused
-        ? this.getFocusedOptionRef
-        : undefined;
+      props.innerRef = isFocused ? this.getFocusedOptionRef : undefined;
 
       return (
         <Option {...commonProps} {...props} isFocused={isFocused}>
@@ -1609,38 +1611,44 @@ export default class Select extends Component<Props, State> {
     }
 
     const menuElement = (
-      <div>
-        <Menu
-          {...commonProps}
-          innerProps={{
-            onMouseDown: this.onMenuMouseDown,
-            onMouseMove: this.onMenuMouseMove,
-          }}
-          isLoading={isLoading}
-          minMenuHeight={minMenuHeight}
-          maxMenuHeight={maxMenuHeight}
-          menuPlacement={menuPlacement}
-          menuPosition={menuPosition}
-          menuShouldScrollIntoView={menuShouldScrollIntoView}
-        >
-          <ScrollCaptor
-            isEnabled={captureMenuScroll}
-            onTopArrive={onMenuScrollToTop}
-            onBottomArrive={onMenuScrollToBottom}
+      <MenuPlacer
+        {...commonProps}
+        minMenuHeight={minMenuHeight}
+        maxMenuHeight={maxMenuHeight}
+        menuPlacement={menuPlacement}
+        menuPosition={menuPosition}
+        menuShouldScrollIntoView={menuShouldScrollIntoView}
+      >
+        {({ ref, placerProps: { placement, maxHeight } }) => (
+          <Menu
+            {...commonProps}
+            innerProps={{
+              ref,
+              onMouseDown: this.onMenuMouseDown,
+              onMouseMove: this.onMenuMouseMove,
+            }}
+            isLoading={isLoading}
+            placement={placement}
           >
-            <ScrollBlock isEnabled={menuShouldBlockScroll}>
-              <MenuList
-                {...commonProps}
-                innerRef={this.getMenuListRef}
-                isLoading={isLoading}
-                maxHeight={maxMenuHeight}
-              >
-                {menuUI}
-              </MenuList>
-            </ScrollBlock>
-          </ScrollCaptor>
-        </Menu>
-      </div>
+            <ScrollCaptor
+              isEnabled={captureMenuScroll}
+              onTopArrive={onMenuScrollToTop}
+              onBottomArrive={onMenuScrollToBottom}
+            >
+              <ScrollBlock isEnabled={menuShouldBlockScroll}>
+                <MenuList
+                  {...commonProps}
+                  innerRef={this.getMenuListRef}
+                  isLoading={isLoading}
+                  maxHeight={maxHeight}
+                >
+                  {menuUI}
+                </MenuList>
+              </ScrollBlock>
+            </ScrollCaptor>
+          </Menu>
+        )}
+      </MenuPlacer>
     );
 
     // positioning behaviour is almost identical for portalled and fixed,

src/__tests__/Select.test.js

@@ -175,7 +175,7 @@ cases(
 cases(
   'menuIsOpen prop',
   ({ props = BASIC_PROPS }) => {
-    let selectWrapper = shallow(<Select {...props} />);
+    let selectWrapper = mount(<Select {...props} />);
     expect(selectWrapper.find(Menu).exists()).toBeFalsy();
 
     selectWrapper.setProps({ menuIsOpen: true });
@@ -198,7 +198,7 @@ cases(
 cases(
   'filterOption() prop - should filter only if function returns truthy for value',
   ({ props, searchString, expectResultsLength }) => {
-    let selectWrapper = shallow(<Select {...props} />);
+    let selectWrapper = mount(<Select {...props} />);
     selectWrapper.setProps({ inputValue: searchString });
     expect(selectWrapper.find(Option).length).toBe(expectResultsLength);
   },
@@ -230,7 +230,7 @@ cases(
 cases(
   'filterOption prop is null',
   ({ props, searchString, expectResultsLength }) => {
-    let selectWrapper = shallow(<Select {...props} />);
+    let selectWrapper = mount(<Select {...props} />);
     selectWrapper.setProps({ inputValue: searchString });
     expect(selectWrapper.find(Option).length).toBe(expectResultsLength);
   },
@@ -262,7 +262,7 @@ cases(
 cases(
   'no option found on search based on filterOption prop',
   ({ props, searchString }) => {
-    let selectWrapper = shallow(<Select {...props} />);
+    let selectWrapper = mount(<Select {...props} />);
     selectWrapper.setProps({ inputValue: searchString });
     expect(selectWrapper.find(NoOptionsMessage).exists()).toBeTruthy();
   },
@@ -289,7 +289,7 @@ cases(
 cases(
   'noOptionsMessage() function prop',
   ({ props, expectNoOptionsMessage, searchString }) => {
-    let selectWrapper = shallow(<Select {...props} />);
+    let selectWrapper = mount(<Select {...props} />);
     selectWrapper.setProps({ inputValue: searchString });
     expect(selectWrapper.find(NoOptionsMessage).props().children).toBe(
       expectNoOptionsMessage