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

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/Upload/Steps/UploadImageStep/UploadImageStep.d.ts

@@ -15,7 +15,7 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
     uploadInputRef: import("react").RefObject<HTMLInputElement>;
     onManualUpload: () => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLLabelElement>) => void;
-    getImage: () => number | true | Iterable<import("react").ReactNode> | import("react").JSX.Element;
+    getImage: () => number | true | import("react").JSX.Element | Iterable<import("react").ReactNode>;
     render(): import("react").JSX.Element;
 }
 //# sourceMappingURL=UploadImageStep.d.ts.map

package/build/types/UploadInput/UploadItem/UploadItemLink.d.ts

@@ -5,5 +5,5 @@ export declare const UploadItemLink: import("react").ForwardRefExoticComponent<{
     singleFileUpload: boolean;
 } & {
     children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLAnchorElement | HTMLDivElement>>;
+} & import("react").RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
 //# sourceMappingURL=UploadItemLink.d.ts.map

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-a899b88",
+  "version": "0.0.0-experimental-d7e8cfa",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

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 && (

package/src/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;
 }