From cf125d3e9d895ef3735e9b4ad22ddd0c7f0f83fc Mon Sep 17 00:00:00 2001 From: Haider Alshamma Date: Tue, 14 Nov 2023 16:04:42 -0500 Subject: [PATCH 1/2] chore: upgrade react-select to latest version --- package.json | 2 +- yarn.lock | 157 +++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 153 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 175db2d50..3746576c4 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "react-color": "^2.18.1", "react-dom": "17.0.2", "react-router-dom": "^5.2.0", - "react-select": "^3.0.8", + "react-select": "^5.8.0", "react-test-renderer": "^16.10", "rollup": "^2.7.3", "rollup-plugin-babel": "^4.4.0", diff --git a/yarn.lock b/yarn.lock index 9b8175044..40d750996 100644 --- a/yarn.lock +++ b/yarn.lock @@ -431,7 +431,7 @@ dependencies: "@babel/types" "^7.21.4" -"@babel/helper-module-imports@^7.22.5": +"@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.22.5": version "7.22.15" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0" integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w== @@ -1797,6 +1797,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.18.3": + version "7.23.2" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885" + integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/template@^7.12.7", "@babel/template@^7.14.5": version "7.14.5" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.14.5.tgz#a9bc9d8b33354ff6e55a9c60d1109200a68974f4" @@ -2001,6 +2008,23 @@ resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70" integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw== +"@emotion/babel-plugin@^11.11.0": + version "11.11.0" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c" + integrity sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ== + dependencies: + "@babel/helper-module-imports" "^7.16.7" + "@babel/runtime" "^7.18.3" + "@emotion/hash" "^0.9.1" + "@emotion/memoize" "^0.8.1" + "@emotion/serialize" "^1.1.2" + babel-plugin-macros "^3.1.0" + convert-source-map "^1.5.0" + escape-string-regexp "^4.0.0" + find-root "^1.1.0" + source-map "^0.5.7" + stylis "4.2.0" + "@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9": version "10.0.29" resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0" @@ -2011,6 +2035,17 @@ "@emotion/utils" "0.11.3" "@emotion/weak-memoize" "0.2.5" +"@emotion/cache@^11.11.0", "@emotion/cache@^11.4.0": + version "11.11.0" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff" + integrity sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ== + dependencies: + "@emotion/memoize" "^0.8.1" + "@emotion/sheet" "^1.2.2" + "@emotion/utils" "^1.2.1" + "@emotion/weak-memoize" "^0.3.1" + stylis "4.2.0" + "@emotion/core@^10.0.9", "@emotion/core@^10.1.1": version "10.1.1" resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.1.1.tgz#c956c1365f2f2481960064bcb8c4732e5fb612c3" @@ -2037,6 +2072,11 @@ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== +"@emotion/hash@^0.9.1": + version "0.9.1" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43" + integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ== + "@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.6": version "0.8.8" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" @@ -2061,6 +2101,20 @@ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17" integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA== +"@emotion/react@^11.8.1": + version "11.11.1" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.1.tgz#b2c36afac95b184f73b08da8c214fdf861fa4157" + integrity sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA== + dependencies: + "@babel/runtime" "^7.18.3" + "@emotion/babel-plugin" "^11.11.0" + "@emotion/cache" "^11.11.0" + "@emotion/serialize" "^1.1.2" + "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1" + "@emotion/utils" "^1.2.1" + "@emotion/weak-memoize" "^0.3.1" + hoist-non-react-statics "^3.3.1" + "@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16": version "0.11.16" resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad" @@ -2072,11 +2126,27 @@ "@emotion/utils" "0.11.3" csstype "^2.5.7" +"@emotion/serialize@^1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.2.tgz#017a6e4c9b8a803bd576ff3d52a0ea6fa5a62b51" + integrity sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA== + dependencies: + "@emotion/hash" "^0.9.1" + "@emotion/memoize" "^0.8.1" + "@emotion/unitless" "^0.8.1" + "@emotion/utils" "^1.2.1" + csstype "^3.0.2" + "@emotion/sheet@0.9.4": version "0.9.4" resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5" integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA== +"@emotion/sheet@^1.2.2": + version "1.2.2" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec" + integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA== + "@emotion/styled-base@^10.0.27": version "10.0.31" resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.31.tgz#940957ee0aa15c6974adc7d494ff19765a2f742a" @@ -2105,7 +2175,12 @@ resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== -"@emotion/use-insertion-effect-with-fallbacks@^1.0.0": +"@emotion/unitless@^0.8.1": + version "0.8.1" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3" + integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ== + +"@emotion/use-insertion-effect-with-fallbacks@^1.0.0", "@emotion/use-insertion-effect-with-fallbacks@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963" integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw== @@ -2115,11 +2190,41 @@ resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924" integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw== +"@emotion/utils@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4" + integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg== + "@emotion/weak-memoize@0.2.5": version "0.2.5" resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== +"@emotion/weak-memoize@^0.3.1": + version "0.3.1" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6" + integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww== + +"@floating-ui/core@^1.4.2": + version "1.5.0" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c" + integrity sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg== + dependencies: + "@floating-ui/utils" "^0.1.3" + +"@floating-ui/dom@^1.0.1": + version "1.5.3" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa" + integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA== + dependencies: + "@floating-ui/core" "^1.4.2" + "@floating-ui/utils" "^0.1.3" + +"@floating-ui/utils@^0.1.3": + version "0.1.6" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9" + integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A== + "@gar/promisify@^1.1.3": version "1.1.3" resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6" @@ -4876,6 +4981,13 @@ dependencies: "@types/react" "*" +"@types/react-transition-group@^4.4.0": + version "4.4.9" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.9.tgz#12a1a1b5b8791067198149867b0823fbace31579" + integrity sha512-ZVNmWumUIh5NhH8aMD9CR2hdW0fNuYInlocZHaZ+dgk/1K49j1w/HoAuK1ki+pgscQrOFRTlXeoURtuzEkV3dg== + dependencies: + "@types/react" "*" + "@types/react@*": version "17.0.11" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.11.tgz#67fcd0ddbf5a0b083a0f94e926c7d63f3b836451" @@ -6331,7 +6443,7 @@ babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.8.0: cosmiconfig "^6.0.0" resolve "^1.12.0" -babel-plugin-macros@^3.0.1: +babel-plugin-macros@^3.0.1, babel-plugin-macros@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1" integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg== @@ -9285,6 +9397,11 @@ escape-string-regexp@2.0.0, escape-string-regexp@^2.0.0: resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344" integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w== +escape-string-regexp@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34" + integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA== + escodegen@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.0.0.tgz#5e32b12833e8aa8fa35e1bf0befa89380484c7dd" @@ -11044,7 +11161,7 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -13886,6 +14003,11 @@ memfs@^3.1.2: resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e" integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== +memoize-one@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045" + integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw== + memoizerific@^1.11.3: version "1.11.3" resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a" @@ -16780,7 +16902,7 @@ react-select@3.1.0: react-input-autosize "^2.2.2" react-transition-group "^4.3.0" -react-select@^3.0.8, react-select@^3.2.0: +react-select@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.2.0.tgz#de9284700196f5f9b5277c5d850a9ce85f5c72fe" integrity sha512-B/q3TnCZXEKItO0fFN/I0tWOX3WJvi/X2wtdffmwSQVRwg5BpValScTO1vdic9AxlUgmeSzib2hAZAwIUQUZGQ== @@ -16794,6 +16916,21 @@ react-select@^3.0.8, react-select@^3.2.0: react-input-autosize "^3.0.0" react-transition-group "^4.3.0" +react-select@^5.8.0: + version "5.8.0" + resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.8.0.tgz#bd5c467a4df223f079dd720be9498076a3f085b5" + integrity sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA== + dependencies: + "@babel/runtime" "^7.12.0" + "@emotion/cache" "^11.4.0" + "@emotion/react" "^11.8.1" + "@floating-ui/dom" "^1.0.1" + "@types/react-transition-group" "^4.4.0" + memoize-one "^6.0.0" + prop-types "^15.6.0" + react-transition-group "^4.3.0" + use-isomorphic-layout-effect "^1.1.2" + react-shallow-renderer@^16.13.1: version "16.15.0" resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457" @@ -17129,6 +17266,11 @@ regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55" integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew== +regenerator-runtime@^0.14.0: + version "0.14.0" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45" + integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA== + regenerator-transform@^0.14.2: version "0.14.5" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4" @@ -18700,6 +18842,11 @@ styled-system@^5.1.4: "@styled-system/variant" "^5.1.5" object-assign "^4.1.1" +stylis@4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51" + integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw== + supports-color@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" From a577f3093319e4ab41fd1ac1b4e9cf28356349fa Mon Sep 17 00:00:00 2001 From: Haider Alshamma Date: Tue, 14 Nov 2023 16:19:59 -0500 Subject: [PATCH 2/2] fix: improve AsyncSelect UX - Remove no options panel when there are no options - Add a default placeholder - Improve TypeScript support --- src/AsyncSelect/AsyncSelect.tsx | 95 ++++++++++------------- src/AsyncSelect/AsyncSelectComponents.tsx | 92 ++++++++++++++++++++++ src/Select/customReactSelectStyles.tsx | 25 +++++- src/VisualTests/WithSpace.story.tsx | 1 - src/utils/story/simulatedAPIRequest.ts | 2 +- 5 files changed, 156 insertions(+), 59 deletions(-) create mode 100644 src/AsyncSelect/AsyncSelectComponents.tsx diff --git a/src/AsyncSelect/AsyncSelect.tsx b/src/AsyncSelect/AsyncSelect.tsx index d94251773..11942a9ac 100644 --- a/src/AsyncSelect/AsyncSelect.tsx +++ b/src/AsyncSelect/AsyncSelect.tsx @@ -1,65 +1,49 @@ -import React, { useContext, forwardRef } from "react"; +import React, { forwardRef, ReactNode, MutableRefObject } from "react"; +import Select from "react-select/base"; import AsyncReactSelect from "react-select/async"; +import { AsyncProps } from "react-select/async"; +import { GroupBase } from "react-select"; import { useTranslation } from "react-i18next"; -import { ThemeContext } from "styled-components"; +import { useTheme } from "styled-components"; import propTypes from "@styled-system/prop-types"; import { Field } from "../Form"; import { MaybeFieldLabel } from "../FieldLabel"; import { InlineValidation } from "../Validation"; import customStyles from "../Select/customReactSelectStyles"; import { SelectOption } from "../Select/SelectOption"; +import { getSubset } from "../utils/subset"; import { SelectControl, SelectMultiValue, SelectClearIndicator, SelectContainer, - SelectMenu, SelectInput, SelectDropdownIndicator, -} from "../Select"; -import { getSubset } from "../utils/subset"; + SelectMenu, +} from "./AsyncSelectComponents"; -type AsyncSelectProps = { - windowThreshold?: number; - isClearable?: boolean; - filterOption?: (...args: any[]) => any; - autocomplete?: boolean; - disabled?: boolean; - error?: boolean; - errorMessage?: string; - errorList?: string[]; +type AsyncCustomProps> = { + autocomplete?: AsyncProps["isSearchable"]; labelText?: string; - helpText?: any; - noOptionsMessage?: string; requirementText?: string; - id?: string; - initialIsOpen?: boolean; - menuPosition?: string; + helpText?: ReactNode; + disabled?: AsyncProps["isDisabled"]; + errorMessage?: string; + errorList?: string[]; + initialIsOpen?: AsyncProps["defaultMenuIsOpen"]; + multiselect?: AsyncProps["isMulti"]; maxHeight?: string; - multiselect?: boolean; - name?: string; - onBlur?: (...args: any[]) => any; - onChange?: (...args: any[]) => any; - placeholder?: string; - required?: boolean; - value?: any; - defaultValue?: any; - className?: string; - classNamePrefix?: string; - menuIsOpen?: boolean; - onMenuOpen?: (...args: any[]) => any; - onMenuClose?: (...args: any[]) => any; - onInputChange?: (...args: any[]) => any; - components?: any; - closeMenuOnSelect?: boolean; - "aria-label"?: string; - cacheOptions?: boolean; - defaultOptions?: Array; - loadOptions: any; + defaultValue?: AsyncProps["defaultInputValue"]; }; +type AsyncSelectProps> = Omit< + AsyncProps, + "isSearchable" | "isDisabled" | "isMulti" | "defaultMenuIsOpen" | "defaultInputValue" +> & + AsyncCustomProps; + const AsyncSelect = forwardRef( - ( + >( { autocomplete, labelText, @@ -70,7 +54,6 @@ const AsyncSelect = forwardRef( disabled, errorMessage, errorList, - error = !!(errorMessage || errorList), id, initialIsOpen, maxHeight, @@ -95,12 +78,17 @@ const AsyncSelect = forwardRef( loadOptions, isClearable, ...props - }: AsyncSelectProps, - ref + }: AsyncSelectProps, + ref: + | ((instance: Select | null) => void) + | MutableRefObject | null> + | null ) => { const { t } = useTranslation(); - const themeContext = useContext(ThemeContext); + const theme = useTheme(); const spaceProps = getSubset(props, propTypes.space); + const error = !!(errorMessage || errorList); + return ( @@ -112,14 +100,15 @@ const AsyncSelect = forwardRef( ref={ref} defaultInputValue={defaultValue} placeholder={placeholder || t("start typing")} - labelText={labelText} - styles={customStyles({ - theme: themeContext, - error, - maxHeight, - windowed: false, - hasDefaultOptions: Boolean(defaultOptions), - })} + styles={ + customStyles({ + theme, + error, + maxHeight, + windowed: false, + hasDefaultOptions: Boolean(defaultOptions), + }) as any + } isDisabled={disabled} isSearchable={autocomplete} aria-required={required} @@ -136,7 +125,7 @@ const AsyncSelect = forwardRef( onMenuClose={onMenuClose} menuPosition={menuPosition} onInputChange={onInputChange} - theme={themeContext} + theme={theme as any} components={{ Option: SelectOption, Control: SelectControl, diff --git a/src/AsyncSelect/AsyncSelectComponents.tsx b/src/AsyncSelect/AsyncSelectComponents.tsx new file mode 100644 index 000000000..d73eb8cc4 --- /dev/null +++ b/src/AsyncSelect/AsyncSelectComponents.tsx @@ -0,0 +1,92 @@ +import React from "react"; +import { + ClearIndicatorProps, + components as selectComponents, + ContainerProps, + ControlProps, + DropdownIndicatorProps, + InputProps, + MenuProps, + MultiValueProps, +} from "react-select"; +import { components, GroupBase } from "react-select"; + +export const SelectControl = >( + props: ControlProps +) => { + // eslint-disable-next-line react/prop-types + const { isFocused } = props; + return ( +
+ +
+ ); +}; + +export const SelectMultiValue = >( + props: MultiValueProps +) => { + return ( +
+ +
+ ); +}; + +export const SelectClearIndicator = >( + props: ClearIndicatorProps +) => { + return ( +
+ +
+ ); +}; + +export const SelectDropdownIndicator = >( + props: DropdownIndicatorProps +) => { + return ( +
+ +
+ ); +}; + +export const SelectContainer = >( + props: ContainerProps +) => { + return ( +
+ +
+ ); +}; + +export const SelectInput = >( + props: InputProps +) => { + return ( +
+ +
+ ); +}; + +export const SelectMenu = >( + props: MenuProps +) => { + if (!props.selectProps.inputValue && props.options.length === 0) { + return null; + } + + return ( +
+ +
+ ); +}; diff --git a/src/Select/customReactSelectStyles.tsx b/src/Select/customReactSelectStyles.tsx index 9e07762e3..a94460fba 100644 --- a/src/Select/customReactSelectStyles.tsx +++ b/src/Select/customReactSelectStyles.tsx @@ -83,6 +83,7 @@ const customStyles = ({ height: 38, }), control: (provided, state) => ({ + ...provided, display: "flex", minHeight: theme.space.x5, paddingLeft: theme.space.x1, @@ -156,9 +157,18 @@ const customStyles = ({ ...provided, color: theme.colors.grey, }), + singleValue: (provided) => ({ + ...provided, + marginLeft: 2, + marginRight: 2, + position: "absolute", + top: "50%", + transform: "translateY(-50%)", + }), input: () => ({}), valueContainer: (provided, state) => ({ ...provided, + display: "flex", padding: 0, overflow: "auto", maxHeight: "150px", @@ -299,10 +309,17 @@ const customStyles = ({ : "none", borderLeft: `1px solid ${theme.colors.grey}`, }), - placeholder: (provided, state) => ({ - ...provided, - color: state.isDisabled ? transparentize(0.6667, theme.colors.black) : "hsl(0,0%,50%)", - }), + placeholder: (state) => { + return { + label: "placeholder", + marginLeft: 2, + marginRight: 2, + position: "absolute", + top: "50%", + transform: "translateY(-50%)", + color: state.isDisabled ? transparentize(0.6667, theme.colors.black) : "hsl(0,0%,50%)", + }; + }, }; }; diff --git a/src/VisualTests/WithSpace.story.tsx b/src/VisualTests/WithSpace.story.tsx index 0ee1e2ff7..f4182e8ff 100644 --- a/src/VisualTests/WithSpace.story.tsx +++ b/src/VisualTests/WithSpace.story.tsx @@ -44,7 +44,6 @@ export const _AsyncSelect = () => ( className="Select" classNamePrefix="SelectTest" labelText="Country" - loadOptions="" {...spaceProps} /> ); diff --git a/src/utils/story/simulatedAPIRequest.ts b/src/utils/story/simulatedAPIRequest.ts index 87e673b34..d044f6694 100644 --- a/src/utils/story/simulatedAPIRequest.ts +++ b/src/utils/story/simulatedAPIRequest.ts @@ -4,7 +4,7 @@ const simulatedAPIRequest = async ( milliseconds = 450 ): Promise => { const country = data.find((country) => { - return country.value.toLowerCase().startsWith(inputValue); + return country.value.toLowerCase().startsWith(inputValue.toLowerCase()); }); const responseBody = JSON.stringify([{ name: country.value }]);