028a0dd4-4a88-41c4-befb-4b416703c2be

Committed 26 Nov 2024 04:21PM UTC coverage: 84.861% (+0.02%) from 84.846%

Build # 028a0dd4-4a88-41c4-befb-4b416703c2be

Build Type

Pull #5210

circleci

Committed by

groovecoder

Commit Message

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

Pull Request Pull Request #5210: Bump react-aria from 3.35.1 to 3.36.0

Run Details

2421 of 3557 branches covered (68.06%)

Branch coverage included in aggregate %.

6 of 6 new or added lines in 3 files covered. (100.0%)

51 existing lines in 3 files now uncovered.

16862 of 19166 relevant lines covered (87.98%)

9.97 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

67.01

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

import {
  FocusScope,
  useOverlay,
  useMenuTrigger,
  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 styles from "./AliasGenerationButton.module.scss";
import { ArrowDownIcon, PlusIcon } from "../../Icons";
import { ProfileData } from "../../../hooks/api/profile";
import { Button, LinkButton } from "../../Button";
import { AliasData } from "../../../hooks/api/aliases";
import { getRuntimeConfig } from "../../../config";
import { RuntimeData } from "../../../hooks/api/runtimeData";
import { isPeriodicalPremiumAvailableInCountry } from "../../../functions/getPlan";
import { useGaViewPing } from "../../../hooks/gaViewPing";
import { CustomAddressGenerationModal } from "./CustomAddressGenerationModal";
import { useGaEvent } from "../../../hooks/gaEvent";
import { useL10n } from "../../../hooks/l10n";
import { isFlagActive } from "../../../functions/waffle";
import { useMenu } from "../../../hooks/menu";
import { AddressPickerModal } from "./AddressPickerModal";

export type Props = {
  aliases: AliasData[];
  profile: ProfileData;
  runtimeData?: RuntimeData;
  onCreate: (
    options:
      | { mask_type: "random" }
      | { mask_type: "custom"; address: string; blockPromotionals: boolean },
    setAliasGeneratedState?: (flag: boolean) => void,
  ) => void;
  onUpdate: (alias: AliasData, updatedFields: Partial<AliasData>) => void;
  findAliasDataFromPrefix: (aliasPrefix: string) => AliasData | undefined;
  setGeneratedAlias: (alias: AliasData | undefined) => void;
};

/**
 * A button to initiate the different flows for creating an alias.
 *
 * Usually, this will be a simple button to generate a new random alias,
 * but it adapts to the situation to e.g. prompt the user to upgrade to Premium
 * when they run out of aliases, or to allow generating a custom alias if the
 * user is able to.
 */
export const AliasGenerationButton = (props: Props) => {
  const l10n = useL10n();
  const getUnlimitedButtonRef = useGaViewPing({
    category: "Purchase Button",
    label: "profile-create-alias-upgrade-promo",
  });
  const gaEvent = useGaEvent();

  const maxAliases = getRuntimeConfig().maxFreeAliases;
  if (!props.profile.has_premium && props.aliases.length >= maxAliases) {
    // If the user does not have Premium, has reached the alias limit,
    // and Premium is not available to them, show a greyed-out button:
    if (!isPeriodicalPremiumAvailableInCountry(props.runtimeData)) {
      return (
        <Button disabled>
          <PlusIcon alt="" width={16} height={16} />
          {l10n.getString("profile-label-generate-new-alias-2")}
        </Button>
      );
    }

    // If the user does not have Premium, has reached the alias limit,
    // and Premium is available to them, prompt them to upgrade:
    return (
      <LinkButton
        href="/premium#pricing"
        ref={getUnlimitedButtonRef}
        onClick={() => {
          gaEvent({
            category: "Purchase Button",
            action: "Engage",
            label: "profile-create-alias-upgrade-promo",
          });
        }}
      >
        {l10n.getString("profile-label-upgrade-2")}
      </LinkButton>
    );
  }

  if (
    props.profile.has_premium &&
    typeof props.profile.subdomain === "string"
  ) {
    return (
      <AliasTypeMenu
        onCreate={props.onCreate}
        onUpdate={props.onUpdate}
        subdomain={props.profile.subdomain}
        findAliasDataFromPrefix={props.findAliasDataFromPrefix}
        setGeneratedAlias={props.setGeneratedAlias}
        runtimeData={props.runtimeData}
      />
    );
  }

  return (
    <Button
      onClick={() => props.onCreate({ mask_type: "random" })}
      title={l10n.getString("profile-label-generate-new-alias-2")}
    >
      <PlusIcon alt="" width={16} height={16} />
      {l10n.getString("profile-label-generate-new-alias-2")}
    </Button>
  );
};

type AliasTypeMenuProps = {
  subdomain: string;
  onCreate: (
    options:
      | { mask_type: "random" }
      | { mask_type: "custom"; address: string; blockPromotionals: boolean },
    setAliasGeneratedState?: (flag: boolean) => void,
  ) => void;
  onUpdate: (alias: AliasData, updatedFields: Partial<AliasData>) => void;
  findAliasDataFromPrefix: (aliasPrefix: string) => AliasData | undefined;
  setGeneratedAlias: (alias: AliasData | undefined) => void;
  runtimeData?: RuntimeData;
};
const AliasTypeMenu = (props: AliasTypeMenuProps) => {
  const l10n = useL10n();
  const modalState = useOverlayTriggerState({});
  const [aliasGeneratedState, setAliasGeneratedState] = useState(false);

  const onAction = (key: Key) => {
    if (key === "random") {
      props.onCreate({ mask_type: "random" });
      return;
    }
    if (key === "custom") {
      modalState.open();
    }
  };

  const onPick = (address: string, setErrorState: (flag: boolean) => void) => {
    props.onCreate(
      {
        mask_type: "custom",
        address: address,
        blockPromotionals: false,
      },
      (isCreated: boolean) => {
        setAliasGeneratedState(isCreated);
        if (!isCreated) {
          setErrorState(true);
        } // Shows the error banner within the modal
      },
    );
  };

  const onPickNonRedesign = (
    address: string,
    settings: { blockPromotionals: boolean },
  ) => {
    props.onCreate({
      mask_type: "custom",
      address: address,
      blockPromotionals: settings.blockPromotionals,
    });
    modalState.close();
  };

  const onSuccessClose = (
    aliasToUpdate: AliasData | undefined,
    blockPromotions: boolean,
    copyToClipboard: boolean | undefined,
  ) => {
    if (aliasToUpdate && blockPromotions) {
      props.onUpdate(aliasToUpdate, {
        enabled: true,
        block_list_emails: blockPromotions,
      });
    }
    if (copyToClipboard) {
      props.setGeneratedAlias(aliasToUpdate);
    }
    modalState.close();
  };

  const dialog = modalState.isOpen ? (
    isFlagActive(props.runtimeData, "custom_domain_management_redesign") ? (
      <CustomAddressGenerationModal
        isOpen={modalState.isOpen}
        onClose={() => modalState.close()}
        onUpdate={onSuccessClose}
        onPick={onPick}
        subdomain={props.subdomain}
        aliasGeneratedState={aliasGeneratedState}
        findAliasDataFromPrefix={props.findAliasDataFromPrefix}
      />
    ) : (
      <AddressPickerModal
        isOpen={modalState.isOpen}
        onClose={() => modalState.close()}
        onPick={onPickNonRedesign}
        subdomain={props.subdomain}
      />
    )
  ) : null;

  useEffect(() => {
    if (!modalState.isOpen) {
      setAliasGeneratedState(false);
    }
  }, [modalState]);

  return (
    <>
      <AliasTypeMenuButton onAction={onAction}>
        <Item key="random">
          {l10n.getString("profile-label-generate-new-alias-menu-random-2")}
        </Item>
        <Item key="custom">
          {l10n.getString("profile-label-generate-new-alias-menu-custom-2", {
            subdomain: props.subdomain,
          })}
        </Item>
      </AliasTypeMenuButton>
      {dialog}
    </>
  );
};

type AliasTypeMenuButtonProps = Parameters<typeof useMenuTriggerState>[0] & {
  children: TreeProps<Record<string, never>>["children"];
  onAction: AriaMenuItemProps["onAction"];
};
const AliasTypeMenuButton = (props: AliasTypeMenuButtonProps) => {
  const l10n = useL10n();
  const triggerState = useMenuTriggerState(props);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const { menuTriggerProps, menuProps } = useMenuTrigger(
    {},
    triggerState,
    triggerRef,
  );
  // `menuProps` has an `autoFocus` property that is not compatible with the
  // `autoFocus` property for HTMLElements, because it can also be of type
  // `FocusStrategy` (i.e. the string "first" or "last") at the time of writing.
  // Since its values get spread onto an HTMLUListElement, we ignore those
  // values. See
  // https://github.com/mozilla/fx-private-relay/pull/3261#issuecomment-1493840024
  const menuPropsWithoutAutofocus = {
    ...menuProps,
    autoFocus:
      typeof menuProps.autoFocus === "boolean"
        ? menuProps.autoFocus
        : undefined,
  };

  const triggerButtonProps = useButton(
    menuTriggerProps,
    triggerRef,
  ).buttonProps;

  return (
    <div className={styles["button-wrapper"]}>
      <Button ref={triggerRef} {...triggerButtonProps}>
        {l10n.getString("profile-label-generate-new-alias-2")}
        <ArrowDownIcon alt="" width={16} height={16} />
      </Button>
      {triggerState.isOpen && (
        <AliasTypeMenuPopup
          {...props}
          aria-label={l10n.getString("profile-label-generate-new-alias-2")}
          domProps={menuPropsWithoutAutofocus}
          autoFocus={triggerState.focusStrategy}
          onClose={() => triggerState.close()}
        />
      )}
    </div>
  );
};

type AliasTypeMenuPopupProps = TreeProps<Record<string, never>> & {
  onAction: AriaMenuItemProps["onAction"];
  domProps: HTMLAttributes<HTMLElement>;
  onClose?: AriaOverlayProps["onClose"];
  autoFocus?: MenuTriggerState["focusStrategy"];
};
const AliasTypeMenuPopup = (props: AliasTypeMenuPopupProps) => {
  const popupState = useTreeState({ ...props, selectionMode: "none" });

  const popupRef = useRef<HTMLUListElement>(null);
  const popupProps = useMenu(props, popupState, popupRef).menuProps;

  const overlayRef = useRef<HTMLDivElement>(null);
  const { overlayProps } = useOverlay(
    {
      onClose: props.onClose,
      shouldCloseOnBlur: true,
      isOpen: true,
      isDismissable: true,
    },
    overlayRef,
  );

  // <FocusScope> ensures that focus is restored back to the
  // trigger when the menu is closed.
  // The <DismissButton> components allow screen reader users
  // to dismiss the popup easily.
  return (
    <FocusScope restoreFocus>
      <div {...overlayProps} ref={overlayRef}>
        <DismissButton onDismiss={props.onClose} />
        <ul
          {...mergeProps(popupProps, props.domProps)}
          ref={popupRef}
          className={styles.popup}
        >
          {Array.from(popupState.collection).map((item) => (
            <AliasTypeMenuItem
              key={item.key}
              // TODO: Fix the typing (likely: report to react-aria that the type does not include an isDisabled prop)
              item={item as unknown as AliasTypeMenuItemProps["item"]}
              state={popupState}
              onClose={props.onClose}
            />
          ))}
        </ul>
        <DismissButton onDismiss={props.onClose} />
      </div>
    </FocusScope>
  );
};

type AliasTypeMenuItemProps = {
  // TODO: Figure out correct type:
  item: {
    key: AriaMenuItemProps["key"];
    isDisabled: AriaMenuItemProps["isDisabled"];
    rendered?: ReactNode;
  };
  state: TreeState<unknown>;
  onClose: AriaMenuItemProps["onClose"];
};

const AliasTypeMenuItem = (props: AliasTypeMenuItemProps) => {
  const menuItemRef = useRef<HTMLLIElement>(null);
  const menuItemProps = useMenuItem(
    {
      key: props.item.key,
      isDisabled: props.item.isDisabled,
      onClose: props.onClose,
    },
    props.state,
    menuItemRef,
  ).menuItemProps;

  const [_isFocused, setIsFocused] = useState(false);
  const focusProps = useFocus({ onFocusChange: setIsFocused }).focusProps;

  return (
    <li
      {...mergeProps(menuItemProps, focusProps)}
      ref={menuItemRef}
      className={styles["menu-item-wrapper"]}
    >
      {props.item.rendered}
    </li>
  );
};

1	import {
2	FocusScope,
3	useOverlay,
4	useMenuTrigger,
5	DismissButton,
6	mergeProps,
7	useMenuItem,
8	useFocus,
9	useButton,
10	AriaOverlayProps,
11	} from "react-aria";	3✔
12	import { AriaMenuItemProps } from "@react-aria/menu";
13	import {
14	Item,
15	MenuTriggerState,
16	TreeProps,
17	TreeState,
18	useMenuTriggerState,
19	useOverlayTriggerState,
20	useTreeState,
21	} from "react-stately";	3✔
22	import {
23	HTMLAttributes,
24	Key,
25	ReactNode,
26	useEffect,
27	useRef,
28	useState,
29	} from "react";	3✔
30	import styles from "./AliasGenerationButton.module.scss";	3✔
31	import { ArrowDownIcon, PlusIcon } from "../../Icons";	3✔
32	import { ProfileData } from "../../../hooks/api/profile";
33	import { Button, LinkButton } from "../../Button";	3✔
34	import { AliasData } from "../../../hooks/api/aliases";
35	import { getRuntimeConfig } from "../../../config";	3✔
36	import { RuntimeData } from "../../../hooks/api/runtimeData";
37	import { isPeriodicalPremiumAvailableInCountry } from "../../../functions/getPlan";	3✔
38	import { useGaViewPing } from "../../../hooks/gaViewPing";	3✔
39	import { CustomAddressGenerationModal } from "./CustomAddressGenerationModal";	3✔
40	import { useGaEvent } from "../../../hooks/gaEvent";	3✔
41	import { useL10n } from "../../../hooks/l10n";	3✔
42	import { isFlagActive } from "../../../functions/waffle";	3✔
43	import { useMenu } from "../../../hooks/menu";	3✔
44	import { AddressPickerModal } from "./AddressPickerModal";	3✔
45
46	export type Props = {
47	aliases: AliasData[];
48	profile: ProfileData;
49	runtimeData?: RuntimeData;
50	onCreate: (
51	options:
52	\| { mask_type: "random" }
53	\| { mask_type: "custom"; address: string; blockPromotionals: boolean },
54	setAliasGeneratedState?: (flag: boolean) => void,
55	) => void;
56	onUpdate: (alias: AliasData, updatedFields: Partial<AliasData>) => void;
57	findAliasDataFromPrefix: (aliasPrefix: string) => AliasData \| undefined;
58	setGeneratedAlias: (alias: AliasData \| undefined) => void;
59	};
60
61	/**
62	* A button to initiate the different flows for creating an alias.
63	*
64	* Usually, this will be a simple button to generate a new random alias,
65	* but it adapts to the situation to e.g. prompt the user to upgrade to Premium
66	* when they run out of aliases, or to allow generating a custom alias if the
67	* user is able to.
68	*/
69	export const AliasGenerationButton = (props: Props) => {	169✔
70	const l10n = useL10n();	165✔
71	const getUnlimitedButtonRef = useGaViewPing({	165✔
72	category: "Purchase Button",
73	label: "profile-create-alias-upgrade-promo",
74	});
75	const gaEvent = useGaEvent();	165✔
76
77	const maxAliases = getRuntimeConfig().maxFreeAliases;	165✔
78	if (!props.profile.has_premium && props.aliases.length >= maxAliases) {	165✔
79	// If the user does not have Premium, has reached the alias limit,
80	// and Premium is not available to them, show a greyed-out button:
81	if (!isPeriodicalPremiumAvailableInCountry(props.runtimeData)) {	11✔
82	return (
83	<Button disabled>
84	<PlusIcon alt="" width={16} height={16} />
85	{l10n.getString("profile-label-generate-new-alias-2")}
86	</Button>
87	);
88	}
89
90	// If the user does not have Premium, has reached the alias limit,
91	// and Premium is available to them, prompt them to upgrade:
92	return (
93	<LinkButton
94	href="/premium#pricing"
95	ref={getUnlimitedButtonRef}
96	onClick={() => {
UNCOV 97	gaEvent({	×
98	category: "Purchase Button",
99	action: "Engage",
100	label: "profile-create-alias-upgrade-promo",
101	});
102	}}
103	>
104	{l10n.getString("profile-label-upgrade-2")}
105	</LinkButton>
106	);
107	}
108
109	if (	154✔
110	props.profile.has_premium &&	179✔
111	typeof props.profile.subdomain === "string"
112	) {
113	return (
114	<AliasTypeMenu
115	onCreate={props.onCreate}
116	onUpdate={props.onUpdate}
117	subdomain={props.profile.subdomain}
118	findAliasDataFromPrefix={props.findAliasDataFromPrefix}
119	setGeneratedAlias={props.setGeneratedAlias}
120	runtimeData={props.runtimeData}
121	/>
122	);
123	}
124
125	return (
126	<Button
UNCOV 127	onClick={() => props.onCreate({ mask_type: "random" })}	×
128	title={l10n.getString("profile-label-generate-new-alias-2")}
129	>
130	<PlusIcon alt="" width={16} height={16} />
131	{l10n.getString("profile-label-generate-new-alias-2")}
132	</Button>
133	);
134	};
135
136	type AliasTypeMenuProps = {
137	subdomain: string;
138	onCreate: (
139	options:
140	\| { mask_type: "random" }
141	\| { mask_type: "custom"; address: string; blockPromotionals: boolean },
142	setAliasGeneratedState?: (flag: boolean) => void,
143	) => void;
144	onUpdate: (alias: AliasData, updatedFields: Partial<AliasData>) => void;
145	findAliasDataFromPrefix: (aliasPrefix: string) => AliasData \| undefined;
146	setGeneratedAlias: (alias: AliasData \| undefined) => void;
147	runtimeData?: RuntimeData;
148	};
149	const AliasTypeMenu = (props: AliasTypeMenuProps) => {	3✔
150	const l10n = useL10n();	3✔
151	const modalState = useOverlayTriggerState({});	3✔
152	const [aliasGeneratedState, setAliasGeneratedState] = useState(false);	3✔
153
154	const onAction = (key: Key) => {	3✔
UNCOV 155	if (key === "random") {	×
156	props.onCreate({ mask_type: "random" });	×
UNCOV 157	return;	×
158	}
UNCOV 159	if (key === "custom") {	×
UNCOV 160	modalState.open();	×
161	}
162	};
163
164	const onPick = (address: string, setErrorState: (flag: boolean) => void) => {	3✔
165	props.onCreate(	×
166	{
167	mask_type: "custom",
168	address: address,
169	blockPromotionals: false,
170	},
171	(isCreated: boolean) => {
UNCOV 172	setAliasGeneratedState(isCreated);	×
UNCOV 173	if (!isCreated) {	×
UNCOV 174	setErrorState(true);	×
175	} // Shows the error banner within the modal
176	},
177	);
178	};
179
180	const onPickNonRedesign = (	3✔
181	address: string,
182	settings: { blockPromotionals: boolean },
183	) => {
UNCOV 184	props.onCreate({	×
185	mask_type: "custom",
186	address: address,
187	blockPromotionals: settings.blockPromotionals,
188	});
189	modalState.close();	×
190	};
191
192	const onSuccessClose = (	3✔
193	aliasToUpdate: AliasData \| undefined,
194	blockPromotions: boolean,
195	copyToClipboard: boolean \| undefined,
196	) => {
197	if (aliasToUpdate && blockPromotions) {	×
UNCOV 198	props.onUpdate(aliasToUpdate, {	×
199	enabled: true,
200	block_list_emails: blockPromotions,
201	});
202	}
UNCOV 203	if (copyToClipboard) {	×
204	props.setGeneratedAlias(aliasToUpdate);	×
205	}
UNCOV 206	modalState.close();	×
207	};
208
209	const dialog = modalState.isOpen ? (	3!
210	isFlagActive(props.runtimeData, "custom_domain_management_redesign") ? (	×
211	<CustomAddressGenerationModal
212	isOpen={modalState.isOpen}
UNCOV 213	onClose={() => modalState.close()}	×
214	onUpdate={onSuccessClose}
215	onPick={onPick}
216	subdomain={props.subdomain}
217	aliasGeneratedState={aliasGeneratedState}
218	findAliasDataFromPrefix={props.findAliasDataFromPrefix}
219	/>
220	) : (
221	<AddressPickerModal
222	isOpen={modalState.isOpen}
UNCOV 223	onClose={() => modalState.close()}	×
224	onPick={onPickNonRedesign}
225	subdomain={props.subdomain}
226	/>
227	)
228	) : null;
229
230	useEffect(() => {	3✔
231	if (!modalState.isOpen) {	3✔
232	setAliasGeneratedState(false);	3✔
233	}
234	}, [modalState]);
235
236	return (
237	<>
238	<AliasTypeMenuButton onAction={onAction}>
239	<Item key="random">
240	{l10n.getString("profile-label-generate-new-alias-menu-random-2")}
241	</Item>
242	<Item key="custom">
243	{l10n.getString("profile-label-generate-new-alias-menu-custom-2", {
244	subdomain: props.subdomain,
245	})}
246	</Item>
247	</AliasTypeMenuButton>
248	{dialog}
249	</>
250	);
251	};
252
253	type AliasTypeMenuButtonProps = Parameters<typeof useMenuTriggerState>[0] & {
254	children: TreeProps<Record<string, never>>["children"];
255	onAction: AriaMenuItemProps["onAction"];
256	};
257	const AliasTypeMenuButton = (props: AliasTypeMenuButtonProps) => {	3✔
258	const l10n = useL10n();	7✔
259	const triggerState = useMenuTriggerState(props);	7✔
260	const triggerRef = useRef<HTMLButtonElement>(null);	7✔
261	const { menuTriggerProps, menuProps } = useMenuTrigger(	7✔
262	{},
263	triggerState,
264	triggerRef,
265	);
266	// `menuProps` has an `autoFocus` property that is not compatible with the
267	// `autoFocus` property for HTMLElements, because it can also be of type
268	// `FocusStrategy` (i.e. the string "first" or "last") at the time of writing.
269	// Since its values get spread onto an HTMLUListElement, we ignore those
270	// values. See
271	// https://github.com/mozilla/fx-private-relay/pull/3261#issuecomment-1493840024
272	const menuPropsWithoutAutofocus = {	7✔
273	...menuProps,
274	autoFocus:
275	typeof menuProps.autoFocus === "boolean"	7!
276	? menuProps.autoFocus
277	: undefined,
278	};
279
280	const triggerButtonProps = useButton(	7✔
281	menuTriggerProps,
282	triggerRef,
283	).buttonProps;
284
285	return (
286	<div className={styles["button-wrapper"]}>
287	<Button ref={triggerRef} {...triggerButtonProps}>
288	{l10n.getString("profile-label-generate-new-alias-2")}
289	<ArrowDownIcon alt="" width={16} height={16} />
290	</Button>
291	{triggerState.isOpen && (	7✔
292	<AliasTypeMenuPopup
293	{...props}
294	aria-label={l10n.getString("profile-label-generate-new-alias-2")}
295	domProps={menuPropsWithoutAutofocus}
296	autoFocus={triggerState.focusStrategy}
UNCOV 297	onClose={() => triggerState.close()}	×
298	/>
299	)}
300	</div>
301	);
302	};
303
304	type AliasTypeMenuPopupProps = TreeProps<Record<string, never>> & {
305	onAction: AriaMenuItemProps["onAction"];
306	domProps: HTMLAttributes<HTMLElement>;
307	onClose?: AriaOverlayProps["onClose"];
308	autoFocus?: MenuTriggerState["focusStrategy"];
309	};
310	const AliasTypeMenuPopup = (props: AliasTypeMenuPopupProps) => {	3✔
311	const popupState = useTreeState({ ...props, selectionMode: "none" });	4✔
312
313	const popupRef = useRef<HTMLUListElement>(null);	4✔
314	const popupProps = useMenu(props, popupState, popupRef).menuProps;	4✔
315
316	const overlayRef = useRef<HTMLDivElement>(null);	4✔
317	const { overlayProps } = useOverlay(	4✔
318	{
319	onClose: props.onClose,
320	shouldCloseOnBlur: true,
321	isOpen: true,
322	isDismissable: true,
323	},
324	overlayRef,
325	);
326
327	// <FocusScope> ensures that focus is restored back to the
328	// trigger when the menu is closed.
329	// The <DismissButton> components allow screen reader users
330	// to dismiss the popup easily.
331	return (
332	<FocusScope restoreFocus>
333	<div {...overlayProps} ref={overlayRef}>
334	<DismissButton onDismiss={props.onClose} />
335	<ul
336	{...mergeProps(popupProps, props.domProps)}
337	ref={popupRef}
338	className={styles.popup}
339	>
340	{Array.from(popupState.collection).map((item) => (
341	<AliasTypeMenuItem	8✔
342	key={item.key}
343	// TODO: Fix the typing (likely: report to react-aria that the type does not include an isDisabled prop)
344	item={item as unknown as AliasTypeMenuItemProps["item"]}
345	state={popupState}
346	onClose={props.onClose}
347	/>
348	))}
349	</ul>
350	<DismissButton onDismiss={props.onClose} />
351	</div>
352	</FocusScope>
353	);
354	};
355
356	type AliasTypeMenuItemProps = {
357	// TODO: Figure out correct type:
358	item: {
359	key: AriaMenuItemProps["key"];
360	isDisabled: AriaMenuItemProps["isDisabled"];
361	rendered?: ReactNode;
362	};
363	state: TreeState<unknown>;
364	onClose: AriaMenuItemProps["onClose"];
365	};
366
367	const AliasTypeMenuItem = (props: AliasTypeMenuItemProps) => {	3✔
368	const menuItemRef = useRef<HTMLLIElement>(null);	12✔
369	const menuItemProps = useMenuItem(	12✔
370	{
371	key: props.item.key,
372	isDisabled: props.item.isDisabled,
373	onClose: props.onClose,
374	},
375	props.state,
376	menuItemRef,
377	).menuItemProps;
378
379	const [_isFocused, setIsFocused] = useState(false);	12✔
380	const focusProps = useFocus({ onFocusChange: setIsFocused }).focusProps;	12✔
381
382	return (
383	<li
384	{...mergeProps(menuItemProps, focusProps)}
385	ref={menuItemRef}
386	className={styles["menu-item-wrapper"]}
387	>
388	{props.item.rendered}
389	</li>
390	);
391	};

mozilla / fx-private-relay / 028a0dd4-4a88-41c4-befb-4b416703c2be

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous