@transferwise/components 0.0.0-experimental-d7e8cfa → 0.0.0-experimental-c6fb370

package/build/styles/main.css

@@ -34122,10 +34122,6 @@ 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,
@@ -34352,12 +34348,6 @@ 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,8 +23,10 @@ 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<ButtonHTMLAttributes<HTMLButtonElement> & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLButtonElement | null>>;
+export declare const ButtonInput: import("react").ForwardRefExoticComponent<ButtonInputProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
 //# 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;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"}
+{"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"}

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

@@ -1,5 +1,5 @@
 import { Merge } from '../../../utils';
-export type SelectInputTriggerButtonElementType = 'button' | React.ComponentType;
+export type SelectInputTriggerButtonElementType = React.ElementType;
 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,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"}
+{"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"}

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;wBA6gBoF,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;wBAsfoF,CAAC,CAAC,EACrF,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,KACrB,KAAK,CAAC,YAAY;AAFvB,wBAEwB"}

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

@@ -4,11 +4,6 @@ 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,wBAWG"}
+{"version":3,"file":"Typeahead.messages.d.ts","sourceRoot":"","sources":["../../../src/Typeahead/Typeahead.messages.ts"],"names":[],"mappings":";;;;;;;AAEA,wBAMG"}

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,oCA4CT;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,oCAgDT;IAEF,MAAM;CAyBP"}

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

@@ -3,7 +3,6 @@ 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,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"}
+{"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"}

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

@@ -56,7 +56,6 @@ 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;
@@ -145,7 +144,6 @@ 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-d7e8cfa",
+  "version": "0.0.0-experimental-c6fb370",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/ExpressiveMoneyInput/CurrencySelector/CurrencySelector.tsx

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

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

@@ -7,9 +7,12 @@ 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();
@@ -337,6 +340,40 @@ 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 = 'button' | React.ComponentType;
+export type SelectInputTriggerButtonElementType = React.ElementType;
 
 export type SelectInputTriggerButtonProps<
   T extends SelectInputTriggerButtonElementType = 'button',

package/src/Typeahead/Typeahead.css

@@ -7,10 +7,6 @@
 .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,8 +18,6 @@
   .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,9 +6,4 @@ 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,18 +1,11 @@
 import Field from '../Field';
-import { mockMatchMedia, render, screen, fireEvent, userEvent } from '../test-utils';
+import { mockMatchMedia, render, screen, fireEvent } 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">
@@ -29,7 +22,7 @@ describe('Typeahead', () => {
           <Typeahead id="test" name="test" options={[]} onChange={() => {}} />
         </Field>,
       );
-      expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+      expect(screen.queryByRole('menu')).not.toBeInTheDocument();
     });
     it('does render a dropdown when only a footer is provided', () => {
       render(
@@ -37,7 +30,7 @@ describe('Typeahead', () => {
           <Typeahead id="test" name="test" options={[]} footer={<p>hello</p>} onChange={() => {}} />
         </Field>,
       );
-      expect(screen.getByRole('listbox')).toBeInTheDocument();
+      expect(screen.getByRole('menu')).toBeInTheDocument();
     });
   });
 
@@ -81,76 +74,6 @@ 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,15 +216,31 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
   };
 
   handleOnKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
-    const { showSuggestions, allowNew, multiple, chipSeparators } = this.props;
-    const { query, selected } = this.state;
+    const { showSuggestions, allowNew, multiple, chipSeparators, options } = this.props;
+    const { keyboardFocusedOptionIndex, 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 if (!this.handleOptionNavigation(event)) {
+    } else {
       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));
@@ -235,36 +251,6 @@ 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;
@@ -275,7 +261,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       }
       const optionRef = this.optionRefs[index];
       if (optionRef?.current) {
-        optionRef.current.scrollIntoView({ block: 'nearest' });
+        optionRef.current.focus(); // Set focus on the option element
       }
       return {
         keyboardFocusedOptionIndex: index,
@@ -283,10 +269,6 @@ 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];
@@ -441,16 +423,12 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       });
     }
     return (
-      <div className={clsx('dropdown btn-group btn-block', { open: dropdownOpen })}>
+      <div
+        className={clsx('dropdown btn-group btn-block', { open: dropdownOpen })}
+        id={`menu-${id}`}
+      >
         {(!!optionsToRender.length || footer) && (
-          <ul
-            className="dropdown-menu"
-            id={`menu-${id}`}
-            role="listbox"
-            aria-label={this.props?.intl?.formatMessage(messages.suggestionsLabel)}
-            tabIndex={0}
-            onKeyDown={this.handleOptionListKeyDown}
-          >
+          <ul className="dropdown-menu" role="menu">
             {optionsToRender.map((option, idx) => {
               const ref = React.createRef<HTMLLIElement>();
               this.optionRefs[idx] = ref;
@@ -461,8 +439,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
                   query={query}
                   option={option}
                   selected={keyboardFocusedOptionIndex === idx}
-                  id={`${id}-${idx}`}
-                  onMouseEnter={() => this.setFocusedOption(idx)}
+                  id={String(option.label.replace(/\s+/g, '-'))}
                   onClick={(event) => {
                     this.onOptionSelected(event, option);
                   }}
@@ -577,7 +554,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
               autoComplete={inputAutoComplete}
               ariaActivedescendant={
                 keyboardFocusedOptionIndex !== null && options[keyboardFocusedOptionIndex]
-                  ? `option-${id}-${keyboardFocusedOptionIndex}`
+                  ? `option-${options[keyboardFocusedOptionIndex].label.replace(/\s+/g, '-')}`
                   : 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,
+      ariaActivedescendant, // Declare the ariaActivedescendant variable
     } = this.props;
     const { inputWidth } = this.state;
 
@@ -93,7 +93,11 @@ export default class TypeaheadInput<T> extends Component<
         className={clsx(multiple && 'typeahead__input')}
         name={name}
         id={`input-${typeaheadId}`}
-        aria-activedescendant={ariaActivedescendant}
+        aria-activedescendant={
+          ariaActivedescendant
+            ? `menu-${typeaheadId} ${ariaActivedescendant}`
+            : `menu-${typeaheadId}`
+        }
         autoFocus={autoFocus}
         placeholder={hasPlaceholder ? placeholder : ''}
         aria-autocomplete="list"

package/src/Typeahead/TypeaheadOption/TypeaheadOption.css

@@ -7,8 +7,3 @@
   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,12 +12,3 @@
     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,13 +8,12 @@ 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 = () => {}, onMouseEnter, query = '', id } = props;
+  const { option, selected = false, onClick = () => {}, query = '', id } = props;
   const { label, note, secondary } = option;
 
   return (
@@ -26,9 +25,8 @@ 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={-1} onClick={onClick}>
+      <a className="dropdown-item" href="#" tabIndex={0} onClick={onClick}>
         <Highlight value={label} query={query} />
         {note && <span className="np-text-body-default m-l-1">{note}</span>}
         {secondary && (