panelui-native 0.63.0 → 0.66.1

package/src/components/badge/index.tsx

@@ -20,7 +20,10 @@ const badgeVariants = tv({
       default: { root: 'bg-primary', label: 'text-primary-foreground' },
       secondary: { root: 'bg-secondary', label: 'text-secondary-foreground' },
       outline: { root: 'border-border bg-transparent', label: 'text-foreground' },
-      destructive: { root: 'bg-destructive', label: 'text-white' },
+      destructive: {
+        root: 'bg-destructive',
+        label: 'text-destructive-solid-foreground',
+      },
       success: { root: 'bg-success-subtle', label: 'text-success-foreground' },
       warning: { root: 'bg-warning-subtle', label: 'text-warning-foreground' },
       info: { root: 'bg-info-subtle', label: 'text-info-foreground' },

package/src/components/bar-chart/index.tsx

@@ -1083,6 +1083,15 @@ function BarChartTooltip({ formatValue, formatX, className }: BarChartTooltipPro
   const width = plot.width;
   const height = plot.height;
 
+  /*
+   * The readout's own height, measured rather than assumed. Sideways it has to
+   * be clamped inside the plot vertically, and how tall it is depends on how
+   * many series are listed in it — a constant here would either let a
+   * three-series readout hang off the bottom or reserve room a one-series
+   * readout never uses.
+   */
+  const labelHeight = useSharedValue(0);
+
   /*
    * Declared inside the memo, next to its callers: a worklet may only call
    * another worklet, and the rule is enforced by crashing rather than warning.
@@ -1118,8 +1127,17 @@ function BarChartTooltip({ formatValue, formatX, className }: BarChartTooltipPro
       });
   }, [total, left, top, width, height, horizontal, activeIndex, setActiveIndexJS]);
 
-  // The readout centres over its band and is clamped inside the plot, so it
-  // never runs off the edge at the first or last one.
+  /*
+   * The readout centres over its band and is clamped inside the plot, so it
+   * never runs off the edge at the first or last one.
+   *
+   * Which axis the band runs along is the whole difference between the two
+   * orientations. Upright, the bands are side by side, so the readout slides
+   * across and sits above them all. Sideways, the bands are stacked down the
+   * plot, so it slides *down* to the row it is describing and stays centred
+   * across — held at the top instead, it would name the row under the finger
+   * while covering the first one, which is the row a reader checks it against.
+   */
   const labelStyle = useAnimatedStyle(() => {
     const index = activeIndex.value;
     if (index < 0 || !total) return { opacity: 0 };
@@ -1130,7 +1148,23 @@ function BarChartTooltip({ formatValue, formatX, className }: BarChartTooltipPro
       plot.left + plot.width - half,
       Math.max(plot.left + half, horizontal ? plot.left + plot.width / 2 : centre)
     );
-    return { opacity: 1, transform: [{ translateX: clamped - half }] };
+
+    if (!horizontal) {
+      return { opacity: 1, transform: [{ translateX: clamped - half }] };
+    }
+
+    // Until the first measurement lands the height is zero, which clamps to
+    // the top of the plot — the same place it used to sit, rather than a jump
+    // from somewhere it never was.
+    const tall = labelHeight.value;
+    const y = Math.min(
+      plot.top + Math.max(plot.height - tall, 0),
+      Math.max(plot.top, centre - tall / 2)
+    );
+    return {
+      opacity: 1,
+      transform: [{ translateX: clamped - half }, { translateY: y }],
+    };
   });
 
   const active = activeIndexJS >= 0 ? data[activeIndexJS] : null;
@@ -1151,6 +1185,9 @@ function BarChartTooltip({ formatValue, formatX, className }: BarChartTooltipPro
         >
           {active ? (
             <View
+              onLayout={(event) => {
+                labelHeight.value = event.nativeEvent.layout.height;
+              }}
               className={cn(
                 'rounded-xl border border-border bg-popover px-2.5 py-1.5 shadow-lg',
                 className

package/src/components/bottom-sheet/index.tsx

@@ -31,7 +31,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { tv } from 'tailwind-variants';
 import { getNativeUI } from '../../native';
 import { XIcon } from '../../icons';
-import { Portal } from '../../primitives/portal';
+import { ModalPortal } from '../../primitives/portal';
 import { Scrim } from '../../primitives/scrim';
 import { Text, textChildren } from '../../primitives/text';
 import { useBackHandler } from '../../hooks/use-back-handler';
@@ -236,6 +236,9 @@ export interface BottomSheetContentProps extends ViewProps {
    * Frost the screen behind the sheet instead of dimming it, so what is behind
    * stays legible as shape and colour while losing its detail. Needs the
    * optional `expo-blur`; without it this dims, rather than failing.
+   *
+   * Someone who has Reduce Transparency switched on gets an opaque
+   * backdrop instead, which is the whole point of the setting.
    */
   blur?: boolean;
   /**
@@ -435,7 +438,7 @@ function BottomSheetContent({
   if (!open) return null;
 
   return (
-    <Portal>
+    <ModalPortal>
       {/* Portal content mounts under PortalHost, outside this provider's
           subtree — re-provide the context so nested consumers keep working. */}
       <BottomSheetContext.Provider value={context}>
@@ -507,7 +510,7 @@ function BottomSheetContent({
         </GestureDetector>
         </View>
       </BottomSheetContext.Provider>
-    </Portal>
+    </ModalPortal>
   );
 }
 

package/src/components/button/index.tsx

@@ -42,8 +42,9 @@ const buttonVariants = tv({
       },
       destructive: {
         root: 'border-destructive bg-destructive shadow-sm',
-        label: 'text-white',
-        spinner: 'border-white/32 border-t-white',
+        label: 'text-destructive-solid-foreground',
+        spinner:
+          'border-destructive-solid-foreground/32 border-t-destructive-solid-foreground',
       },
       /** Neutral surface for third-party sign-in, sized for a full-width stack. */
       social: {
@@ -53,8 +54,8 @@ const buttonVariants = tv({
       },
     },
     size: {
-      sm: { root: 'h-9 gap-1.5 px-2.5', label: 'text-sm' },
-      md: { root: 'h-11 px-4', label: 'text-base' },
+      sm: { root: 'h-9 min-w-9 gap-1.5 px-2.5', label: 'text-sm' },
+      md: { root: 'h-11 min-w-11 px-4', label: 'text-base' },
       lg: { root: 'h-12 px-6', label: 'text-lg' },
       icon: { root: 'h-11 w-11 px-0' },
     },
@@ -134,18 +135,16 @@ const ATTACHED = 'rounded-none border-transparent shadow-none active:bg-accent';
 
 const SPINNER_SIZE = { sm: 'sm', md: 'sm', lg: 'md', icon: 'sm' } as const;
 
+/** Extra room around the styled sizes so even the compact button reaches 48dp. */
+const BUTTON_HIT_SLOP = { sm: 6, md: 2, lg: 0, icon: 2 } as const;
+
 /**
  * The theme token each variant's content reads against. Icons in the content
  * slots inherit the resolved value, so they follow the theme automatically.
- *
- * `destructive` is absent on purpose: its background is a saturated red in
- * every theme, so its content is always white rather than a themed token.
  */
-const CONTENT_COLOR_VAR: Record<
-  Exclude<NonNullable<ButtonVariantProps['variant']>, 'destructive'>,
-  string
-> = {
+const CONTENT_COLOR_VAR: Record<NonNullable<ButtonVariantProps['variant']>, string> = {
   primary: '--color-primary-foreground',
+  destructive: '--color-destructive-solid-foreground',
   secondary: '--color-secondary-foreground',
   outline: '--color-foreground',
   ghost: '--color-foreground',
@@ -328,17 +327,9 @@ export const Button = forwardRef<View, ButtonProps>(
     // Icons in the content slots inherit this, so they stay legible when the
     // theme inverts the button's background. Without it every caller has to
     // hardcode a hex that is wrong in one theme or the other.
-    const themedColor = useCSSVariable(
-      CONTENT_COLOR_VAR[
-        resolvedVariant === 'destructive' ? 'primary' : (resolvedVariant ?? 'primary')
-      ]
-    );
+    const themedColor = useCSSVariable(CONTENT_COLOR_VAR[resolvedVariant ?? 'primary']);
     const contentColor =
-      resolvedVariant === 'destructive'
-        ? '#ffffff'
-        : typeof themedColor === 'string'
-          ? themedColor
-          : undefined;
+      typeof themedColor === 'string' ? themedColor : undefined;
 
     if (nativeUI) {
       const { Host, Button: NativeButton, RNHostView } = nativeUI;
@@ -446,6 +437,9 @@ export const Button = forwardRef<View, ButtonProps>(
           accessibilityRole="button"
           accessibilityState={{ disabled: isDisabled, busy: loading }}
           disabled={isDisabled}
+          // Joined segments cannot borrow room from each other without making
+          // two actions claim the same pixels. ButtonGroup owns that layout.
+          hitSlop={attached ? undefined : BUTTON_HIT_SLOP[resolvedSize ?? 'md']}
           // Before the spread, so a caller can still ask for the scale back.
           pressScale={attached ? 1 : undefined}
           className={root({ className: cn(attached && ATTACHED, className) })}

package/src/components/carousel/carousel-lifecycle.ts

@@ -0,0 +1,74 @@
+import { useEffect, useRef } from 'react';
+
+export function normalizeCarouselIndex(index: number, count: number, loop: boolean): number {
+  'worklet';
+  if (count <= 0 || !Number.isFinite(index)) return 0;
+  if (loop) return ((index % count) + count) % count;
+  return Math.max(0, Math.min(index, count - 1));
+}
+
+interface CarouselIndexLifecycleOptions {
+  requestedIndex: number;
+  count: number;
+  countKnown: boolean;
+  loop: boolean;
+  onCorrection: (index: number) => void;
+  onSettledIndex: (index: number) => void;
+}
+
+/** Keeps the rendered position inside the current run and reports corrections once. */
+export function useCarouselIndexLifecycle({
+  requestedIndex,
+  count,
+  countKnown,
+  loop,
+  onCorrection,
+  onSettledIndex,
+}: CarouselIndexLifecycleOptions): number {
+  const index = countKnown
+    ? normalizeCarouselIndex(requestedIndex, count, loop)
+    : requestedIndex;
+  const reportedCorrection = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!countKnown) return;
+    onSettledIndex(index);
+
+    if (index === requestedIndex) {
+      reportedCorrection.current = null;
+      return;
+    }
+
+    const correction = `${requestedIndex}:${count}:${loop}`;
+    if (reportedCorrection.current === correction) return;
+    reportedCorrection.current = correction;
+    onCorrection(index);
+  }, [count, countKnown, index, loop, onCorrection, onSettledIndex, requestedIndex]);
+
+  return index;
+}
+
+interface CarouselAutoplayOptions {
+  enabled: boolean;
+  index: number;
+  count: number;
+  loop: boolean;
+  interval: number;
+  onAdvance: (index: number) => void;
+}
+
+/** One autoplay request per accepted index; configuration changes re-arm it. */
+export function useCarouselAutoplay({
+  enabled,
+  index,
+  count,
+  loop,
+  interval,
+  onAdvance,
+}: CarouselAutoplayOptions): void {
+  useEffect(() => {
+    if (!enabled || count <= 1 || (!loop && index >= count - 1)) return;
+    const timer = setTimeout(() => onAdvance(index + 1), interval);
+    return () => clearTimeout(timer);
+  }, [count, enabled, index, interval, loop, onAdvance]);
+}

package/src/components/carousel/index.tsx

@@ -50,11 +50,13 @@ import {
   Children,
   createContext,
   forwardRef,
+  isValidElement,
   useCallback,
   useContext,
   useEffect,
   useImperativeHandle,
   useMemo,
+  useRef,
   useState,
   type ReactNode,
 } from 'react';
@@ -74,6 +76,11 @@ import Animated, {
 import { ChevronLeftIcon, ChevronRightIcon } from '../../icons';
 import { Text, textChildren } from '../../primitives/text';
 import { cn } from '../../utils/cn';
+import {
+  normalizeCarouselIndex,
+  useCarouselAutoplay,
+  useCarouselIndexLifecycle,
+} from './carousel-lifecycle';
 
 /** Settles the run onto a whole index. Tuned to stop rather than to bounce. */
 const SPRING = { damping: 22, stiffness: 190, mass: 0.55 } as const;
@@ -161,8 +168,7 @@ export function useCarouselState() {
  */
 function wrap(value: number, count: number) {
   'worklet';
-  if (count <= 0) return 0;
-  return ((value % count) + count) % count;
+  return normalizeCarouselIndex(value, count, true);
 }
 
 /**
@@ -183,6 +189,17 @@ function distance(index: number, progress: number, count: number, loop: boolean)
   return raw;
 }
 
+/** Drop the empty nodes React omits before assigning slide positions. */
+function renderableChildren(children: ReactNode) {
+  // React treats a Fragment as one child here. Keep that keyed boundary rather
+  // than recursively flattening it and changing React's reconciliation model.
+  return Children.toArray(children);
+}
+
+function renderableChildKey(child: ReactNode, index: number) {
+  return isValidElement(child) && child.key !== null ? child.key : index;
+}
+
 export interface CarouselProps extends ViewProps {
   className?: string;
   /** How the slides are arranged, and how they move. */
@@ -203,11 +220,14 @@ export interface CarouselProps extends ViewProps {
    * wants; set it for a run that shows more than one at a time.
    */
   itemSize?: number;
-  /** Advance on a timer. Stops for good the first time a finger lands. */
+  /** Advance on a timer. Stops at the non-looping end or after the first touch. */
   autoplay?: boolean;
   /** Milliseconds each slide is held when `autoplay` is set. */
   autoplayInterval?: number;
-  /** Controlled active slide. */
+  /**
+   * Controlled active slide. Requests move visually only after this value changes;
+   * an index invalidated by a child-count change is normalized and reported.
+   */
   index?: number;
   /** Starting slide when uncontrolled. */
   defaultIndex?: number;
@@ -245,14 +265,15 @@ const CarouselRoot = forwardRef<CarouselHandle, CarouselProps>(function Carousel
 ) {
   const [size, setSize] = useState({ width: 0, height: 0 });
   const [internalIndex, setInternalIndex] = useState(defaultIndex);
-  const [count, setCount] = useState(0);
+  const [count, setCountValue] = useState(0);
+  const [countKnown, setCountKnown] = useState(false);
   const [touched, setTouched] = useState(false);
   const reducedMotion = useReducedMotion();
 
   const isControlled = indexProp !== undefined;
-  const index = isControlled ? indexProp : internalIndex;
+  const requestedIndex = isControlled ? indexProp : internalIndex;
 
-  const progress = useSharedValue(defaultIndex);
+  const progress = useSharedValue(indexProp ?? defaultIndex);
   const engaged = useSharedValue(0);
 
   // A deck is dealt from the top of a pile, so it is dragged sideways whatever
@@ -261,6 +282,11 @@ const CarouselRoot = forwardRef<CarouselHandle, CarouselProps>(function Carousel
   const along = axis === 'horizontal' ? size.width : size.height;
   const itemSize = itemSizeProp ?? along ?? 0;
 
+  const setCount = useCallback((next: number) => {
+    setCountValue(next);
+    setCountKnown(true);
+  }, []);
+
   const setIndex = useCallback(
     (next: number) => {
       if (!isControlled) setInternalIndex(next);
@@ -269,28 +295,68 @@ const CarouselRoot = forwardRef<CarouselHandle, CarouselProps>(function Carousel
     [isControlled, onIndexChange]
   );
 
-  const scrollTo = useCallback(
-    (target: number) => {
-      if (count <= 0) return;
-      const settled = loop ? wrap(target, count) : Math.max(0, Math.min(target, count - 1));
+  /*
+   * The slide the run is currently travelling to.
+   *
+   * Moving the run and recording where it went are two steps: `scrollTo` starts
+   * the spring, then the new index arrives back through state and the lifecycle
+   * effect asks for it again. Without this the second ask restarts the spring a
+   * frame into the first — from a standstill, so a flick loses the momentum it
+   * was carrying. Remembering the target lets the echo be recognised and
+   * ignored, while a genuine request for the same slide still animates, because
+   * that one comes through `scrollTo` and sets this first.
+   */
+  const animatedTarget = useRef<number | null>(null);
 
+  const animateTo = useCallback(
+    (target: number) => {
+      animatedTarget.current = target;
       if (reducedMotion) {
-        progress.value = settled;
+        progress.value = target;
       } else if (loop) {
         // Spring to the nearest representation of the target rather than to the
         // target itself, so a wrap from the last slide to the first travels one
         // step forward instead of winding all the way back through the run.
-        const shortest = progress.value + distance(settled, progress.value, count, true);
+        const shortest = progress.value + distance(target, progress.value, count, true);
         progress.value = withSpring(shortest, SPRING, (finished) => {
           if (finished) progress.value = wrap(progress.value, count);
         });
       } else {
-        progress.value = withSpring(settled, SPRING);
+        progress.value = withSpring(target, SPRING);
       }
+    },
+    [count, loop, progress, reducedMotion]
+  );
+
+  const settleIndex = useCallback(
+    (next: number) => {
+      if (animatedTarget.current === next) return;
+      if (Math.abs(progress.value - next) >= 0.001) animateTo(next);
+    },
+    [animateTo, progress]
+  );
+
+  const index = useCarouselIndexLifecycle({
+    requestedIndex,
+    count,
+    countKnown,
+    loop,
+    onCorrection: setIndex,
+    onSettledIndex: settleIndex,
+  });
 
+  const scrollTo = useCallback(
+    (target: number) => {
+      if (count <= 0) return;
+      const settled = normalizeCarouselIndex(target, count, loop);
+
+      // A controlled request belongs to its owner. The finger may move the run,
+      // but after release it returns to the current prop until the owner accepts
+      // the request by changing that prop.
+      animateTo(isControlled ? index : settled);
       setIndex(settled);
     },
-    [count, loop, progress, reducedMotion, setIndex]
+    [animateTo, count, index, isControlled, loop, setIndex]
   );
 
   const next = useCallback(() => scrollTo(index + 1), [index, scrollTo]);
@@ -298,23 +364,19 @@ const CarouselRoot = forwardRef<CarouselHandle, CarouselProps>(function Carousel
 
   useImperativeHandle(ref, () => ({ next, previous, scrollTo }), [next, previous, scrollTo]);
 
-  // A controlled index moving underneath us animates rather than jumps.
-  useEffect(() => {
-    if (!isControlled || indexProp === undefined || count <= 0) return;
-    if (Math.abs(progress.value - indexProp) < 0.001) return;
-    progress.value = reducedMotion ? indexProp : withSpring(indexProp, SPRING);
-  }, [isControlled, indexProp, count, progress, reducedMotion]);
-
   /*
    * Autoplay stops for good the first time a finger lands, rather than pausing.
    * Someone who has taken hold of the run is reading it, and having it start
    * moving again a few seconds later is the behaviour everybody hates.
    */
-  useEffect(() => {
-    if (!autoplay || touched || count <= 1) return;
-    const timer = setInterval(() => scrollTo(index + 1), autoplayInterval);
-    return () => clearInterval(timer);
-  }, [autoplay, touched, count, index, autoplayInterval, scrollTo]);
+  useCarouselAutoplay({
+    enabled: autoplay && !touched,
+    index,
+    count,
+    loop,
+    interval: autoplayInterval,
+    onAdvance: scrollTo,
+  });
 
   const settle = useCallback(
     (target: number) => {
@@ -438,13 +500,13 @@ export interface CarouselContentProps extends ViewProps {
  */
 function CarouselContent({ className, children, ...props }: CarouselContentProps) {
   const { setCount, variant, orientation, align } = useCarousel('Carousel.Content');
-  const slides = Children.count(children);
+  const slides = renderableChildren(children);
   const horizontal = orientation === 'horizontal';
   const centred = align === 'center' || variant === 'coverflow' || variant === 'stack';
 
   useEffect(() => {
-    setCount(slides);
-  }, [setCount, slides]);
+    setCount(slides.length);
+  }, [setCount, slides.length]);
 
   return (
     <View
@@ -465,8 +527,10 @@ function CarouselContent({ className, children, ...props }: CarouselContentProps
         props.style,
       ]}
     >
-      {Children.map(children, (child, index) => (
-        <ItemIndexContext.Provider value={index}>{child}</ItemIndexContext.Provider>
+      {slides.map((child, index) => (
+        <ItemIndexContext.Provider key={renderableChildKey(child, index)} value={index}>
+          {child}
+        </ItemIndexContext.Provider>
       ))}
     </View>
   );
@@ -688,16 +752,30 @@ function CarouselDots({
             key={dot}
             disabled={!interactive}
             onPress={() => scrollTo(dot)}
-            hitSlop={6}
             accessibilityRole="tab"
             accessibilityLabel={`Slide ${dot + 1} of ${count}`}
             accessibilityState={{ selected: active }}
-            className={cn(
-              'rounded-full',
-              horizontal ? (active ? 'h-1 w-4' : 'h-1 w-1') : active ? 'h-4 w-1' : 'h-1 w-1',
-              active ? 'bg-foreground' : 'bg-foreground/30'
-            )}
-          />
+            // 24, not the 48 the buttons get. Dots sit a few points apart, so
+            // a 48 box would either overlap its neighbours — making a tap near
+            // the join land on the wrong slide — or push a five-slide run out
+            // to the width of the screen. 24 clears the minimum with the pitch
+            // still wider than the target, so no two dots contend for a touch.
+            className={cn('items-center justify-center', interactive && 'h-6 w-6')}
+          >
+            <View
+              className={cn(
+                'rounded-full',
+                horizontal
+                  ? active
+                    ? 'h-1 w-4'
+                    : 'h-1 w-1'
+                  : active
+                    ? 'h-4 w-1'
+                    : 'h-1 w-1',
+                active ? 'bg-foreground' : 'bg-foreground/30'
+              )}
+            />
+          </Pressable>
         );
       })}
     </View>
@@ -723,12 +801,11 @@ function makeArrow(direction: 'previous' | 'next') {
       <Pressable
         disabled={disabled}
         onPress={direction === 'next' ? next : previous}
-        hitSlop={8}
         accessibilityRole="button"
         accessibilityLabel={direction === 'next' ? 'Next slide' : 'Previous slide'}
         accessibilityState={{ disabled }}
         className={cn(
-          'items-center justify-center rounded-full p-1',
+          'h-12 w-12 items-center justify-center rounded-full',
           disabled ? 'opacity-30' : 'active:bg-foreground/10',
           className
         )}

package/src/components/checkbox/index.tsx

@@ -13,7 +13,7 @@ import { Text } from '../../primitives/text';
 
 const checkboxVariants = tv({
   slots: {
-    row: 'flex-row items-center gap-2.5',
+    row: 'min-h-12 min-w-12 flex-row items-center gap-2.5',
     box: 'h-5 w-5 items-center justify-center rounded-md border border-input bg-background',
     fill: 'absolute inset-0 items-center justify-center rounded-md bg-primary',
     content: 'flex-1 gap-0.5',
@@ -130,7 +130,6 @@ export const Checkbox = forwardRef<View, CheckboxProps>(
         disabled={disabled}
         // An indeterminate box resolves upward: the press turns the group on.
         onPress={() => onCheckedChange?.(indeterminate ? true : !checked)}
-        hitSlop={8}
         // A description makes the row two lines tall — align the box to the
         // label rather than centring it against the whole block.
         className={slots.row({

package/src/components/context-menu/context-menu-invocation.ts

@@ -0,0 +1,44 @@
+export type ContextMenuInvocation = 'menu' | 'press';
+
+export interface ContextMenuKey {
+  key: string;
+  shiftKey?: boolean;
+  altKey?: boolean;
+  ctrlKey?: boolean;
+  metaKey?: boolean;
+  repeat?: boolean;
+}
+
+/** The cross-platform subset ContextMenu consumes from a key-down event. */
+export interface ContextMenuKeyDownEvent {
+  nativeEvent: ContextMenuKey;
+  preventDefault: () => void;
+  isDefaultPrevented: () => boolean;
+}
+
+/** Resolve a screen-reader/switch action to the same paths touch users have. */
+export function contextMenuAccessibilityInvocation(
+  actionName: string,
+  hasPrimaryAction: boolean,
+  disabled: boolean
+): ContextMenuInvocation | undefined {
+  if (disabled) return undefined;
+  if (actionName === 'showMenu') return 'menu';
+  if (actionName === 'activate') return hasPrimaryAction ? 'press' : 'menu';
+  return undefined;
+}
+
+/** Resolve web/hardware keys without stealing modified shortcuts or repeats. */
+export function contextMenuKeyInvocation(
+  event: ContextMenuKey,
+  hasPrimaryAction: boolean,
+  disabled: boolean
+): ContextMenuInvocation | undefined {
+  if (disabled || event.repeat) return undefined;
+  if (event.key === 'ContextMenu' || (event.key === 'F10' && event.shiftKey)) return 'menu';
+  if (event.altKey || event.ctrlKey || event.metaKey) return undefined;
+  if (event.key === 'Enter' || event.key === ' ') {
+    return hasPrimaryAction ? 'press' : 'menu';
+  }
+  return undefined;
+}