diff --git a/package-lock.json b/package-lock.json index 6044833b3..f547f3826 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10109,6 +10109,11 @@ } } }, + "compute-scroll-into-view": { + "version": "1.0.17", + "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.17.tgz", + "integrity": "sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg==" + }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -11880,9 +11885,36 @@ "dev": true }, "downshift": { - "version": "1.31.16", - "resolved": "https://registry.npmjs.org/downshift/-/downshift-1.31.16.tgz", - "integrity": "sha512-RskXmiGSoz0EHAyBrmTBGSLHg6+NYDGuLu2W3GpmuOe6hmZEWhCiQrq5g6DWzhnUaJD41xHbbfC6j1Fe86YqgA==" + "version": "6.1.7", + "resolved": "https://registry.npmjs.org/downshift/-/downshift-6.1.7.tgz", + "integrity": "sha512-cVprZg/9Lvj/uhYRxELzlu1aezRcgPWBjTvspiGTVEU64gF5pRdSRKFVLcxqsZC637cLAGMbL40JavEfWnqgNg==", + "requires": { + "@babel/runtime": "^7.14.8", + "compute-scroll-into-view": "^1.0.17", + "prop-types": "^15.7.2", + "react-is": "^17.0.2", + "tslib": "^2.3.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.17.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz", + "integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "regenerator-runtime": { + "version": "0.13.9", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" + }, + "tslib": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", + "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" + } + } }, "duplexer": { "version": "0.1.2", diff --git a/package.json b/package.json index efa47f4bc..f34bab86b 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "crc-32": "^1.2.0", "currency-codes": "^2.1.0", "cypress-mailhog": "^1.3.0", - "downshift": "^1.31.16", + "downshift": "^6.1.7", "editorjs-inline-tool": "^0.4.0", "editorjs-undo": "^0.1.4", "faker": "^5.1.0", diff --git a/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx b/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx index 0f43a1915..7c8e3f2e7 100644 --- a/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx +++ b/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx @@ -110,10 +110,7 @@ const AutocompleteSelectMenu: React.FC = props => { return ( {debounceFn => ( - (item ? item.label : "")} - onSelect={handleChange} - > + {({ getItemProps, isOpen, openMenu, closeMenu, selectItem }) => (
= props => { closeMenu(); setMenuPath([]); setInputValue(displayValue || ""); + debounceFn(""); }, onChange: event => { debounceFn(event.target.value); @@ -156,7 +154,7 @@ const AutocompleteSelectMenu: React.FC = props => { setMenuPath(menuPath.slice(0, menuPath.length - 2)) @@ -171,10 +169,10 @@ const AutocompleteSelectMenu: React.FC = props => { : options ).map((suggestion, index) => ( suggestion.value ? selectItem(suggestion.value) diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx index 765896463..97a2e87aa 100644 --- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx +++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx @@ -132,7 +132,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC ) => { if (downshiftOpts) { downshiftOpts.reset({ inputValue: "", isOpen: true }); @@ -165,6 +165,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC { @@ -181,24 +182,26 @@ const MultiAutocompleteSelectFieldComponent: React.FC {endAdornment}
), - id: undefined, + ref: anchor, onBlur, - onClick: toggleMenu, onFocus: () => { if (fetchOnFocus) { fetchChoices(inputValue); } - }, - ref: anchor + } + }} + inputProps={{ + ...getInputProps({ + placeholder, + onClick: toggleMenu + }), + ...getMenuProps() }} error={error} helperText={helperText} diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx index f432de3d2..2e4a70251 100644 --- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx +++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx @@ -39,7 +39,7 @@ export interface MultiAutocompleteSelectFieldContentProps choices: MultiAutocompleteChoiceType[]; displayCustomValue: boolean; displayValues: MultiAutocompleteChoiceType[]; - getItemProps: (options: GetItemPropsOptions) => void; + getItemProps: (options: GetItemPropsOptions) => any; highlightedIndex: number; inputValue: string; } diff --git a/src/components/Navigator/NavigatorSection.tsx b/src/components/Navigator/NavigatorSection.tsx index 863b8fea6..c4b6eeafa 100644 --- a/src/components/Navigator/NavigatorSection.tsx +++ b/src/components/Navigator/NavigatorSection.tsx @@ -6,7 +6,7 @@ import React from "react"; import { QuickSearchAction } from "./types"; interface NavigatorSectionProps { - getItemProps: (options: GetItemPropsOptions) => any; + getItemProps: (options: GetItemPropsOptions) => any; highlightedIndex: number; label: string; items: QuickSearchAction[]; diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx index c3ffc951d..207453e58 100644 --- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx +++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx @@ -105,7 +105,6 @@ const SingleAutocompleteSelectFieldComponent: React.FC {debounceFn => ( displayValue || ""} onInputValueChange={value => debounceFn(value)} onSelect={handleChange} @@ -177,9 +176,6 @@ const SingleAutocompleteSelectFieldComponent: React.FC @@ -188,7 +184,6 @@ const SingleAutocompleteSelectFieldComponent: React.FC { if (fetchOnFocus) { fetchChoices(inputValue); @@ -213,6 +208,14 @@ const SingleAutocompleteSelectFieldComponent: React.FC>; displayCustomValue: boolean; emptyOption: boolean; - getItemProps: (options: GetItemPropsOptions) => any; + getItemProps: (options: GetItemPropsOptions) => any; highlightedIndex: number; inputValue: string; isCustomValueSelected: boolean; @@ -94,7 +94,10 @@ const useStyles = makeStyles( }, menuItem: { height: "auto", - whiteSpace: "normal" + whiteSpace: "normal", + '&[aria-selected="true"]': { + backgroundColor: theme.palette.background.default + } }, progress: {}, progressContainer: { diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index cc9560c74..d3a965ff3 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -98,7 +98,11 @@ exports[`Storyshots Attributes / Attributes default 1`] = ` data-test-id="attribute-value" >