fix(website) new useMenu hook to adjust null values to undefined

Author: groovecoder

frontend/src/components/dashboard/aliases/AliasGenerationButton.tsx

@@ -2,32 +2,22 @@ import {
   FocusScope,
   useOverlay,
   useMenuTrigger,
-  useMenu,
   DismissButton,
   mergeProps,
   useMenuItem,
   useFocus,
   useButton,
-  AriaOverlayProps,
 } from "react-aria";
 import { AriaMenuItemProps } from "@react-aria/menu";
 import {
   Item,
-  MenuTriggerState,
   TreeProps,
   TreeState,
   useMenuTriggerState,
   useOverlayTriggerState,
   useTreeState,
 } from "react-stately";
-import {
-  HTMLAttributes,
-  Key,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { Key, ReactNode, useEffect, useRef, useState } from "react";
 import styles from "./AliasGenerationButton.module.scss";
 import { ArrowDownIcon, PlusIcon } from "../../Icons";
 import { ProfileData } from "../../../hooks/api/profile";
@@ -41,6 +31,7 @@ import { CustomAddressGenerationModal } from "./CustomAddressGenerationModal";
 import { useGaEvent } from "../../../hooks/gaEvent";
 import { useL10n } from "../../../hooks/l10n";
 import { isFlagActive } from "../../../functions/waffle";
+import { MenuPopupProps, useMenu } from "../../../hooks/menu";
 import { AddressPickerModal } from "./AddressPickerModal";
 
 export type Props = {
@@ -301,12 +292,7 @@ const AliasTypeMenuButton = (props: AliasTypeMenuButtonProps) => {
   );
 };
 
-type AliasTypeMenuPopupProps = TreeProps<Record<string, never>> & {
-  onAction: AriaMenuItemProps["onAction"];
-  domProps: HTMLAttributes<HTMLElement>;
-  onClose?: AriaOverlayProps["onClose"];
-  autoFocus?: MenuTriggerState["focusStrategy"];
-};
+type AliasTypeMenuPopupProps = MenuPopupProps<Record<string, never>>;
 const AliasTypeMenuPopup = (props: AliasTypeMenuPopupProps) => {
   const popupState = useTreeState({ ...props, selectionMode: "none" });
 

frontend/src/components/layout/navigation/AppPicker.tsx

@@ -3,30 +3,19 @@ import {
   useTreeState,
   TreeProps,
   TreeState,
-  MenuTriggerState,
   Item,
 } from "react-stately";
 import {
   useMenuTrigger,
   useButton,
-  useMenu,
   useOverlay,
   FocusScope,
   DismissButton,
   mergeProps,
   useMenuItem,
   useFocus,
-  AriaOverlayProps,
 } from "react-aria";
-import {
-  HTMLAttributes,
-  Key,
-  ReactNode,
-  useRef,
-  useState,
-  useEffect,
-  RefObject,
-} from "react";
+import { Key, ReactNode, useRef, useState, useEffect, RefObject } from "react";
 import { AriaMenuItemProps } from "@react-aria/menu";
 import styles from "./AppPicker.module.scss";
 import FirefoxLogo from "../images/fx.png";
@@ -41,6 +30,7 @@ import { BentoIcon } from "../../Icons";
 import Image from "../../Image";
 import { useGaEvent } from "../../../hooks/gaEvent";
 import { useL10n } from "../../../hooks/l10n";
+import { MenuPopupProps, useMenu } from "../../../hooks/menu";
 
 const getProducts = (referringSiteUrl: string) => ({
   monitor: {
@@ -302,12 +292,7 @@ const AppPickerTrigger = ({
   );
 };
 
-type AppPickerPopupProps = TreeProps<Record<string, never>> & {
-  onAction: AriaMenuItemProps["onAction"];
-  domProps: HTMLAttributes<HTMLElement>;
-  onClose?: AriaOverlayProps["onClose"];
-  autoFocus?: MenuTriggerState["focusStrategy"];
-};
+type AppPickerPopupProps = MenuPopupProps<Record<string, never>>;
 const AppPickerPopup = (props: AppPickerPopupProps) => {
   const l10n = useL10n();
   const popupState = useTreeState({ ...props, selectionMode: "none" });

frontend/src/components/layout/navigation/UserMenu.tsx

@@ -3,22 +3,19 @@ import {
   useTreeState,
   TreeProps,
   TreeState,
-  MenuTriggerState,
   Item,
 } from "react-stately";
 import {
   useMenuTrigger,
   useButton,
-  useMenu,
   useOverlay,
   FocusScope,
   DismissButton,
   mergeProps,
   useMenuItem,
   useFocus,
-  AriaOverlayProps,
 } from "react-aria";
-import { HTMLAttributes, Key, ReactNode, useRef, useState } from "react";
+import { Key, ReactNode, useRef, useState } from "react";
 import { AriaMenuItemProps } from "@react-aria/menu";
 import Link from "next/link";
 import styles from "./UserMenu.module.scss";
@@ -37,6 +34,7 @@ import { useRuntimeData } from "../../../hooks/api/runtimeData";
 import { setCookie } from "../../../functions/cookies";
 import { useGaEvent } from "../../../hooks/gaEvent";
 import { useL10n } from "../../../hooks/l10n";
+import { MenuPopupProps, useMenu } from "../../../hooks/menu";
 
 export type Props = {
   style: string;
@@ -266,12 +264,7 @@ const UserMenuTrigger = ({
   );
 };
 
-type UserMenuPopupProps = TreeProps<Record<string, never>> & {
-  onAction: AriaMenuItemProps["onAction"];
-  domProps: HTMLAttributes<HTMLElement>;
-  onClose?: AriaOverlayProps["onClose"];
-  autoFocus?: MenuTriggerState["focusStrategy"];
-};
+type UserMenuPopupProps = MenuPopupProps<Record<string, never>>;
 const UserMenuPopup = (props: UserMenuPopupProps) => {
   const popupState = useTreeState({ ...props, selectionMode: "none" });
 

frontend/src/hooks/menu.ts

@@ -0,0 +1,31 @@
+import { AriaOverlayProps, useMenu as useAriaMenu } from "react-aria";
+import { AriaMenuItemProps, AriaMenuOptions, MenuAria } from "@react-aria/menu";
+import { MenuTriggerState, TreeProps, TreeState } from "react-stately";
+import { RefObject } from "@react-types/shared";
+import { HTMLAttributes } from "react";
+
+// MenuTriggerState focusStrategy from react-stately 3.34.0 is typed as
+// FocusStrategy | null
+// In react-aria 3.36.0, autoFocus is typed as
+// boolean | FocusStrategy | undefined
+// So, adjust a null value into undefined for use in react-aria
+// Presumably, react-aria will reconcile its typings with react-stately
+// at some point, at which point this commit can be reverted again.
+export type MenuPopupProps<T> = TreeProps<T> & {
+  onAction: AriaMenuItemProps["onAction"];
+  domProps: HTMLAttributes<HTMLElement>;
+  onClose?: AriaOverlayProps["onClose"];
+  autoFocus?: MenuTriggerState["focusStrategy"] | null;
+};
+
+export function useMenu<T>(
+  props: MenuPopupProps<T>,
+  state: TreeState<T>,
+  ref: RefObject<HTMLElement | null>,
+): MenuAria {
+  const adjustedProps: AriaMenuOptions<T> = {
+    ...props,
+    autoFocus: props.autoFocus ?? undefined,
+  };
+  return useAriaMenu(adjustedProps, state, ref);
+}