diff --git a/changelogs/DP-13800.md b/changelogs/DP-13800.md new file mode 100644 index 0000000000..1b68bdb3b5 --- /dev/null +++ b/changelogs/DP-13800.md @@ -0,0 +1,4 @@ +___DESCRIPTION___ +Minor +Added +- (React) [InputTextFuzzy] DP-13800: Adds prop onKeyDownPreventDefault. When set to true, hitting enter without a valid suggestion will trigger event.preventDefault(). diff --git a/react/backstop/data/bitmaps_reference/vrt_atoms_forms_InputTextFuzzy_0_document_0_small_atom.png b/react/backstop/data/bitmaps_reference/vrt_atoms_forms_InputTextFuzzy_0_document_0_small_atom.png index 07bae24670..6f94c1ea8a 100644 Binary files a/react/backstop/data/bitmaps_reference/vrt_atoms_forms_InputTextFuzzy_0_document_0_small_atom.png and b/react/backstop/data/bitmaps_reference/vrt_atoms_forms_InputTextFuzzy_0_document_0_small_atom.png differ diff --git a/react/package-lock.json b/react/package-lock.json index bc62c6348e..d8e61645bf 100644 --- a/react/package-lock.json +++ b/react/package-lock.json @@ -5191,6 +5191,7 @@ "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.2.1.tgz", "integrity": "sha512-JVwXMr9nHYTUXsBFKUqhJwvlcYU/blreOEUkhNR2eXZIvwd+c+o5V4MgDPKWnMS/56awN3TRzIP+KoPn+roQtg==", "dev": true, + "optional": true, "requires": { "es6-promisify": "^5.0.0" } @@ -6100,13 +6101,15 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz", "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=", - "dev": true + "dev": true, + "optional": true }, "is-glob": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz", "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=", "dev": true, + "optional": true, "requires": { "is-extglob": "^1.0.0" } @@ -8368,6 +8371,7 @@ "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz", "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=", "dev": true, + "optional": true, "requires": { "hoek": "2.x.x" } @@ -8640,7 +8644,8 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/buffer-more-ints/-/buffer-more-ints-1.0.0.tgz", "integrity": "sha512-EMetuGFz5SLsT0QTnXzINh4Ksr+oo4i+UGTXEshiGCQWnsgSs7ZhJ8fzlwQ+OzEMs0MpDAMr1hxnblp5a4vcHg==", - "dev": true + "dev": true, + "optional": true }, "buffer-xor": { "version": "1.0.3", @@ -8983,7 +8988,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -9001,11 +9007,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -9018,15 +9026,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -9129,7 +9140,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -9139,6 +9151,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -9151,17 +9164,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -9178,6 +9194,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -9250,7 +9267,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -9260,6 +9278,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -9335,7 +9354,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -9365,6 +9385,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -9382,6 +9403,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -9420,11 +9442,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.0.3", - "bundled": true + "bundled": true, + "optional": true } } }, @@ -11667,6 +11691,7 @@ "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz", "integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=", "dev": true, + "optional": true, "requires": { "es6-promise": "^4.0.3" } @@ -12989,7 +13014,8 @@ "ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "optional": true }, "aproba": { "version": "1.2.0", @@ -13010,12 +13036,14 @@ "balanced-match": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", + "optional": true }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -13030,17 +13058,20 @@ "code-point-at": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", + "optional": true }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", + "optional": true }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -13157,7 +13188,8 @@ "inherits": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "optional": true }, "ini": { "version": "1.3.5", @@ -13169,6 +13201,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -13183,6 +13216,7 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -13190,12 +13224,14 @@ "minimist": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", + "optional": true }, "minipass": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.2.4.tgz", "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==", + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -13214,6 +13250,7 @@ "version": "0.5.1", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "optional": true, "requires": { "minimist": "0.0.8" } @@ -13294,7 +13331,8 @@ "number-is-nan": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", + "optional": true }, "object-assign": { "version": "4.1.1", @@ -13306,6 +13344,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", + "optional": true, "requires": { "wrappy": "1" } @@ -13391,7 +13430,8 @@ "safe-buffer": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", - "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==" + "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==", + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -13427,6 +13467,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -13446,6 +13487,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -13489,12 +13531,14 @@ "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", + "optional": true }, "yallist": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz", - "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=" + "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=", + "optional": true } } }, @@ -14234,7 +14278,8 @@ "version": "2.16.3", "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz", "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=", - "dev": true + "dev": true, + "optional": true }, "hoist-non-react-statics": { "version": "3.3.0", @@ -14472,6 +14517,7 @@ "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-2.1.0.tgz", "integrity": "sha512-qwHbBLV7WviBl0rQsOzH6o5lwyOIvwp/BdFnvVxXORldu5TmjFfjzBcWUWS5kWAZhmv+JtiDhSuQCp4sBfbIgg==", "dev": true, + "optional": true, "requires": { "agent-base": "4", "debug": "3.1.0" @@ -14482,6 +14528,7 @@ "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", "dev": true, + "optional": true, "requires": { "ms": "2.0.0" } @@ -14514,6 +14561,7 @@ "resolved": "https://registry.npmjs.org/httpntlm/-/httpntlm-1.6.1.tgz", "integrity": "sha1-rQFScUOi6Hc8+uapb1hla7UqNLI=", "dev": true, + "optional": true, "requires": { "httpreq": ">=0.4.22", "underscore": "~1.7.0" @@ -14523,7 +14571,8 @@ "version": "0.4.24", "resolved": "https://registry.npmjs.org/httpreq/-/httpreq-0.4.24.tgz", "integrity": "sha1-QzX/2CzZaWaKOUZckprGHWOTYn8=", - "dev": true + "dev": true, + "optional": true }, "https-browserify": { "version": "1.0.0", @@ -14535,6 +14584,7 @@ "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.1.tgz", "integrity": "sha512-HPCTS1LW51bcyMYbxUIOO4HEOlQ1/1qRaFWcyxvwaqUS9TY88aoEuHUY33kuAh1YhVVaDQhLZsnPd+XNARWZlQ==", "dev": true, + "optional": true, "requires": { "agent-base": "^4.1.0", "debug": "^3.1.0" @@ -14545,6 +14595,7 @@ "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", "dev": true, + "optional": true, "requires": { "ms": "^2.1.1" } @@ -14553,7 +14604,8 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", - "dev": true + "dev": true, + "optional": true } } }, @@ -15188,7 +15240,8 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz", "integrity": "sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ=", - "dev": true + "dev": true, + "optional": true }, "is-regex": { "version": "1.0.4", @@ -17126,13 +17179,15 @@ "version": "0.1.0", "resolved": "https://registry.npmjs.org/libbase64/-/libbase64-0.1.0.tgz", "integrity": "sha1-YjUag5VjrF/1vSbxL2Dpgwu3UeY=", - "dev": true + "dev": true, + "optional": true }, "libmime": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/libmime/-/libmime-3.0.0.tgz", "integrity": "sha1-UaGp50SOy9Ms2lRCFnW7IbwJPaY=", "dev": true, + "optional": true, "requires": { "iconv-lite": "0.4.15", "libbase64": "0.1.0", @@ -17143,7 +17198,8 @@ "version": "0.4.15", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.15.tgz", "integrity": "sha1-/iZaIYrGpXz+hUkn6dBMGYJe3es=", - "dev": true + "dev": true, + "optional": true } } }, @@ -17151,7 +17207,8 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/libqp/-/libqp-1.1.0.tgz", "integrity": "sha1-9ebgatdLeU+1tbZpiL9yjvHe2+g=", - "dev": true + "dev": true, + "optional": true }, "load-json-file": { "version": "2.0.0", @@ -18687,13 +18744,15 @@ "version": "1.6.0", "resolved": "https://registry.npmjs.org/nodemailer-fetch/-/nodemailer-fetch-1.6.0.tgz", "integrity": "sha1-ecSQihwPXzdbc/6IjamCj23JY6Q=", - "dev": true + "dev": true, + "optional": true }, "nodemailer-shared": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/nodemailer-shared/-/nodemailer-shared-1.1.0.tgz", "integrity": "sha1-z1mU4v0mjQD1zw+nZ6CBae2wfsA=", "dev": true, + "optional": true, "requires": { "nodemailer-fetch": "1.6.0" } @@ -18726,7 +18785,8 @@ "version": "0.1.10", "resolved": "https://registry.npmjs.org/nodemailer-wellknown/-/nodemailer-wellknown-0.1.10.tgz", "integrity": "sha1-WG24EB2zDLRDjrVGc3pBqtDPE9U=", - "dev": true + "dev": true, + "optional": true }, "noop2": { "version": "2.0.0", @@ -22022,19 +22082,19 @@ } }, "react-autosuggest": { - "version": "9.3.4", - "resolved": "https://registry.npmjs.org/react-autosuggest/-/react-autosuggest-9.3.4.tgz", - "integrity": "sha512-vcAsZw+6zkjimni4aun1tvuzVCGilmFihAgF8yCeVm/p82ssGgtQb0pnNCcEBcPzPTLJjQc2O8dLJidoOyjlcA==", + "version": "9.4.3", + "resolved": "https://registry.npmjs.org/react-autosuggest/-/react-autosuggest-9.4.3.tgz", + "integrity": "sha512-wFbp5QpgFQRfw9cwKvcgLR8theikOUkv8PFsuLYqI2PUgVlx186Cz8MYt5bLxculi+jxGGUUVt+h0esaBZZouw==", "requires": { "prop-types": "^15.5.10", - "react-autowhatever": "^10.1.0", + "react-autowhatever": "^10.1.2", "shallow-equal": "^1.0.0" } }, "react-autowhatever": { - "version": "10.1.2", - "resolved": "https://registry.npmjs.org/react-autowhatever/-/react-autowhatever-10.1.2.tgz", - "integrity": "sha512-+0XgELT1LF7hHEJv5H5Zwkfb4Q1rqmMZZ5U/XJ2J+UcSPRKnG6CqEjXUJ+hYLXDHgvDqwEN5PBdxczD5rHvOuA==", + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/react-autowhatever/-/react-autowhatever-10.2.0.tgz", + "integrity": "sha512-dqHH4uqiJldPMbL8hl/i2HV4E8FMTDEdVlOIbRqYnJi0kTpWseF9fJslk/KS9pGDnm80JkYzVI+nzFjnOG/u+g==", "requires": { "prop-types": "^15.5.8", "react-themeable": "^1.1.0", @@ -25389,9 +25449,9 @@ } }, "shallow-equal": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.0.0.tgz", - "integrity": "sha1-UI0YOLPeWQq4dXsBGyXkMJAJRfc=" + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.1.0.tgz", + "integrity": "sha512-0SW1nWo1hnabO62SEeHsl8nmTVVEzguVWZCj5gaQrgWAxz/BaCja4OWdJBWLVPDxdtE/WU7c98uUCCXyPHSCvw==" }, "shallowequal": { "version": "1.1.0", @@ -25509,13 +25569,15 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.0.2.tgz", "integrity": "sha512-JDhEpTKzXusOqXZ0BUIdH+CjFdO/CR3tLlf5CN34IypI+xMmXW1uB16OOY8z3cICbJlDAVJzNbwBhNO0wt9OAw==", - "dev": true + "dev": true, + "optional": true }, "smtp-connection": { "version": "2.12.0", "resolved": "https://registry.npmjs.org/smtp-connection/-/smtp-connection-2.12.0.tgz", "integrity": "sha1-1275EnyyPCJZ7bHoNJwujV4tdME=", "dev": true, + "optional": true, "requires": { "httpntlm": "1.6.1", "nodemailer-shared": "1.1.0" @@ -25734,6 +25796,7 @@ "resolved": "https://registry.npmjs.org/socks/-/socks-2.2.3.tgz", "integrity": "sha512-+2r83WaRT3PXYoO/1z+RDEBE7Z2f9YcdQnJ0K/ncXXbV5gJ6wYfNAebYFYiiUjM6E4JyXnPY8cimwyvFYHVUUA==", "dev": true, + "optional": true, "requires": { "ip": "^1.1.5", "smart-buffer": "4.0.2" @@ -25744,6 +25807,7 @@ "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-4.0.1.tgz", "integrity": "sha512-Kezx6/VBguXOsEe5oU3lXYyKMi4+gva72TwJ7pQY5JfqUx2nMk7NXA6z/mpNqIlfQjWYVfeuNvQjexiTaTn6Nw==", "dev": true, + "optional": true, "requires": { "agent-base": "~4.2.0", "socks": "~2.2.0" @@ -27476,7 +27540,8 @@ "version": "1.7.0", "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.7.0.tgz", "integrity": "sha1-a7rwh3UA02vjTsqlhODbn+8DUgk=", - "dev": true + "dev": true, + "optional": true }, "unicode-canonical-property-names-ecmascript": { "version": "1.0.4", diff --git a/react/package.json b/react/package.json index e51830697e..3bbde5de88 100644 --- a/react/package.json +++ b/react/package.json @@ -46,9 +46,9 @@ "numbro": "^2.1.2", "object.entries": "^1.0.4", "pikaday": "^1.7.0", - "react-autosuggest": "^9.3.4", - "react-autowhatever": "^10.1.2", "react-character-counter": "^1.0.1", + "react-autosuggest": "^9.4.3", + "react-autowhatever": "^10.2.0", "react-compound-slider": "^0.19.2", "react-scripts": "^2.1.3", "react-select": "^1.2.1", diff --git a/react/src/components/atoms/forms/InputTextFuzzy/InputTextFuzzy.stories.js b/react/src/components/atoms/forms/InputTextFuzzy/InputTextFuzzy.stories.js index 6ad90f6c10..95e70cb3da 100644 --- a/react/src/components/atoms/forms/InputTextFuzzy/InputTextFuzzy.stories.js +++ b/react/src/components/atoms/forms/InputTextFuzzy/InputTextFuzzy.stories.js @@ -33,8 +33,12 @@ storiesOf('atoms/forms', module) minMatchCharLength: 1, maxPatternLength: 300 }), - onChange: action('fuzzy input onChange'), - onSuggestionClick: action('fuzzy suggestion onClick'), + onKeyDown: action('onKeyDown event'), + onKeyUp: action('onKeyUp event'), + onChange: action('onChange event'), + onFocus: action('onFocus event'), + onBlur: action('onBlur event'), + onSuggestionClick: action('onSuggestionClick called'), renderDefaultSuggestion: boolean('fuzzy renderDefaultSuggestion', true) }; return(); diff --git a/react/src/components/atoms/forms/InputTextFuzzy/index.js b/react/src/components/atoms/forms/InputTextFuzzy/index.js index ae8b34c426..e021e15dcb 100644 --- a/react/src/components/atoms/forms/InputTextFuzzy/index.js +++ b/react/src/components/atoms/forms/InputTextFuzzy/index.js @@ -1,7 +1,7 @@ import React from 'react'; +import Autosuggest from 'react-autosuggest'; import PropTypes from 'prop-types'; import Fuse from 'fuse.js'; -import Autowhatever from 'react-autowhatever'; import parse from 'autosuggest-highlight/parse'; import classNames from 'classnames'; import is from 'is'; @@ -13,146 +13,87 @@ class InputTextFuzzy extends React.Component { super(props); this.state = { value: this.props.selected || '', - suggestions: [], - highlightedItemIndex: null + suggestions: [] }; - const { fuseOptions, keys, options } = this.props; - fuseOptions.keys = [...keys]; - const defaultOptions = JSON.parse(JSON.stringify(options)); - let allResultsOptions = JSON.parse(JSON.stringify(options)); - // Default Fuse object. - this.fuse = new Fuse(defaultOptions, fuseOptions); - allResultsOptions = allResultsOptions.map((option, optionIndex) => ({ ...JSON.parse(JSON.stringify(option)), optionIndex, inputTextFuzzyAllResults: '' })); - const allResultsFuseOptions = { ...fuseOptions, threshold: 1.0 }; - allResultsFuseOptions.keys = [...keys, 'inputTextFuzzyAllResults']; - // A fuse object that always returns all results. - this.allResultsFuse = new Fuse(allResultsOptions, allResultsFuseOptions); + const fuseOptions = this.props.fuseOptions; + fuseOptions.keys = this.props.keys; + this.fuse = new Fuse(this.props.options, fuseOptions); } - clearSuggestions = (event = null) => { + onSuggestionsFetchRequested = ({ value }) => { + const suggestions = is.empty(value) ? this.optionsToSuggestions(this.props.options) : this.fuse.search(value); this.setState({ - suggestions: [], - highlightedItemIndex: null - }, () => { - if (event && is.fn(this.props.onSuggestionClick)) { - this.props.onSuggestionClick(event, { - suggestion: { - item: { text: this.state.value } - } - }); - } + suggestions }); }; - handleChange = (e) => { - e.persist(); - const { value } = e.target; - const suggestions = (is.empty(value)) ? this.allResultsFuse.search(value) : this.fuse.search(value); - const newState = { - value, suggestions - }; - if (suggestions && suggestions.matches) { - suggestions.matches.forEach((match) => { - if (this.props.keys.indexOf(match.key) > -1 && match.value === value) { - newState.highlightedItemIndex = match.arrayIndex; - } - }); + onSuggestionsClearRequested = () => { + this.setState({ + suggestions: [] + }); + }; + onSuggestionSelected = (event, { suggestion, method }) => { + // invokes custom function if passed in the component + if (is.fn(this.props.onSuggestionClick)) { + event.persist(); + // Suggestion is an object that can contain info on score, matches, etc. + this.props.onSuggestionClick(event, { suggestion, method }); } - this.setState(newState, () => { + } + getSuggestionValue = (suggestion) => suggestion.item.text; + handleChange = (event, { newValue, method }) => { + event.persist(); + const value = newValue; + this.setState({ + value + }, () => { if (is.fn(this.props.onChange)) { - this.props.onChange({ event: e, value, suggestions }); + this.props.onChange({ + event, method, value, suggestions: this.state.suggestions + }); } }); }; - handleFocus = () => { + handleBlur = (event) => { + if (is.fn(this.props.onBlur)) { + event.persist(); + this.props.onBlur({ event, value: this.state.value, suggestions: this.state.suggestions }); + } + } + // handleChange and onSuggestionSelected both do not fire when enter is hit. + // This is a workaround for that. Use handleChange for keyboard presses. + handleKeyPress = (event) => { const { value } = this.state; - const suggestions = (is.empty(value)) ? this.allResultsFuse.search(value) : this.fuse.search(value); - this.setState({ - suggestions - }); - }; - inputPropsOnBlur = () => this.clearSuggestions(); - inputPropsOnKeyDown = (event, { newHighlightedItemIndex }) => { - event.persist(); - switch (event.key) { - case 'ArrowDown': - case 'ArrowUp': - event.preventDefault(); - this.setState((currentState) => { - if (currentState.suggestions.length > 0) { - return{ - highlightedItemIndex: !(newHighlightedItemIndex) ? 0 : newHighlightedItemIndex - }; - } - }); - break; - case 'Enter': - // If there are suggestions and the user chose one. - if (this.state.suggestions.length > 0 && this.state.highlightedItemIndex !== null && this.state.highlightedItemIndex > -1) { - const suggestion = this.state.suggestions[this.state.highlightedItemIndex]; - this.setState({ - value: suggestion.item.text, - suggestions: [], - highlightedItemIndex: null - }, () => { - if (is.fn(this.props.onSuggestionClick)) { - // Suggestion is an object that can contain info on score, matches, etc. - this.props.onSuggestionClick(event, { suggestion }); - } - }); - } else { - // Try to see if the typed in value is in the options array. - const suggestion = this.props.options.find((option) => { - let match = false; - this.props.keys.forEach((key) => { - if (option[key] && option[key] === this.state.value) { - match = true; - } - }); - return match; - }); - if (suggestion) { - this.clearSuggestions(event); - } - } - break; - case 'Escape': - this.setState({ - suggestions: [], - highlightedItemIndex: null - }); - break; - default: + if (event.key === 'Enter') { + event.persist(); + event.preventDefault(); + if (is.fn(this.props.onSuggestionClick)) { + this.props.onSuggestionClick(event, { method: 'enter', suggestion: { item: { text: value } } }); + } } - }; - itemProps = (props) => { - const { itemIndex } = props; - const suggestion = this.state.suggestions[itemIndex]; - return{ - 'data-item-index': itemIndex, - onMouseDown: (event) => { - event.persist(); - this.setState({ - value: suggestion.item.text, - suggestions: [] - }, () => { - if (is.fn(this.props.onSuggestionClick)) { - // Suggestion is an object that can contain info on score, matches, etc. - this.props.onSuggestionClick(event, { suggestion }); - } - }); - }, - onMouseEnter: () => { - this.setState({ - highlightedItemIndex: itemIndex - }); + } + handleFocus = (event) => { + if (is.fn(this.props.onFocus)) { + event.persist(); + this.props.onFocus({ event, value: this.state.value, suggestions: this.state.suggestions }); + } + } + optionsToSuggestions = (options) => { + const suggestions = options.map((item) => ({ + item: { + text: item.text, + value: item.value }, - onMouseLeave: () => { - this.setState({ - highlightedItemIndex: null - }); - } - }; - }; - renderItemsContainer = ({ children, containerProps }) => (
{children}
); + matches: [{ + indices: [], + value: item.text, + key: 'text', + arrayIndex: 0 + }] + })); + return suggestions; + } + shouldRenderSuggestions = (value) => { + return(this.props.renderDefaultSuggestion === true) ? (value.trim().length >= 0) : (value.trim().length > 0); + } renderItem = (suggestion) => { const { item, matches } = suggestion; let renderItems = []; @@ -185,12 +126,20 @@ class InputTextFuzzy extends React.Component { ); } + + renderItemsContainer = ({ children, containerProps }) => (
{children}
); + render() { const autoProps = { - items: this.state.suggestions, - renderItemsContainer: this.renderItemsContainer, - renderItem: this.renderItem, - renderItemData: { value: this.state.value }, + suggestions: this.state.suggestions, + renderSuggestionsContainer: this.renderItemsContainer, + renderSuggestion: this.renderItem, + onSuggestionsFetchRequested: this.onSuggestionsFetchRequested, + onSuggestionsClearRequested: this.onSuggestionsClearRequested, + getSuggestionValue: this.getSuggestionValue, + shouldRenderSuggestions: this.shouldRenderSuggestions, + onSuggestionSelected: this.onSuggestionSelected, + focusInputOnSuggestionClick: false, inputProps: { type: 'search', placeholder: this.props.placeholder, @@ -199,16 +148,13 @@ class InputTextFuzzy extends React.Component { disabled: this.props.disabled, id: this.props.inputId, onFocus: this.handleFocus, - onBlur: this.inputPropsOnBlur, - onKeyDown: this.inputPropsOnKeyDown + autoFocus: this.props.autoFocusInput, + onBlur: this.handleBlur, + onKeyPress: this.handleKeyPress }, id: this.props.id }; - if (this.state.highlightedItemIndex !== null) { - autoProps.highlightedItemIndex = this.state.highlightedItemIndex; - } - autoProps.itemProps = this.itemProps; const inputTextTypeAheadClasses = classNames({ 'ma__input-typeahead': true, 'ma__input-typeahead--disabled': this.props.disabled, @@ -218,7 +164,7 @@ class InputTextFuzzy extends React.Component { {this.props.label && ()}
- +
); @@ -244,6 +190,8 @@ InputTextFuzzy.propTypes = { disabled: PropTypes.bool, /** Function that runs after changes to the input happen. */ onChange: PropTypes.func, + onFocus: PropTypes.func, + onBlur: PropTypes.func, /** Function that runs after a suggestion has been clicked. */ onSuggestionClick: PropTypes.func, /** The default value for the select box. */ @@ -251,7 +199,9 @@ InputTextFuzzy.propTypes = { /** The id of the the input tag */ inputId: PropTypes.string, /** By default all options will be rendered as suggestions on input focus */ - renderDefaultSuggestion: PropTypes.bool + renderDefaultSuggestion: PropTypes.bool, + /** Focus on typeahead input */ + autoFocusInput: PropTypes.bool }; InputTextFuzzy.defaultProps = { @@ -269,6 +219,7 @@ InputTextFuzzy.defaultProps = { /** Allows more characters for long queries. */ maxPatternLength: 300 }, + autoFocusInput: false, disabled: false, boxed: false, renderDefaultSuggestion: true