refactor: Share listbox keyboard navigation

Move Select's arrow key wrap logic (goUp/goDown) into a shared helper,
getListboxNavigation, in src/internal/components/listbox/utils/navigation.ts,
and use it in useSelect. The helper keeps Select's current behavior exactly,
including wrapping at the first and last rows. Home/End handling stays in
useMenuKeyboard unchanged.

No behavior change for Select or Multiselect.

Author: amanabiy

src/internal/components/listbox/__tests__/navigation.test.ts

@@ -0,0 +1,83 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { OptionDefinition, OptionGroup } from '../../../../types/option';
+import { DropdownOption } from '../../option/interfaces';
+import { flattenOptions } from '../../option/utils/flatten-options';
+import { getListboxNavigation } from '../utils/navigation';
+
+const flatten = (options: ReadonlyArray<OptionDefinition | OptionGroup>) => flattenOptions(options).flatOptions;
+
+const flat = flatten([{ value: '1' }, { value: '2' }, { value: '3' }]);
+// [header A, a1, a2, header B, b1]
+const grouped = flatten([
+  { label: 'A', options: [{ value: 'a1' }, { value: 'a2' }] },
+  { label: 'B', options: [{ value: 'b1' }] },
+]);
+// [1, header Empty]
+const endsWithEmptyGroup = flatten([{ value: '1' }, { label: 'Empty', options: [] }]);
+
+function setup(options: ReadonlyArray<DropdownOption>, highlightedIndex: number, interactiveGroups = false) {
+  const moveHighlight = jest.fn();
+  const goHome = jest.fn();
+  const goEnd = jest.fn();
+  const navigation = getListboxNavigation({
+    options,
+    highlightedIndex,
+    highlightedOption: options[highlightedIndex],
+    interactiveGroups,
+    moveHighlight,
+    goHome,
+    goEnd,
+  });
+  return { ...navigation, moveHighlight, goHome, goEnd };
+}
+
+describe('getListboxNavigation', () => {
+  test('moves the highlight by one option', () => {
+    const { goUp, goDown, moveHighlight } = setup(flat, 1);
+    goDown();
+    expect(moveHighlight).toHaveBeenLastCalledWith(1);
+    goUp();
+    expect(moveHighlight).toHaveBeenLastCalledWith(-1);
+  });
+
+  test('wraps from the first option to the end and from the last option to the start', () => {
+    const first = setup(flat, 0);
+    first.goUp();
+    expect(first.goEnd).toHaveBeenCalledTimes(1);
+    expect(first.moveHighlight).not.toHaveBeenCalled();
+
+    const last = setup(flat, 2);
+    last.goDown();
+    expect(last.goHome).toHaveBeenCalledTimes(1);
+    expect(last.moveHighlight).not.toHaveBeenCalled();
+  });
+
+  test('wraps up from the first child of a leading group when groups are not interactive', () => {
+    const { goUp, goEnd, moveHighlight } = setup(grouped, 1);
+    goUp();
+    expect(goEnd).toHaveBeenCalledTimes(1);
+    expect(moveHighlight).not.toHaveBeenCalled();
+  });
+
+  test('moves up to the leading group header when groups are interactive', () => {
+    const { goUp, goEnd, moveHighlight } = setup(grouped, 1, true);
+    goUp();
+    expect(goEnd).not.toHaveBeenCalled();
+    expect(moveHighlight).toHaveBeenCalledWith(-1);
+  });
+
+  test('wraps down only from the last row, even when it is not highlightable', () => {
+    const { goDown, goHome, moveHighlight } = setup(endsWithEmptyGroup, 0);
+    goDown();
+    expect(goHome).not.toHaveBeenCalled();
+    expect(moveHighlight).toHaveBeenCalledWith(1);
+  });
+
+  test('moves down from no highlight', () => {
+    const { goDown, goHome, moveHighlight } = setup(flat, -1);
+    goDown();
+    expect(goHome).not.toHaveBeenCalled();
+    expect(moveHighlight).toHaveBeenCalledWith(1);
+  });
+});

src/internal/components/listbox/utils/navigation.ts

@@ -0,0 +1,45 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { DropdownOption } from '../../option/interfaces';
+
+interface ListboxNavigationProps {
+  options: ReadonlyArray<DropdownOption>;
+  highlightedIndex: number;
+  highlightedOption: DropdownOption | undefined;
+  interactiveGroups: boolean;
+  moveHighlight: (direction: -1 | 1) => void;
+  goHome: () => void;
+  goEnd: () => void;
+}
+
+/**
+ * Arrow key handlers that wrap around the list: up from the first option goes to the end, down from the last row
+ * goes to the start. Without interactive groups, the first child of a leading group counts as the first option.
+ */
+export const getListboxNavigation = ({
+  options,
+  highlightedIndex,
+  highlightedOption,
+  interactiveGroups,
+  moveHighlight,
+  goHome,
+  goEnd,
+}: ListboxNavigationProps) => ({
+  goUp: () => {
+    if (
+      (!interactiveGroups && highlightedOption?.type === 'child' && highlightedIndex === 1) ||
+      highlightedIndex === 0
+    ) {
+      goEnd();
+      return;
+    }
+    moveHighlight(-1);
+  },
+  goDown: () => {
+    if (highlightedIndex === options.length - 1) {
+      goHome();
+      return;
+    }
+    moveHighlight(1);
+  },
+});

src/select/utils/use-select.ts

@@ -11,6 +11,7 @@ import { ItemProps } from '../../internal/components/listbox/parts/item';
 import { SelectionModel } from '../../internal/components/listbox/selection/interfaces';
 import { singleSelection } from '../../internal/components/listbox/selection/single-selection';
 import { connectOptionsByValue } from '../../internal/components/listbox/utils/connect-options';
+import { getListboxNavigation } from '../../internal/components/listbox/utils/navigation';
 import {
   getListboxOptionProps,
   getListMouseHandlers,
@@ -149,24 +150,15 @@ export function useSelect({
   };
 
   const activeKeyDownHandler = useMenuKeyboard({
-    goUp: () => {
-      if (
-        (!useInteractiveGroups && highlightedOption?.type === 'child' && highlightedIndex === 1) ||
-        highlightedIndex === 0
-      ) {
-        goEndWithKeyboard();
-        return;
-      }
-      moveHighlightWithKeyboard(-1);
-    },
-    goDown: () => {
-      if (highlightedIndex === options.length - 1) {
-        goHomeWithKeyboard();
-        return;
-      }
-
-      moveHighlightWithKeyboard(1);
-    },
+    ...getListboxNavigation({
+      options,
+      highlightedIndex,
+      highlightedOption,
+      interactiveGroups: useInteractiveGroups,
+      moveHighlight: moveHighlightWithKeyboard,
+      goHome: goHomeWithKeyboard,
+      goEnd: goEndWithKeyboard,
+    }),
     selectOption,
     goHome: goHomeWithKeyboard,
     goEnd: goEndWithKeyboard,