Function TrayHeaderWrapper

packages/@adobe/react-spectrum/src/menu/Menu.tsx:150–268

(props: {
  children: ReactNode;
  isSubmenu?: boolean;
  hasOpenSubmenu?: boolean;
  parentMenuTreeState?: TreeState<any>;
  rootMenuTriggerState?: RootMenuTriggerState;
  onBackButtonPress?: () => void;
  wrapperKeyDown?: KeyboardEventHandler<HTMLDivElement> | undefined;
  menuRef?: RefObject<HTMLDivElement | null>;
})

}) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;

export function TrayHeaderWrapper(props: {
  children: ReactNode;
  isSubmenu?: boolean;
  hasOpenSubmenu?: boolean;
  parentMenuTreeState?: TreeState<any>;
  rootMenuTriggerState?: RootMenuTriggerState;
  onBackButtonPress?: () => void;
  wrapperKeyDown?: KeyboardEventHandler<HTMLDivElement> | undefined;
  menuRef?: RefObject<HTMLDivElement | null>;
}): ReactNode {
  let {
    children,
    isSubmenu,
    hasOpenSubmenu,
    parentMenuTreeState,
    rootMenuTriggerState,
    onBackButtonPress,
    wrapperKeyDown,
    menuRef
  } = props;
  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');
  let lastKey = rootMenuTriggerState?.expandedKeysStack.slice(-1)[0];
  let backButtonText = '';
  if (lastKey != null) {
    backButtonText = parentMenuTreeState?.collection.getItem(lastKey)?.textValue ?? '';
  }
  let backButtonLabel = stringFormatter.format('backButton', {
    prevMenuButton: backButtonText ?? ''
  });
  let headingId = useSlotId();
  let isMobile = useIsMobileDevice();
  let {direction} = useLocale();

  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');
  useLayoutEffect(() => {
    if (!hasOpenSubmenu) {
      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');
    }
  }, [hasOpenSubmenu, isMobile]);

  let timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  let handleBackButtonPress = () => {
    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');
    timeoutRef.current = setTimeout(() => {
      onBackButtonPress?.();
    }, 220); // Matches transition duration
  };

  useEffect(() => {
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, []);

  // When opening submenu in tray, focus the first item in the submenu after animation completes
  // This fixes an issue with iOS VO where the closed submenu was getting focus