diff --git a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js index 782b917774a700..793ee06fd7a5d8 100644 --- a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js +++ b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js @@ -2,18 +2,15 @@ import React from 'react'; import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import Select from 'react-select'; import { withStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -import Input from '@material-ui/core/Input'; +import NoSSR from '@material-ui/docs/NoSSR'; import TextField from '@material-ui/core/TextField'; -import MenuItem from '@material-ui/core/MenuItem'; -import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; -import CancelIcon from '@material-ui/icons/Cancel'; -import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp'; -import ClearIcon from '@material-ui/icons/Clear'; import Chip from '@material-ui/core/Chip'; -import Select from 'react-select'; -import 'react-select/dist/react-select.css'; +import MenuItem from '@material-ui/core/MenuItem'; +import { emphasize } from '@material-ui/core/styles/colorManipulator'; const suggestions = [ { label: 'Afghanistan' }, @@ -55,184 +52,146 @@ const suggestions = [ label: suggestion.label, })); -class Option extends React.Component { - handleClick = event => { - this.props.onSelect(this.props.option, event); - }; +const styles = theme => ({ + root: { + flexGrow: 1, + height: 250, + }, + input: { + display: 'flex', + padding: 0, + }, + valueContainer: { + display: 'flex', + flex: 1, + alignItems: 'center', + }, + chip: { + margin: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 4}px`, + }, + chipFocused: { + backgroundColor: emphasize( + theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700], + 0.08, + ), + }, + noOptionsMessage: { + fontSize: 16, + padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`, + }, + singleValue: { + fontSize: 16, + }, + placeholder: { + position: 'absolute', + left: 2, + fontSize: 16, + }, +}); - render() { - const { children, isFocused, isSelected, onFocus } = this.props; +function NoOptionsMessage(props) { + return ( + + {props.children} + + ); +} - return ( - - {children} - - ); - } +function inputComponent({ inputRef, ...props }) { + return
; } -function SelectWrapped(props) { - const { classes, ...other } = props; +function Control(props) { + return ( + + ); +} +function Option(props) { return ( - - - + + +
); } diff --git a/docs/src/pages/demos/autocomplete/autocomplete.md b/docs/src/pages/demos/autocomplete/autocomplete.md index 4ca7aa163b1fa8..d16f3fdbce4a19 100644 --- a/docs/src/pages/demos/autocomplete/autocomplete.md +++ b/docs/src/pages/demos/autocomplete/autocomplete.md @@ -7,22 +7,6 @@ components: TextField, Paper, MenuItem, Popper

The autocomplete is a normal text input enhanced by a panel of suggested options.

-Material-UI doesn't provide any high-level API for solving this problem. -We encourage people relying on the solutions the React community has built. - -## downshift - -In the following example, we demonstrate how to use [downshift](https://github.com/paypal/downshift). - -{{"demo": "pages/demos/autocomplete/IntegrationDownshift.js"}} - -## react-autosuggest - -In the following example, we demonstrate how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). -It's also using [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic. - -{{"demo": "pages/demos/autocomplete/IntegrationAutosuggest.js"}} - ## react-select In the following example, we demonstrate how to use [react-select](https://github.com/JedWatson/react-select). diff --git a/package.json b/package.json index aae5134121cfad..eca406dd046c1e 100644 --- a/package.json +++ b/package.json @@ -135,7 +135,7 @@ "react-redux": "^5.0.6", "react-router": "^4.2.0", "react-router-dom": "^4.2.2", - "react-select": "^1.2.1", + "react-select": "^2.0.0", "react-swipeable-views": "^0.12.10", "react-test-renderer": "^16.1.1", "react-text-mask": "^5.0.2", diff --git a/yarn.lock b/yarn.lock index afb51861256bd4..800ec4d41b7a14 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1018,6 +1018,46 @@ lodash "^4.17.5" to-fast-properties "^2.0.0" +"@emotion/babel-utils@^0.6.4": + version "0.6.7" + resolved "https://registry.yarnpkg.com/@emotion/babel-utils/-/babel-utils-0.6.7.tgz#273910399321f91f9023d05222f6a75887ece42d" + dependencies: + "@emotion/hash" "^0.6.5" + "@emotion/memoize" "^0.6.5" + "@emotion/serialize" "^0.8.5" + convert-source-map "^1.5.1" + find-root "^1.1.0" + source-map "^0.7.2" + +"@emotion/hash@^0.6.2", "@emotion/hash@^0.6.5": + version "0.6.5" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.6.5.tgz#097729b84a5164f71f9acd2570ecfd1354d7b360" + +"@emotion/memoize@^0.6.1", "@emotion/memoize@^0.6.5": + version "0.6.5" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.5.tgz#f868c314b889e7c3d84868a1d1cc323fbb40ca86" + +"@emotion/serialize@^0.8.5": + version "0.8.5" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.8.5.tgz#169a1f7acbc18b3bc84f83d1ffddd39335c1539b" + dependencies: + "@emotion/hash" "^0.6.5" + "@emotion/memoize" "^0.6.5" + "@emotion/unitless" "^0.6.5" + "@emotion/utils" "^0.7.3" + +"@emotion/stylis@^0.6.10": + version "0.6.12" + resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.6.12.tgz#3fb58220e0fc9e380bcabbb3edde396ddc1dfe6e" + +"@emotion/unitless@^0.6.2", "@emotion/unitless@^0.6.5": + version "0.6.5" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.6.5.tgz#6a397794dc78ca7df4bf68893061709590a7ec81" + +"@emotion/utils@^0.7.3": + version "0.7.3" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.7.3.tgz#4240c5eee8af86843452af7497ac2808be04a77d" + "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde" @@ -1677,7 +1717,7 @@ babel-core@7.0.0-bridge.0: version "7.0.0-bridge.0" resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece" -babel-core@^6.26.0: +babel-core@^6.26.0, babel-core@^6.26.3: version "6.26.3" resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.3.tgz#b2e2f09e342d0f0c88e2f02e067794125e75c207" dependencies: @@ -1872,6 +1912,24 @@ babel-plugin-check-es2015-constants@^6.22.0: dependencies: babel-runtime "^6.22.0" +babel-plugin-emotion@^9.2.6: + version "9.2.6" + resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-9.2.6.tgz#992d48f316c20610c28a95ae90e6bd193014eec5" + dependencies: + "@babel/helper-module-imports" "7.0.0-beta.51" + "@emotion/babel-utils" "^0.6.4" + "@emotion/hash" "^0.6.2" + "@emotion/memoize" "^0.6.1" + "@emotion/stylis" "^0.6.10" + babel-core "^6.26.3" + babel-plugin-macros "^2.0.0" + babel-plugin-syntax-jsx "^6.18.0" + convert-source-map "^1.5.0" + find-root "^1.1.0" + mkdirp "^0.5.1" + source-map "^0.5.7" + touch "^1.0.0" + babel-plugin-istanbul@^4.1.5: version "4.1.6" resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz#36c59b2192efce81c5b378321b74175add1c9a45" @@ -1881,7 +1939,7 @@ babel-plugin-istanbul@^4.1.5: istanbul-lib-instrument "^1.10.1" test-exclude "^4.2.1" -babel-plugin-macros@^2.2.2: +babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.2.2: version "2.3.0" resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.3.0.tgz#1538e6339cbcbf093f334dc2f10f5f53043e3fda" dependencies: @@ -1948,7 +2006,7 @@ babel-plugin-syntax-flow@^6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d" -babel-plugin-syntax-jsx@6.18.0: +babel-plugin-syntax-jsx@6.18.0, babel-plugin-syntax-jsx@^6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" @@ -2970,7 +3028,7 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" -classnames@^2.2.4, classnames@^2.2.5: +classnames@^2.2.5: version "2.2.6" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" @@ -3196,7 +3254,7 @@ content-type@~1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b" -convert-source-map@1.5.1, convert-source-map@^1.1.0, convert-source-map@^1.5.1: +convert-source-map@1.5.1, convert-source-map@^1.1.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5" @@ -3272,6 +3330,18 @@ create-ecdh@^4.0.0: bn.js "^4.1.0" elliptic "^6.0.0" +create-emotion@^9.2.6: + version "9.2.6" + resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-9.2.6.tgz#f64cf1c64cf82fe7d22725d1d77498ddd2d39edb" + dependencies: + "@emotion/hash" "^0.6.2" + "@emotion/memoize" "^0.6.1" + "@emotion/stylis" "^0.6.10" + "@emotion/unitless" "^0.6.2" + csstype "^2.5.2" + stylis "^3.5.0" + stylis-rule-sheet "^0.0.10" + create-error-class@^3.0.0: version "3.0.2" resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6" @@ -3877,6 +3947,13 @@ emojis-list@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389" +emotion@^9.1.2: + version "9.2.6" + resolved "https://registry.yarnpkg.com/emotion/-/emotion-9.2.6.tgz#48517515e769bca6d8f7ff18425a7f133b010f22" + dependencies: + babel-plugin-emotion "^9.2.6" + create-emotion "^9.2.6" + encodeurl@~1.0.1, encodeurl@~1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59" @@ -6826,6 +6903,10 @@ mem@^1.1.0: dependencies: mimic-fn "^1.0.0" +memoize-one@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-4.0.0.tgz#fc5e2f1427a216676a62ec652cf7398cfad123db" + memory-fs@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.2.0.tgz#f2bb25368bc121e391c2520de92969caee0a0290" @@ -8360,7 +8441,7 @@ react-event-listener@^0.6.0: prop-types "^15.6.0" warning "^4.0.1" -react-input-autosize@^2.1.2: +react-input-autosize@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.1.tgz#ec428fa15b1592994fb5f9aa15bb1eb6baf420f8" dependencies: @@ -8441,13 +8522,17 @@ react-router@^4.2.0, react-router@^4.3.1: prop-types "^15.6.1" warning "^4.0.1" -react-select@^1.2.1: - version "1.3.0" - resolved "https://registry.yarnpkg.com/react-select/-/react-select-1.3.0.tgz#1828ad5bf7f3e42a835c7e2d8cb13b5c20714876" +react-select@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/react-select/-/react-select-2.0.0.tgz#7e7ba31eff360b37ffc52b343a720f4248bd9b3b" dependencies: - classnames "^2.2.4" - prop-types "^15.5.8" - react-input-autosize "^2.1.2" + classnames "^2.2.5" + emotion "^9.1.2" + memoize-one "^4.0.0" + prop-types "^15.6.0" + raf "^3.4.0" + react-input-autosize "^2.2.1" + react-transition-group "^2.2.1" react-swipeable-views-core@^0.12.14: version "0.12.14" @@ -9510,6 +9595,10 @@ source-map@^0.4.4: dependencies: amdefine ">=0.0.4" +source-map@^0.7.2: + version "0.7.3" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383" + spawn-wrap@^1.4.2: version "1.4.2" resolved "https://registry.yarnpkg.com/spawn-wrap/-/spawn-wrap-1.4.2.tgz#cff58e73a8224617b6561abdc32586ea0c82248c" @@ -9756,10 +9845,18 @@ stylis-rule-sheet@0.0.8: version "0.0.8" resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.8.tgz#b0d0a126c945b1f3047447a3aae0647013e8d166" +stylis-rule-sheet@^0.0.10: + version "0.0.10" + resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430" + stylis@3.4.10: version "3.4.10" resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.10.tgz#a135cab4b9ff208e327fbb5a6fde3fa991c638ee" +stylis@^3.5.0: + version "3.5.3" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.3.tgz#99fdc46afba6af4deff570825994181a5e6ce546" + supports-color@5.4.0, supports-color@^5.3.0, supports-color@^5.4.0: version "5.4.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.4.0.tgz#1c6b337402c2137605efe19f10fec390f6faab54" @@ -10015,6 +10112,12 @@ touch@3.1.0: dependencies: nopt "~1.0.10" +touch@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/touch/-/touch-1.0.0.tgz#449cbe2dbae5a8c8038e30d71fa0ff464947c4de" + dependencies: + nopt "~1.0.10" + tough-cookie@>=2.3.3, tough-cookie@^2.3.3: version "2.4.3" resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781"