@transferwise/components 0.0.0-experimental-94710bd → 0.0.0-experimental-d7e8cfa

package/build/styles/main.css

@@ -34122,6 +34122,10 @@ html:not([dir="rtl"]) .np-navigation-option {
 .typeahead .dropdown-menu {
   max-width: 100%;
   width: 100%;
+  scroll-padding-top: 8px;
+  scroll-padding-top: var(--size-8);
+  scroll-padding-bottom: 8px;
+  scroll-padding-bottom: var(--size-8);
 }
 
 .np-theme-personal--forest-green .typeahead .dropdown-menu,
@@ -34348,6 +34352,12 @@ html:not([dir="rtl"]) .np-navigation-option {
   border-radius: var(--radius-small);
 }
 
+.dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):hover,
+.dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):focus,
+.dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):active {
+  box-shadow: none;
+}
+
 .tw-droppable-lg {
   min-height: 346px;
 }

package/build/types/ExpressiveMoneyInput/CurrencySelector/CurrencySelector.d.ts

@@ -1,6 +1,6 @@
 import type { AvatarLayoutProps } from '../../AvatarLayout';
-import type { NewButtonProps } from '../../Button';
 import type { CurrencyType, ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
+import { type ButtonHTMLAttributes } from 'react';
 export interface CurrencyOption {
     label?: string;
     code: string;
@@ -23,10 +23,8 @@ export type CurrencySelectorProps = {
         resultCount: number;
     }) => void;
 } & Pick<ExpressiveMoneyInputProps, 'currency'>;
-type ButtonInputProps = Omit<Extract<NewButtonProps, {
-    as?: 'button';
-}>, 'v2' | 'size' | 'priority' | 'className' | 'href' | 'target'>;
 export declare const CurrencySelector: ({ id, currency, options, labelId, onChange, addons, onOpen, onSearchChange, }: CurrencySelectorProps) => import("react").JSX.Element;
-export declare const ButtonInput: import("react").ForwardRefExoticComponent<ButtonInputProps & import("react").RefAttributes<HTMLButtonElement>>;
-export {};
+export declare const ButtonInput: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLButtonElement | null>>;
 //# sourceMappingURL=CurrencySelector.d.ts.map

package/build/types/ExpressiveMoneyInput/CurrencySelector/CurrencySelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CurrencySelector.d.ts","sourceRoot":"","sources":["../../../../src/ExpressiveMoneyInput/CurrencySelector/CurrencySelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAMnD,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAUvF,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,cAAc,EAAE,CAAC;CAC9B;AAED,MAAM,MAAM,eAAe,GAAG,eAAe,EAAE,CAAC;AAEhD,MAAM,MAAM,qBAAqB,GAAG;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC5E,GAAG,IAAI,CAAC,yBAAyB,EAAE,UAAU,CAAC,CAAC;AAEhD,KAAK,gBAAgB,GAAG,IAAI,CAC1B,OAAO,CAAC,cAAc,EAAE;IAAE,EAAE,CAAC,EAAE,QAAQ,CAAA;CAAE,CAAC,EAC1C,IAAI,GAAG,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,CAC7D,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,+EAS9B,qBAAqB,gCA+FvB,CAAC;AAEF,eAAO,MAAM,WAAW,gHAgBtB,CAAC"}
+{"version":3,"file":"CurrencySelector.d.ts","sourceRoot":"","sources":["../../../../src/ExpressiveMoneyInput/CurrencySelector/CurrencySelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAO5D,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAGvF,OAAO,EACL,KAAK,oBAAoB,EAK1B,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,cAAc,EAAE,CAAC;CAC9B;AAED,MAAM,MAAM,eAAe,GAAG,eAAe,EAAE,CAAC;AAEhD,MAAM,MAAM,qBAAqB,GAAG;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC5E,GAAG,IAAI,CAAC,yBAAyB,EAAE,UAAU,CAAC,CAAC;AAEhD,eAAO,MAAM,gBAAgB,GAAI,+EAS9B,qBAAqB,gCAgGvB,CAAC;AAEF,eAAO,MAAM,WAAW;;4DAgBtB,CAAC"}

package/build/types/Inputs/SelectInput/TriggerButton/SelectInputTriggerButton.d.ts

@@ -1,5 +1,5 @@
 import { Merge } from '../../../utils';
-export type SelectInputTriggerButtonElementType = React.ElementType;
+export type SelectInputTriggerButtonElementType = 'button' | React.ComponentType;
 export type SelectInputTriggerButtonProps<T extends SelectInputTriggerButtonElementType = 'button'> = Merge<React.ComponentPropsWithoutRef<T>, {
     as?: T;
 }>;

package/build/types/Inputs/SelectInput/TriggerButton/SelectInputTriggerButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInputTriggerButton.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,MAAM,MAAM,mCAAmC,GAAG,KAAK,CAAC,WAAW,CAAC;AAEpE,MAAM,MAAM,6BAA6B,CACvC,CAAC,SAAS,mCAAmC,GAAG,QAAQ,IACtD,KAAK,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,SAAS,mCAAmC,GAAG,QAAQ,EAAE,EACjG,EAAkB,EAClB,GAAG,SAAS,EACb,EAAE,6BAA6B,CAAC,CAAC,CAAC,+BAclC"}
+{"version":3,"file":"SelectInputTriggerButton.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,MAAM,MAAM,mCAAmC,GAAG,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC;AAEjF,MAAM,MAAM,6BAA6B,CACvC,CAAC,SAAS,mCAAmC,GAAG,QAAQ,IACtD,KAAK,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,SAAS,mCAAmC,GAAG,QAAQ,EAAE,EACjG,EAAkB,EAClB,GAAG,SAAS,EACb,EAAE,6BAA6B,CAAC,CAAC,CAAC,+BAclC"}

package/build/types/Typeahead/Typeahead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../../src/Typeahead/Typeahead.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAG9E,OAAO,EAEL,SAAS,EACT,UAAU,EACV,SAAS,EAIV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAgB,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAU5D,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,MAAM,IAAI;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,cAAc,CAAC,CAAC,CAAE,SAAQ,OAAO,CAAC,qBAAqB,CAAC;IACvE,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE;QACN,OAAO,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;QACvC,IAAI,CAAC,EACD,iBAAiB,CAAC,WAAW,CAAC,GAC9B,GAAG,SAAS,CAAC,KAAK,EAAE,GACpB,GAAG,SAAS,CAAC,IAAI,EAAE,GACnB,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;KAC5B,CAAC;IACF,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qBAAqB;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB;IAClB,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACnC,oBAAoB;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,kBAAkB;IAClB,YAAY,CAAC,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7C,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACvC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oBAAoB;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB;IACpB,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC;CACtD;wBAsfoF,CAAC,CAAC,EACrF,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,KACrB,KAAK,CAAC,YAAY;AAFvB,wBAEwB"}
+{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../../src/Typeahead/Typeahead.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAG9E,OAAO,EAEL,SAAS,EACT,UAAU,EACV,SAAS,EAIV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAgB,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAU5D,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,MAAM,IAAI;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,cAAc,CAAC,CAAC,CAAE,SAAQ,OAAO,CAAC,qBAAqB,CAAC;IACvE,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE;QACN,OAAO,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;QACvC,IAAI,CAAC,EACD,iBAAiB,CAAC,WAAW,CAAC,GAC9B,GAAG,SAAS,CAAC,KAAK,EAAE,GACpB,GAAG,SAAS,CAAC,IAAI,EAAE,GACnB,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;KAC5B,CAAC;IACF,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qBAAqB;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB;IAClB,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACnC,oBAAoB;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,kBAAkB;IAClB,YAAY,CAAC,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7C,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACvC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oBAAoB;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB;IACpB,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC;CACtD;wBA6gBoF,CAAC,CAAC,EACrF,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,KACrB,KAAK,CAAC,YAAY;AAFvB,wBAEwB"}

package/build/types/Typeahead/Typeahead.messages.d.ts

@@ -4,6 +4,11 @@ declare const _default: {
         defaultMessage: string;
         description: string;
     };
+    suggestionsLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export default _default;
 //# sourceMappingURL=Typeahead.messages.d.ts.map

package/build/types/Typeahead/Typeahead.messages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typeahead.messages.d.ts","sourceRoot":"","sources":["../../../src/Typeahead/Typeahead.messages.ts"],"names":[],"mappings":";;;;;;;AAEA,wBAMG"}
+{"version":3,"file":"Typeahead.messages.d.ts","sourceRoot":"","sources":["../../../src/Typeahead/Typeahead.messages.ts"],"names":[],"mappings":";;;;;;;;;;;;AAEA,wBAWG"}

package/build/types/Typeahead/TypeaheadInput/TypeaheadInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadInput.d.ts","sourceRoot":"","sources":["../../../../src/Typeahead/TypeaheadInput/TypeaheadInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAI/D,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;IACvD,UAAU,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACnE,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,GAAG,WAAW,CAAC,CAAC;AAEpG,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,0BAA0B,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,cAAc,CAAC,CAAC,CAAE,SAAQ,SAAS,CACtD,mBAAmB,CAAC,CAAC,CAAC,EACtB,mBAAmB,CACpB;IACC,QAAQ,8CAAiC;IACzC,QAAQ,4CAA+B;gBAE3B,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAQzC,iBAAiB;IAUjB,kBAAkB,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAMxD,gBAAgB,aAMd;IAEF,WAAW,oCAgDT;IAEF,MAAM;CAyBP"}
+{"version":3,"file":"TypeaheadInput.d.ts","sourceRoot":"","sources":["../../../../src/Typeahead/TypeaheadInput/TypeaheadInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAI/D,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;IACvD,UAAU,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACnE,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,GAAG,WAAW,CAAC,CAAC;AAEpG,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,0BAA0B,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,cAAc,CAAC,CAAC,CAAE,SAAQ,SAAS,CACtD,mBAAmB,CAAC,CAAC,CAAC,EACtB,mBAAmB,CACpB;IACC,QAAQ,8CAAiC;IACzC,QAAQ,4CAA+B;gBAE3B,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAQzC,iBAAiB;IAUjB,kBAAkB,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAMxD,gBAAgB,aAMd;IAEF,WAAW,oCA4CT;IAEF,MAAM;CAyBP"}

package/build/types/Typeahead/TypeaheadOption/TypeaheadOption.d.ts

@@ -3,6 +3,7 @@ export type TypeaheadOptionProps<T> = {
     option: TypeaheadOption<T>;
     selected?: boolean;
     onClick?: React.MouseEventHandler;
+    onMouseEnter?: React.MouseEventHandler;
     query?: string;
     id?: string;
 };

package/build/types/Typeahead/TypeaheadOption/TypeaheadOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadOption.d.ts","sourceRoot":"","sources":["../../../../src/Typeahead/TypeaheadOption/TypeaheadOption.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,MAAM,MAAM,oBAAoB,CAAC,CAAC,IAAI;IACpC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,QAAA,MAAM,MAAM,qHA2BV,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"TypeaheadOption.d.ts","sourceRoot":"","sources":["../../../../src/Typeahead/TypeaheadOption/TypeaheadOption.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,MAAM,MAAM,oBAAoB,CAAC,CAAC,IAAI;IACpC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,YAAY,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,QAAA,MAAM,MAAM,qHA4BV,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/build/types/test-utils/index.d.ts

@@ -56,6 +56,7 @@ declare function customRender(ui: ReactElement, { locale, messages, ...renderOpt
         "neptune.Table.loaded": string;
         "neptune.Table.loading": string;
         "neptune.Table.refreshPage": string;
+        "neptune.Typeahead.suggestionsLabel": string;
         "neptune.Upload.csButtonText": string;
         "neptune.Upload.csFailureText": string;
         "neptune.Upload.csSuccessText": string;
@@ -144,6 +145,7 @@ declare function customRenderHook(callback: () => unknown, { locale, messages }?
         "neptune.Table.loaded": string;
         "neptune.Table.loading": string;
         "neptune.Table.refreshPage": string;
+        "neptune.Typeahead.suggestionsLabel": string;
         "neptune.Upload.csButtonText": string;
         "neptune.Upload.csFailureText": string;
         "neptune.Upload.csSuccessText": string;

package/build/types/test-utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-94710bd",
+  "version": "0.0.0-experimental-d7e8cfa",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/ExpressiveMoneyInput/CurrencySelector/CurrencySelector.tsx

@@ -1,6 +1,5 @@
 import type { AvatarLayoutProps } from '../../AvatarLayout';
 import Button from '../../Button';
-import type { NewButtonProps } from '../../Button';
 import {
   SelectInput,
   SelectInputOptionContent,
@@ -9,7 +8,13 @@ import {
 import type { CurrencyType, ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
 import { ChevronDown } from '@transferwise/icons';
 import { Flag } from '@wise/art';
-import { forwardRef, type MouseEventHandler, useMemo, useState } from 'react';
+import {
+  type ButtonHTMLAttributes,
+  forwardRef,
+  type MouseEventHandler,
+  useMemo,
+  useState,
+} from 'react';
 import { useIntl } from 'react-intl';
 
 import messages from '../ExpressiveMoneyInput.messages';
@@ -39,11 +44,6 @@ export type CurrencySelectorProps = {
   onSearchChange?: (payload: { query: string; resultCount: number }) => void;
 } & Pick<ExpressiveMoneyInputProps, 'currency'>;
 
-type ButtonInputProps = Omit<
-  Extract<NewButtonProps, { as?: 'button' }>,
-  'v2' | 'size' | 'priority' | 'className' | 'href' | 'target'
->;
-
 export const CurrencySelector = ({
   id,
   currency,
@@ -109,6 +109,7 @@ export const CurrencySelector = ({
       renderTrigger={() => (
         <SelectInputTriggerButton
           as={ButtonInput}
+          // @ts-expect-error new (v2) ButtonProps
           addonStart={{
             type: 'avatar',
             value: [
@@ -121,11 +122,11 @@ export const CurrencySelector = ({
                     }),
               },
             ]
-              .filter((avatar): avatar is NonNullable<typeof avatar> => avatar != null)
+              .filter(Boolean)
               .filter((avatar) => !(avatar && Object.keys(avatar).length === 0)),
           }}
           addonEnd={disabled ? undefined : { type: 'icon', value: <ChevronDown /> }}
-          onClick={handleTriggerClick}
+          onClick={(event) => handleTriggerClick(event)}
         >
           <>
             <span aria-hidden>{formatCurrencyCode(currency)}</span>
@@ -150,9 +151,9 @@ export const CurrencySelector = ({
   );
 };
 
-export const ButtonInput = forwardRef<HTMLButtonElement, ButtonInputProps>(function ButtonInput(
-  { children, ...rest },
-  ref,
+export const ButtonInput = forwardRef(function ButtonInput(
+  { children, ...rest }: React.PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,
+  ref: React.ForwardedRef<HTMLButtonElement | null>,
 ) {
   return (
     <Button

package/src/Inputs/SelectInput/SelectInput.test.tsx

@@ -7,12 +7,9 @@ import { render, mockMatchMedia, mockResizeObserver } from '../../test-utils';
 import {
   SelectInput,
   SelectInputOptionContent,
-  SelectInputTriggerButton,
   type SelectInputOptionItem,
   type SelectInputProps,
 } from '.';
-import Button from '../../Button';
-import type { ButtonProps as ResolverButtonProps } from '../../Button/Button.resolver';
 import Field from '../../Field';
 
 mockMatchMedia();
@@ -340,40 +337,6 @@ describe('SelectInput', () => {
     expect(screen.getByLabelText(/Currency/)).toHaveAttribute('aria-haspopup');
   });
 
-  it('renders addonStart and addonEnd when using trigger as Button', () => {
-    type V2ButtonProps = Extract<ResolverButtonProps, { v2: true }>;
-
-    render(
-      <SelectInput
-        items={[{ type: 'option', value: 'USD' }]}
-        renderTrigger={({ content, className, size }) => {
-          const triggerButtonProps: V2ButtonProps = {
-            v2: true,
-            size,
-            className,
-            addonStart: {
-              type: 'icon',
-              value: <span data-testid="select-trigger-addon-start">Start</span>,
-            },
-            addonEnd: {
-              type: 'icon',
-              value: <span data-testid="select-trigger-addon-end">End</span>,
-            },
-          };
-
-          return (
-            <SelectInputTriggerButton as={Button} {...triggerButtonProps}>
-              {content}
-            </SelectInputTriggerButton>
-          );
-        }}
-      />,
-    );
-
-    expect(screen.getByTestId('select-trigger-addon-start')).toBeInTheDocument();
-    expect(screen.getByTestId('select-trigger-addon-end')).toBeInTheDocument();
-  });
-
   it('deduplicates search results across groups using compareValues as key', async () => {
     interface Currency {
       code: string;

package/src/Inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx

@@ -5,7 +5,7 @@ import { PolymorphicWithOverrides } from '../../../common/PolymorphicWithOverrid
 import { Merge } from '../../../utils';
 import { SelectInputTriggerButtonPropsContext } from '../SelectInput.contexts';
 
-export type SelectInputTriggerButtonElementType = React.ElementType;
+export type SelectInputTriggerButtonElementType = 'button' | React.ComponentType;
 
 export type SelectInputTriggerButtonProps<
   T extends SelectInputTriggerButtonElementType = 'button',

package/src/Typeahead/Typeahead.css

@@ -7,6 +7,10 @@
 .typeahead .dropdown-menu {
   max-width: 100%;
   width: 100%;
+  scroll-padding-top: 8px;
+  scroll-padding-top: var(--size-8);
+  scroll-padding-bottom: 8px;
+  scroll-padding-bottom: var(--size-8);
 }
 .np-theme-personal--forest-green .typeahead .dropdown-menu,
 .np-theme-personal--bright-green .typeahead .dropdown-menu,

package/src/Typeahead/Typeahead.less

@@ -18,6 +18,8 @@
   .dropdown-menu {
     max-width: 100%;
     width: 100%;
+    scroll-padding-top: var(--size-8);
+    scroll-padding-bottom: var(--size-8);
     .np-theme-personal--forest-green &,
     .np-theme-personal--bright-green &,
     .np-theme-personal--dark & {

package/src/Typeahead/Typeahead.messages.ts

@@ -6,4 +6,9 @@ export default defineMessages({
     defaultMessage: 'Clear',
     description: 'Description of clear button',
   },
+  suggestionsLabel: {
+    id: 'neptune.Typeahead.suggestionsLabel',
+    defaultMessage: 'Suggestions',
+    description: 'Accessible label for the list of typeahead suggestions',
+  },
 });

package/src/Typeahead/Typeahead.test.tsx

@@ -1,11 +1,18 @@
 import Field from '../Field';
-import { mockMatchMedia, render, screen, fireEvent } from '../test-utils';
+import { mockMatchMedia, render, screen, fireEvent, userEvent } from '../test-utils';
 import { wait } from '../test-utils/wait';
 import Typeahead from './Typeahead';
 
 mockMatchMedia();
 
+const scrollIntoView = jest.fn();
+
 describe('Typeahead', () => {
+  beforeEach(() => {
+    HTMLElement.prototype.scrollIntoView = scrollIntoView;
+    scrollIntoView.mockClear();
+  });
+
   it('supports `Field` for labeling', () => {
     render(
       <Field id="test" label="Tags">
@@ -22,7 +29,7 @@ describe('Typeahead', () => {
           <Typeahead id="test" name="test" options={[]} onChange={() => {}} />
         </Field>,
       );
-      expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+      expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
     });
     it('does render a dropdown when only a footer is provided', () => {
       render(
@@ -30,7 +37,7 @@ describe('Typeahead', () => {
           <Typeahead id="test" name="test" options={[]} footer={<p>hello</p>} onChange={() => {}} />
         </Field>,
       );
-      expect(screen.getByRole('menu')).toBeInTheDocument();
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
     });
   });
 
@@ -74,6 +81,76 @@ describe('Typeahead', () => {
     expect(onChange).toHaveBeenCalled();
   });
 
+  it('scrolls options into view when navigating with arrow keys', async () => {
+    render(
+      <Typeahead
+        id="test"
+        name="test"
+        options={[{ label: 'Option 1' }, { label: 'Option 2' }]}
+        minQueryLength={0}
+        onChange={() => {}}
+      />,
+    );
+    const input = screen.getByRole('combobox');
+
+    await userEvent.click(input);
+    await userEvent.keyboard('{ArrowDown}{ArrowDown}');
+
+    expect(input).toHaveFocus();
+    expect(scrollIntoView).toHaveBeenCalledTimes(2);
+    expect(scrollIntoView).toHaveBeenNthCalledWith(1, { block: 'nearest' });
+    expect(scrollIntoView).toHaveBeenNthCalledWith(2, { block: 'nearest' });
+    expect(scrollIntoView.mock.contexts[0]).toBe(screen.getByText('Option 1').closest('li'));
+    expect(scrollIntoView.mock.contexts[1]).toBe(screen.getByText('Option 2').closest('li'));
+  });
+
+  it('uses one Tab stop for the suggestions', async () => {
+    render(
+      <>
+        <Typeahead
+          id="test"
+          name="test"
+          options={[{ label: 'Option 1' }, { label: 'Option 2' }]}
+          minQueryLength={0}
+          onChange={() => {}}
+        />
+        <button type="button">Next control</button>
+      </>,
+    );
+
+    const input = screen.getByRole('combobox');
+    await userEvent.click(input);
+    await userEvent.tab();
+
+    expect(screen.getByRole('listbox')).toHaveFocus();
+    await userEvent.keyboard('{ArrowDown}');
+    expect(screen.getByRole('option', { name: 'Option 1' })).toHaveClass(
+      'tw-dropdown-item--focused',
+    );
+    expect(screen.getByRole('listbox')).toHaveFocus();
+    await userEvent.tab();
+    expect(screen.getByRole('button', { name: 'Next control' })).toHaveFocus();
+  });
+
+  it('uses the active option style when hovering a suggestion', async () => {
+    render(
+      <Typeahead
+        id="test"
+        name="test"
+        options={[{ label: 'Option 1' }, { label: 'Option 2' }]}
+        minQueryLength={0}
+        onChange={() => {}}
+      />,
+    );
+
+    await userEvent.click(screen.getByRole('combobox'));
+    await userEvent.hover(screen.getByRole('option', { name: 'Option 2' }));
+
+    expect(screen.getByRole('option', { name: 'Option 2' })).toHaveClass(
+      'tw-dropdown-item--focused',
+    );
+  });
+
   it('shows clear button when there is a value', () => {
     render(
       <Typeahead

package/src/Typeahead/Typeahead.tsx

@@ -216,31 +216,15 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
   };
 
   handleOnKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
-    const { showSuggestions, allowNew, multiple, chipSeparators, options } = this.props;
-    const { keyboardFocusedOptionIndex, query, selected } = this.state;
+    const { showSuggestions, allowNew, multiple, chipSeparators } = this.props;
+    const { query, selected } = this.state;
     const chipsMode = !showSuggestions && allowNew && multiple;
 
     if (chipsMode && ['Enter', 'Tab', ...chipSeparators].includes(event.key) && query.trim()) {
       event.preventDefault();
       this.selectItem({ label: query });
-    } else {
+    } else if (!this.handleOptionNavigation(event)) {
       switch (event.key) {
-        case 'ArrowDown':
-          event.preventDefault();
-          this.moveFocusedOption(1);
-          break;
-        case 'ArrowUp':
-          event.preventDefault();
-          this.moveFocusedOption(-1);
-          break;
-        case 'Enter':
-          event.preventDefault();
-          if (keyboardFocusedOptionIndex != null && options[keyboardFocusedOptionIndex]) {
-            this.selectItem(options[keyboardFocusedOptionIndex]);
-          } else if (allowNew && query.trim()) {
-            this.selectItem({ label: query });
-          }
-          break;
         case 'Backspace':
           if (multiple && !query && selected.length > 0) {
             this.updateSelectedValue(selected.slice(0, -1));
@@ -251,6 +235,36 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       }
     }
   };
+
+  handleOptionListKeyDown: React.KeyboardEventHandler<HTMLUListElement> = (event) => {
+    this.handleOptionNavigation(event);
+  };
+
+  handleOptionNavigation(event: React.KeyboardEvent<HTMLElement>) {
+    const { allowNew, options } = this.props;
+    const { keyboardFocusedOptionIndex, query } = this.state;
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.moveFocusedOption(1);
+        return true;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.moveFocusedOption(-1);
+        return true;
+      case 'Enter':
+        event.preventDefault();
+        if (keyboardFocusedOptionIndex != null && options[keyboardFocusedOptionIndex]) {
+          this.selectItem(options[keyboardFocusedOptionIndex]);
+        } else if (allowNew && query.trim()) {
+          this.selectItem({ label: query });
+        }
+        return true;
+      default:
+        return false;
+    }
+  }
   moveFocusedOption(offset: number) {
     this.setState((previousState) => {
       const { keyboardFocusedOptionIndex } = previousState;
@@ -261,7 +275,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       }
       const optionRef = this.optionRefs[index];
       if (optionRef?.current) {
-        optionRef.current.focus(); // Set focus on the option element
+        optionRef.current.scrollIntoView({ block: 'nearest' });
       }
       return {
         keyboardFocusedOptionIndex: index,
@@ -269,6 +283,10 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
     });
   }
 
+  setFocusedOption = (index: number) => {
+    this.setState({ keyboardFocusedOptionIndex: index });
+  };
+
   selectItem = (item: TypeaheadOption<T>) => {
     const { multiple } = this.props;
     let selected = [...this.state.selected];
@@ -423,12 +441,16 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       });
     }
     return (
-      <div
-        className={clsx('dropdown btn-group btn-block', { open: dropdownOpen })}
-        id={`menu-${id}`}
-      >
+      <div className={clsx('dropdown btn-group btn-block', { open: dropdownOpen })}>
         {(!!optionsToRender.length || footer) && (
-          <ul className="dropdown-menu" role="menu">
+          <ul
+            className="dropdown-menu"
+            id={`menu-${id}`}
+            role="listbox"
+            aria-label={this.props?.intl?.formatMessage(messages.suggestionsLabel)}
+            tabIndex={0}
+            onKeyDown={this.handleOptionListKeyDown}
+          >
             {optionsToRender.map((option, idx) => {
               const ref = React.createRef<HTMLLIElement>();
               this.optionRefs[idx] = ref;
@@ -439,7 +461,8 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
                   query={query}
                   option={option}
                   selected={keyboardFocusedOptionIndex === idx}
-                  id={String(option.label.replace(/\s+/g, '-'))}
+                  id={`${id}-${idx}`}
+                  onMouseEnter={() => this.setFocusedOption(idx)}
                   onClick={(event) => {
                     this.onOptionSelected(event, option);
                   }}
@@ -554,7 +577,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
               autoComplete={inputAutoComplete}
               ariaActivedescendant={
                 keyboardFocusedOptionIndex !== null && options[keyboardFocusedOptionIndex]
-                  ? `option-${options[keyboardFocusedOptionIndex].label.replace(/\s+/g, '-')}`
+                  ? `option-${id}-${keyboardFocusedOptionIndex}`
                   : undefined
               }
               onChange={this.handleOnChange}

package/src/Typeahead/TypeaheadInput/TypeaheadInput.tsx

@@ -82,7 +82,7 @@ export default class TypeaheadInput<T> extends Component<
       onFocus,
       onPaste,
       autoComplete,
-      ariaActivedescendant, // Declare the ariaActivedescendant variable
+      ariaActivedescendant,
     } = this.props;
     const { inputWidth } = this.state;
 
@@ -93,11 +93,7 @@ export default class TypeaheadInput<T> extends Component<
         className={clsx(multiple && 'typeahead__input')}
         name={name}
         id={`input-${typeaheadId}`}
-        aria-activedescendant={
-          ariaActivedescendant
-            ? `menu-${typeaheadId} ${ariaActivedescendant}`
-            : `menu-${typeaheadId}`
-        }
+        aria-activedescendant={ariaActivedescendant}
         autoFocus={autoFocus}
         placeholder={hasPlaceholder ? placeholder : ''}
         aria-autocomplete="list"

package/src/Typeahead/TypeaheadOption/TypeaheadOption.css

@@ -7,3 +7,8 @@
   border-radius: 10px;
   border-radius: var(--radius-small);
 }
+.dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):hover,
+.dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):focus,
+.dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):active {
+  box-shadow: none;
+}

package/src/Typeahead/TypeaheadOption/TypeaheadOption.less

@@ -12,3 +12,12 @@
     border-radius: var(--radius-small);
   }
 }
+.dropdown-menu
+  > li.typeahead__option:not(.active):not(.selected)
+  > .dropdown-item:not([disabled]):not(.disabled) {
+  &:hover,
+  &:focus,
+  &:active {
+    box-shadow: none;
+  }
+}

package/src/Typeahead/TypeaheadOption/TypeaheadOption.tsx

@@ -8,12 +8,13 @@ export type TypeaheadOptionProps<T> = {
   option: TypeaheadOption<T>;
   selected?: boolean;
   onClick?: React.MouseEventHandler;
+  onMouseEnter?: React.MouseEventHandler;
   query?: string;
   id?: string;
 };
 
 const Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref) => {
-  const { option, selected = false, onClick = () => {}, query = '', id } = props;
+  const { option, selected = false, onClick = () => {}, onMouseEnter, query = '', id } = props;
   const { label, note, secondary } = option;
 
   return (
@@ -25,8 +26,9 @@ const Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref)
       className={clsx('typeahead__option tw-dropdown-item clickable', {
         'tw-dropdown-item--focused': selected,
       })}
+      onMouseEnter={onMouseEnter}
     >
-      <a className="dropdown-item" href="#" tabIndex={0} onClick={onClick}>
+      <a className="dropdown-item" href="#" tabIndex={-1} onClick={onClick}>
         <Highlight value={label} query={query} />
         {note && <span className="np-text-body-default m-l-1">{note}</span>}
         {secondary && (