[composite] Simplify keyboard bookkeeping (#5249)

Author: atomiks

packages/react/src/internals/composite/composite.ts

@@ -19,19 +19,11 @@ export const END = 'End';
 export const PAGE_UP = 'PageUp';
 export const PAGE_DOWN = 'PageDown';
 
-export const HORIZONTAL_KEYS = new Set([ARROW_LEFT, ARROW_RIGHT]);
-export const HORIZONTAL_KEYS_WITH_EXTRA_KEYS = new Set([ARROW_LEFT, ARROW_RIGHT, HOME, END]);
-export const VERTICAL_KEYS = new Set([ARROW_UP, ARROW_DOWN]);
-export const VERTICAL_KEYS_WITH_EXTRA_KEYS = new Set([ARROW_UP, ARROW_DOWN, HOME, END]);
-export const ARROW_KEYS = new Set([...HORIZONTAL_KEYS, ...VERTICAL_KEYS]);
-export const COMPOSITE_KEYS = new Set([...ARROW_KEYS, HOME, END]);
+export const COMPOSITE_KEYS = new Set([ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, HOME, END]);
 
 export const SHIFT = 'Shift' as const;
-export const CONTROL = 'Control' as const;
-export const ALT = 'Alt' as const;
-export const META = 'Meta' as const;
-export const MODIFIER_KEYS = new Set([SHIFT, CONTROL, ALT, META] as const);
-export type ModifierKey = typeof MODIFIER_KEYS extends Set<infer Keys> ? Keys : never;
+export const MODIFIER_KEYS = [SHIFT, 'Control', 'Alt', 'Meta'] as const;
+export type ModifierKey = (typeof MODIFIER_KEYS)[number];
 
 function isInputElement(element: EventTarget): element is HTMLInputElement {
   return isHTMLElement(element) && element.tagName === 'INPUT';

packages/react/src/internals/composite/root/CompositeRoot.test.tsx

@@ -186,6 +186,33 @@ describe('Composite', () => {
       expect(item2).not.toHaveFocus();
     });
 
+    it.each([
+      { orientation: 'horizontal' as const, key: 'ArrowRight', prevented: true },
+      { orientation: 'horizontal' as const, key: 'ArrowDown', prevented: false },
+      { orientation: 'vertical' as const, key: 'ArrowDown', prevented: true },
+      { orientation: 'vertical' as const, key: 'ArrowRight', prevented: false },
+      { orientation: 'both' as const, key: 'ArrowRight', prevented: true },
+      { orientation: 'both' as const, key: 'ArrowDown', prevented: true },
+    ])(
+      'sets default prevention to $prevented for $key with $orientation orientation',
+      async ({ orientation, key, prevented }) => {
+        await render(
+          <CompositeRoot orientation={orientation}>
+            <CompositeItem data-testid="1">1</CompositeItem>
+            <CompositeItem data-testid="2">2</CompositeItem>
+          </CompositeRoot>,
+        );
+
+        const item1 = screen.getByTestId('1');
+        act(() => item1.focus());
+
+        const allowed = fireEvent.keyDown(item1, { key });
+        await flushMicrotasks();
+
+        expect(allowed).toBe(!prevented);
+      },
+    );
+
     it.skipIf(isJSDOM)('updates the order of items', async () => {
       function App(props: { items: string[] }) {
         return (
@@ -464,6 +491,22 @@ describe('Composite', () => {
   });
 
   describe('grid', () => {
+    it('prevents default for grid navigation outside the configured orientation', async () => {
+      await render(
+        <CompositeRoot grid={threeColsGrid} orientation="horizontal">
+          <TestGridItems />
+        </CompositeRoot>,
+      );
+
+      const item1 = screen.getByTestId('1');
+      act(() => item1.focus());
+
+      const allowed = fireEvent.keyDown(item1, { key: 'ArrowDown' });
+      await flushMicrotasks();
+
+      expect(allowed).toBe(false);
+    });
+
     it('uniform 1x1 items', async () => {
       function App() {
         return (

packages/react/src/internals/composite/root/useCompositeRoot.ts

@@ -8,17 +8,12 @@ import type { TextDirection } from '../../direction-context/DirectionContext';
 import {
   COMPOSITE_KEYS,
   ARROW_DOWN,
-  ARROW_KEYS,
   ARROW_LEFT,
   ARROW_RIGHT,
   ARROW_UP,
   END,
   HOME,
-  HORIZONTAL_KEYS,
-  HORIZONTAL_KEYS_WITH_EXTRA_KEYS,
   MODIFIER_KEYS,
-  VERTICAL_KEYS,
-  VERTICAL_KEYS_WITH_EXTRA_KEYS,
   findNonDisabledListIndex,
   getMaxListIndex,
   getMinListIndex,
@@ -182,8 +177,8 @@ export function useCompositeRoot(params: UseCompositeRootParameters) {
   // Stable so that `relayKeyboardEvent` does not invalidate identity-sensitive
   // consumers (the `CompositeRootContext` value and trigger data forwarding).
   const onKeyDown = useStableCallback((event: React.KeyboardEvent) => {
-    const RELEVANT_KEYS = enableHomeAndEndKeys ? COMPOSITE_KEYS : ARROW_KEYS;
-    if (!RELEVANT_KEYS.has(event.key)) {
+    const isHomeOrEnd = event.key === HOME || event.key === END;
+    if (!COMPOSITE_KEYS.has(event.key) || (!enableHomeAndEndKeys && isHomeOrEnd)) {
       return;
     }
 
@@ -199,17 +194,9 @@ export function useCompositeRoot(params: UseCompositeRootParameters) {
     const isRtl = direction === 'rtl';
 
     const horizontalForwardKey = isRtl ? ARROW_LEFT : ARROW_RIGHT;
-    const forwardKey = {
-      horizontal: horizontalForwardKey,
-      vertical: ARROW_DOWN,
-      both: horizontalForwardKey,
-    }[orientation];
     const horizontalBackwardKey = isRtl ? ARROW_RIGHT : ARROW_LEFT;
-    const backwardKey = {
-      horizontal: horizontalBackwardKey,
-      vertical: ARROW_UP,
-      both: horizontalBackwardKey,
-    }[orientation];
+    const forwardKey = orientation === 'vertical' ? ARROW_DOWN : horizontalForwardKey;
+    const backwardKey = orientation === 'vertical' ? ARROW_UP : horizontalBackwardKey;
 
     const target = getTarget(event.nativeEvent);
     if (target != null && isNativeInput(target) && !isElementDisabled(target)) {
@@ -250,25 +237,12 @@ export function useCompositeRoot(params: UseCompositeRootParameters) {
       });
     }
 
-    const forwardKeys = {
-      horizontal: [horizontalForwardKey],
-      vertical: [ARROW_DOWN],
-      both: [horizontalForwardKey, ARROW_DOWN],
-    }[orientation];
-
-    const backwardKeys = {
-      horizontal: [horizontalBackwardKey],
-      vertical: [ARROW_UP],
-      both: [horizontalBackwardKey, ARROW_UP],
-    }[orientation];
-
-    const preventedKeys = isGrid
-      ? RELEVANT_KEYS
-      : {
-          horizontal: enableHomeAndEndKeys ? HORIZONTAL_KEYS_WITH_EXTRA_KEYS : HORIZONTAL_KEYS,
-          vertical: enableHomeAndEndKeys ? VERTICAL_KEYS_WITH_EXTRA_KEYS : VERTICAL_KEYS,
-          both: RELEVANT_KEYS,
-        }[orientation];
+    const isForwardKey =
+      (orientation !== 'vertical' && event.key === horizontalForwardKey) ||
+      (orientation !== 'horizontal' && event.key === ARROW_DOWN);
+    const isBackwardKey =
+      (orientation !== 'vertical' && event.key === horizontalBackwardKey) ||
+      (orientation !== 'horizontal' && event.key === ARROW_UP);
 
     if (enableHomeAndEndKeys) {
       if (event.key === HOME) {
@@ -278,24 +252,21 @@ export function useCompositeRoot(params: UseCompositeRootParameters) {
       }
     }
 
-    if (
-      nextIndex === highlightedIndex &&
-      (forwardKeys.includes(event.key) || backwardKeys.includes(event.key))
-    ) {
-      if (loopFocus && nextIndex === maxIndex && forwardKeys.includes(event.key)) {
+    if (nextIndex === highlightedIndex && (isForwardKey || isBackwardKey)) {
+      if (loopFocus && nextIndex === maxIndex && isForwardKey) {
         nextIndex = minIndex;
         if (onLoop) {
           nextIndex = onLoop(event, highlightedIndex, nextIndex, elementsRef);
         }
-      } else if (loopFocus && nextIndex === minIndex && backwardKeys.includes(event.key)) {
+      } else if (loopFocus && nextIndex === minIndex && isBackwardKey) {
         nextIndex = maxIndex;
         if (onLoop) {
           nextIndex = onLoop(event, highlightedIndex, nextIndex, elementsRef);
         }
       } else {
         nextIndex = findNonDisabledListIndex(elementsRef.current, {
           startingIndex: nextIndex,
-          decrement: backwardKeys.includes(event.key),
+          decrement: isBackwardKey,
           disabledIndices,
         });
       }
@@ -306,7 +277,7 @@ export function useCompositeRoot(params: UseCompositeRootParameters) {
         event.stopPropagation();
       }
 
-      if (preventedKeys.has(event.key)) {
+      if (isGrid || isHomeOrEnd || isForwardKey || isBackwardKey) {
         event.preventDefault();
       }
       onHighlightedIndexChange(nextIndex, true);