Merge branch 'master' of github.com:JedWatson/react-select into fix-s…

…croll-issue

.changeset/great-actors-end.md

@@ -0,0 +1,5 @@
+---
+"react-select": patch
+---
+
+Adds react ^17.0.0 to peer dependencies for React 17 support

.changeset/lazy-singers-applaud.md

@@ -0,0 +1,5 @@
+---
+"react-select": patch
+---
+
+Creatable: Fixed removing MultiValues that have identical values. See issue #4137 for details.

.changeset/lemon-boats-cover.md

@@ -0,0 +1,5 @@
+---
+"react-select": patch
+---
+
+Added a guard to the `ScrollCaptor` component to check that `el` exists before calling `removeEventListener`, fixes intermittent errors

.changeset/nasty-coats-fly.md

@@ -0,0 +1,7 @@
+---
+"react-select": minor
+---
+
+Changed the `cx` and `getValue` props that are passed to components into instance properties, which means they now pass a referential equality check on subsequent renders.
+
+This is helpful, for example, when you're optimising the performance of rendering custom Option components - see [#3055](https://github.com/JedWatson/react-select/issues/3055)

.changeset/silly-donkeys-return.md

@@ -0,0 +1,5 @@
+---
+"react-select": patch
+---
+
+Updated react-input-autosize to v3.0.0

.changeset/ten-apples-tap.md

@@ -0,0 +1,5 @@
+---
+'react-select': minor
+---
+
+Remove duplicate prop createOptionPosition

.changeset/wicked-turkeys-brush.md

@@ -0,0 +1,7 @@
+---
+"react-select": patch
+---
+
+Added `innerProps` prop to the built-in `MenuList` component to reduce the need for additional DOM nodes or forking internal code when passing additional props to the DOM element the MenuList component is rendering.
+
+See issue [#4265](https://github.com/JedWatson/react-select/issues/4265) for an explanation.

.circleci/config.yml

@@ -70,5 +70,5 @@ jobs:
                   command: |
                       yarn global add cypress
                       yarn install --silent
-                      cypress install
+                      yarn cypress install
                       yarn e2e

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018 Jed Watson
+Copyright (c) 2020 Jed Watson
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -158,4 +158,4 @@ Shout out to [Joss Mackison](https://github.com/jossmac), [Charles Lee](https://
 
 ## License
 
-MIT Licensed. Copyright (c) Jed Watson 2019.
+MIT Licensed. Copyright (c) Jed Watson 2020.

docs/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @react-select/docs
 
+## 2.4.6
+
+### Patch Changes
+
+- [7af1aafb](https://github.com/JedWatson/react-select/commit/7af1aafb2314db02544b7970784b868e97ec4824) [#4295](https://github.com/JedWatson/react-select/pull/4295) Thanks [@JedWatson](https://github.com/JedWatson)! - Fix menuplacement context
+
+- Updated dependencies [c8d74bd5]:
+- Updated dependencies [c8447f48]:
+- Updated dependencies [7af1aafb]:
+- Updated dependencies [32ad5c04]:
+- Updated dependencies [6af14fbb]:
+- Updated dependencies [0eb1ef96]:
+- Updated dependencies [ad608c8f]:
+  - react-select@undefined
+
 ## 2.4.5
+
 - Updated dependencies [[9ad152b](https://github.com/JedWatson/react-select/commit/9ad152b)]:
   - react-select@3.0.0

docs/examples/CustomNoOptionsMessage.js

@@ -20,7 +20,7 @@ const CustomNoOptionsMessage = () => {
     <Select
       isClearable
       components={{ NoOptionsMessage }}
-      styles={{ NoOptionsMessage: base => ({ ...base, ...msgStyles }) }}
+      styles={{ noOptionsMessage: base => ({ ...base, ...msgStyles }) }}
       isSearchable
       name="color"
       options={[]}

docs/examples/MenuPortal.js

@@ -51,6 +51,7 @@ export default class MenuPortal extends Component<*, State> {
               menuPosition={isFixed ? 'fixed' : 'absolute'}
               menuPlacement={portalPlacement}
               options={colourOptions}
+              menuShouldScrollIntoView={false}
             />
             <Note Tag="label">
               <select

docs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-select/docs",
   "private": true,
-  "version": "2.4.5",
+  "version": "2.4.6",
   "author": "Jed Watson",
   "license": "MIT",
   "dependencies": {
@@ -40,7 +40,7 @@
     "react-helmet": "^5.2.0",
     "react-markings": "^1.3.0",
     "react-router-dom": "^4.2.2",
-    "react-select": "^3.0.0",
+    "react-select": "^3.1.1",
     "react-sortable-hoc": "^1.9.1",
     "react-syntax-highlighter": "^7.0.1",
     "style-loader": "^0.23.1",

package.json

@@ -64,7 +64,7 @@
     "jest-in-case": "^1.0.2",
     "memoize-one": "^5.0.0",
     "moment": "^2.20.1",
-    "node-fetch": "^2.5.0",
+    "node-fetch": "^2.6.1",
     "pretty-proptypes": "^0.5.0",
     "prop-types": "^15.6.0",
     "raf": "^3.4.0",
@@ -74,7 +74,7 @@
     "react-codesandboxer": "^2.0.1",
     "react-dom": "^16.13.0",
     "react-helmet": "^5.2.0",
-    "react-input-autosize": "^2.2.2",
+    "react-input-autosize": "^3.0.0",
     "react-markings": "^1.3.0",
     "react-router-dom": "^4.2.2",
     "react-sortable-hoc": "^1.9.1",

packages/react-select/CHANGELOG.md

@@ -1,5 +1,26 @@
 # react-select
 
+## 3.1.1
+
+### Patch Changes
+
+- [c8d74bd5](https://github.com/JedWatson/react-select/commit/c8d74bd5710b1db6736837fb4334a59e46614a27) [#3979](https://github.com/JedWatson/react-select/pull/3979) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Fix repository field
+
+- [c8447f48](https://github.com/JedWatson/react-select/commit/c8447f480f8b9ca04386bee08e8d3a6fbb4f07c8) [#4034](https://github.com/JedWatson/react-select/pull/4034) Thanks [@sophiebits](https://github.com/sophiebits)! - Improve performance of option filtering when ignoreAccents is enabled (the default)
+
+- [7af1aafb](https://github.com/JedWatson/react-select/commit/7af1aafb2314db02544b7970784b868e97ec4824) [#4295](https://github.com/JedWatson/react-select/pull/4295) Thanks [@JedWatson](https://github.com/JedWatson)! - Fix menuplacement context
+
+- [32ad5c04](https://github.com/JedWatson/react-select/commit/32ad5c040bdd96cd1ca71010c2558842d684629c) [#3892](https://github.com/JedWatson/react-select/pull/3892) Thanks [@flexdinesh](https://github.com/flexdinesh)! - Fix react-select ignoring HTML5 "form" attribute
+
+- [6af14fbb](https://github.com/JedWatson/react-select/commit/6af14fbbc8ab42f2d17721732c9fe221d47c9e30) [#3897](https://github.com/JedWatson/react-select/pull/3897) Thanks [@lorisdev](https://github.com/lorisdev)! - Removes the call to `onMenuOpen` on every input change
+
+  If you were relying on this undesired behavior it may be a breaking change.
+  Please upgrade accordingly.
+
+- [0eb1ef96](https://github.com/JedWatson/react-select/commit/0eb1ef9625de907fddaf29516cec3bd93bf9c5f7) Thanks [@JedWatson](https://github.com/JedWatson)! - Fixes touch issues in IE11
+
+- [ad608c8f](https://github.com/JedWatson/react-select/commit/ad608c8f1f445e70a082bae755dd30bda5b5f205) [#3928](https://github.com/JedWatson/react-select/pull/3928) Thanks [@dpordomingo](https://github.com/dpordomingo)! - Update MenuPlacer context usage in order to the new React Context API
+
 ## 3.1.0
 
 ### Minor Changes

packages/react-select/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-select",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "A Select control built with and for ReactJS",
   "main": "dist/react-select.cjs.js",
   "module": "dist/react-select.esm.js",
@@ -15,7 +15,7 @@
     "@emotion/css": "^10.0.9",
     "memoize-one": "^5.0.0",
     "prop-types": "^15.6.0",
-    "react-input-autosize": "^2.2.2",
+    "react-input-autosize": "^3.0.0",
     "react-transition-group": "^4.3.0"
   },
   "devDependencies": {
@@ -26,8 +26,8 @@
     "react-dom": "^16.13.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
   },
   "files": [
     "dist",

packages/react-select/src/Creatable.js

@@ -36,8 +36,6 @@ export type CreatableProps = {
      created, and `onChange` will **not** be called. Use this when you need more
      control over what happens when new options are created. */
   onCreateOption?: string => void,
-  /* Sets the position of the createOption element in your options list. Defaults to 'last' */
-  createOptionPosition: 'first' | 'last',
   /* Name of the HTML Input (optional - without this, no input will be rendered) */
   name?: string,
   options?: OptionsType,

packages/react-select/src/Select.js

@@ -742,14 +742,15 @@ export default class Select extends Component<Props, State> {
     };
   }
 
+  getValue = () => this.state.selectValue;
+
+  cx = (...args: any) => classNames(this.props.classNamePrefix, ...args);
+
   getCommonProps() {
-    const { clearValue, getStyles, setValue, selectOption, props } = this;
-    const { classNamePrefix, isMulti, isRtl, options } = props;
-    const { selectValue } = this.state;
+    const { clearValue, cx, getStyles, getValue, setValue, selectOption, props } = this;
+    const { isMulti, isRtl, options } = props;
     const hasValue = this.hasValue();
-    const getValue = () => selectValue;
 
-    const cx = classNames.bind(null, classNamePrefix);
     return {
       cx,
       clearValue,
@@ -1520,7 +1521,7 @@ export default class Select extends Component<Props, State> {
             }}
             isFocused={isOptionFocused}
             isDisabled={isDisabled}
-            key={this.getOptionValue(opt)}
+            key={`${this.getOptionValue(opt)}${index}`}
             index={index}
             removeProps={{
               onClick: () => this.removeValue(opt),

packages/react-select/src/components/Menu.js

@@ -258,7 +258,9 @@ export const menuCSS = ({
   zIndex: 1,
 });
 
-const PortalPlacementContext = createContext<() => void>(() => { });
+const PortalPlacementContext = createContext<{
+  getPortalPlacement?: (() => void) | null,
+}>({ getPortalPlacement: null });
 
 // NOTE: internal only
 export class MenuPlacer extends Component<MenuPlacerProps, MenuState> {
@@ -277,7 +279,6 @@ export class MenuPlacer extends Component<MenuPlacerProps, MenuState> {
       menuShouldScrollIntoView,
       theme,
     } = this.props;
-    const { getPortalPlacement } = this.context;
 
     if (!ref) return;
 
@@ -295,6 +296,7 @@ export class MenuPlacer extends Component<MenuPlacerProps, MenuState> {
       theme,
     });
 
+    const { getPortalPlacement } = this.context;
     if (getPortalPlacement) getPortalPlacement(state);
 
     this.setState(state);
@@ -348,6 +350,8 @@ export type MenuListProps = {
   children: Node,
   /** Inner ref to DOM Node */
   innerRef: InnerRef,
+    /** Props to be passed to the menu-list wrapper. */
+  innerProps: {},
 };
 export type MenuListComponentProps = CommonProps &
   MenuListProps &
@@ -366,7 +370,7 @@ export const menuListCSS = ({
   WebkitOverflowScrolling: 'touch',
 });
 export const MenuList = (props: MenuListComponentProps) => {
-  const { children, className, cx, getStyles, isMulti, innerRef } = props;
+  const { children, className, cx, getStyles, isMulti, innerRef, innerProps } = props;
   return (
     <div
       css={getStyles('menuList', props)}
@@ -378,6 +382,7 @@ export const MenuList = (props: MenuListComponentProps) => {
         className
       )}
       ref={innerRef}
+      {...innerProps}
     >
       {children}
     </div>
@@ -520,7 +525,9 @@ export class MenuPortal extends Component<MenuPortalProps, MenuPortalState> {
     );
 
     return (
-      <PortalPlacementContext.Provider value={this.getPortalPlacement}>
+      <PortalPlacementContext.Provider
+        value={{ getPortalPlacement: this.getPortalPlacement }}
+      >
         {appendTo ? createPortal(menuWrapper, appendTo) : menuWrapper}
       </PortalPlacementContext.Provider>
     );

packages/react-select/src/internal/ScrollCaptor.js

@@ -59,6 +59,8 @@ class ScrollCaptor extends Component<CaptorProps> {
     this.isListened = true;
   }
   stopListening(el: HTMLElement) {
+    if (!el) return;
+
     // all the if statements are to appease Flow 😢
     if (typeof el.removeEventListener === 'function') {
       el.removeEventListener('wheel', this.onWheel, false);