@primer/react 38.30.1-rc.2d1806208 → 38.30.1-rc.34724960c

package/dist/hooks/useMenuKeyboardNavigation.js

@@ -1,139 +1,142 @@
-import { c } from 'react-compiler-runtime';
-import React from 'react';
-import { iterateFocusableElements } from '@primer/behaviors/utils';
-import { useMenuInitialFocus } from './useMenuInitialFocus.js';
-import { useMnemonics } from './useMnemonics.js';
-
+import { useMenuInitialFocus } from "./useMenuInitialFocus.js";
+import { useMnemonics } from "./useMnemonics.js";
+import { c } from "react-compiler-runtime";
+import React from "react";
+import { iterateFocusableElements } from "@primer/behaviors/utils";
+//#region src/hooks/useMenuKeyboardNavigation.ts
 /**
- * Keyboard navigation is a mix of 4 hooks
- * 1. useMenuInitialFocus
- * 2. useTypeaheadFocus
- * 3. useCloseMenuOnTab
- * 4. useMoveFocusToMenuItem
- */
+* Keyboard navigation is a mix of 4 hooks
+* 1. useMenuInitialFocus
+* 2. useTypeaheadFocus
+* 3. useCloseMenuOnTab
+* 4. useMoveFocusToMenuItem
+*/
 const useMenuKeyboardNavigation = (open, onClose, containerRef, anchorRef, t0) => {
-  const isSubmenu = t0 === undefined ? false : t0;
-  useMenuInitialFocus(open, containerRef, anchorRef);
-  useMnemonics(open, containerRef);
-  useCloseMenuOnTab(open, onClose, containerRef, anchorRef);
-  useMoveFocusToMenuItem(open, containerRef, anchorRef);
-  useCloseSubmenuOnArrow(open, isSubmenu, onClose, containerRef);
+	const isSubmenu = t0 === void 0 ? false : t0;
+	useMenuInitialFocus(open, containerRef, anchorRef);
+	useMnemonics(open, containerRef);
+	useCloseMenuOnTab(open, onClose, containerRef, anchorRef);
+	useMoveFocusToMenuItem(open, containerRef, anchorRef);
+	useCloseSubmenuOnArrow(open, isSubmenu, onClose, containerRef);
 };
-
 /**
- * When Tab or Shift+Tab is pressed, the menu should close
- * and the focus should naturally move to the next item
- */
+* When Tab or Shift+Tab is pressed, the menu should close
+* and the focus should naturally move to the next item
+*/
 const useCloseMenuOnTab = (open, onClose, containerRef, anchorRef) => {
-  const $ = c(6);
-  let t0;
-  let t1;
-  if ($[0] !== anchorRef || $[1] !== containerRef || $[2] !== onClose || $[3] !== open) {
-    t0 = () => {
-      const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
-      const anchor = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
-      const handler = event => {
-        if (open && event.key === "Tab") {
-          onClose === null || onClose === void 0 ? void 0 : onClose("tab");
-        }
-      };
-      container === null || container === void 0 ? void 0 : container.addEventListener("keydown", handler);
-      anchor === null || anchor === void 0 ? void 0 : anchor.addEventListener("keydown", handler);
-      return () => {
-        container === null || container === void 0 ? void 0 : container.removeEventListener("keydown", handler);
-        anchor === null || anchor === void 0 ? void 0 : anchor.removeEventListener("keydown", handler);
-      };
-    };
-    t1 = [open, onClose, containerRef, anchorRef];
-    $[0] = anchorRef;
-    $[1] = containerRef;
-    $[2] = onClose;
-    $[3] = open;
-    $[4] = t0;
-    $[5] = t1;
-  } else {
-    t0 = $[4];
-    t1 = $[5];
-  }
-  React.useEffect(t0, t1);
+	const $ = c(6);
+	let t0;
+	let t1;
+	if ($[0] !== anchorRef || $[1] !== containerRef || $[2] !== onClose || $[3] !== open) {
+		t0 = () => {
+			const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+			const anchor = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
+			const handler = (event) => {
+				if (open && event.key === "Tab") onClose === null || onClose === void 0 || onClose("tab");
+			};
+			container === null || container === void 0 || container.addEventListener("keydown", handler);
+			anchor === null || anchor === void 0 || anchor.addEventListener("keydown", handler);
+			return () => {
+				container === null || container === void 0 || container.removeEventListener("keydown", handler);
+				anchor === null || anchor === void 0 || anchor.removeEventListener("keydown", handler);
+			};
+		};
+		t1 = [
+			open,
+			onClose,
+			containerRef,
+			anchorRef
+		];
+		$[0] = anchorRef;
+		$[1] = containerRef;
+		$[2] = onClose;
+		$[3] = open;
+		$[4] = t0;
+		$[5] = t1;
+	} else {
+		t0 = $[4];
+		t1 = $[5];
+	}
+	React.useEffect(t0, t1);
 };
-
 /**
- * Close submenu when left arrow key is pressed
- */
+* Close submenu when left arrow key is pressed
+*/
 const useCloseSubmenuOnArrow = (open, isSubmenu, onClose, containerRef) => {
-  const $ = c(6);
-  let t0;
-  let t1;
-  if ($[0] !== containerRef || $[1] !== isSubmenu || $[2] !== onClose || $[3] !== open) {
-    t0 = () => {
-      const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
-      const handler = event => {
-        if (open && isSubmenu && event.key === "ArrowLeft") {
-          onClose === null || onClose === void 0 ? void 0 : onClose("arrow-left");
-        }
-      };
-      container === null || container === void 0 ? void 0 : container.addEventListener("keydown", handler);
-      return () => {
-        container === null || container === void 0 ? void 0 : container.removeEventListener("keydown", handler);
-      };
-    };
-    t1 = [open, onClose, containerRef, isSubmenu];
-    $[0] = containerRef;
-    $[1] = isSubmenu;
-    $[2] = onClose;
-    $[3] = open;
-    $[4] = t0;
-    $[5] = t1;
-  } else {
-    t0 = $[4];
-    t1 = $[5];
-  }
-  React.useEffect(t0, t1);
+	const $ = c(6);
+	let t0;
+	let t1;
+	if ($[0] !== containerRef || $[1] !== isSubmenu || $[2] !== onClose || $[3] !== open) {
+		t0 = () => {
+			const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+			const handler = (event) => {
+				if (open && isSubmenu && event.key === "ArrowLeft") onClose === null || onClose === void 0 || onClose("arrow-left");
+			};
+			container === null || container === void 0 || container.addEventListener("keydown", handler);
+			return () => {
+				container === null || container === void 0 || container.removeEventListener("keydown", handler);
+			};
+		};
+		t1 = [
+			open,
+			onClose,
+			containerRef,
+			isSubmenu
+		];
+		$[0] = containerRef;
+		$[1] = isSubmenu;
+		$[2] = onClose;
+		$[3] = open;
+		$[4] = t0;
+		$[5] = t1;
+	} else {
+		t0 = $[4];
+		t1 = $[5];
+	}
+	React.useEffect(t0, t1);
 };
-
 /**
- * When Arrow Keys are pressed and the focus is on the anchor,
- * focus should move to a menu item
- */
+* When Arrow Keys are pressed and the focus is on the anchor,
+* focus should move to a menu item
+*/
 const useMoveFocusToMenuItem = (open, containerRef, anchorRef) => {
-  const $ = c(5);
-  let t0;
-  let t1;
-  if ($[0] !== anchorRef || $[1] !== containerRef || $[2] !== open) {
-    t0 = () => {
-      const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
-      const anchor = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
-      const handler = event => {
-        if (!open || !container) {
-          return;
-        }
-        const iterable = iterateFocusableElements(container);
-        if (event.key === "ArrowDown") {
-          const firstElement = iterable.next().value;
-          setTimeout(() => firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus());
-        } else {
-          if (event.key === "ArrowUp") {
-            const elements = [...iterable];
-            const lastElement = elements[elements.length - 1];
-            setTimeout(() => lastElement.focus());
-          }
-        }
-      };
-      anchor === null || anchor === void 0 ? void 0 : anchor.addEventListener("keydown", handler);
-      return () => anchor === null || anchor === void 0 ? void 0 : anchor.addEventListener("keydown", handler);
-    };
-    t1 = [open, containerRef, anchorRef];
-    $[0] = anchorRef;
-    $[1] = containerRef;
-    $[2] = open;
-    $[3] = t0;
-    $[4] = t1;
-  } else {
-    t0 = $[3];
-    t1 = $[4];
-  }
-  React.useEffect(t0, t1);
+	const $ = c(5);
+	let t0;
+	let t1;
+	if ($[0] !== anchorRef || $[1] !== containerRef || $[2] !== open) {
+		t0 = () => {
+			const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+			const anchor = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
+			const handler = (event) => {
+				if (!open || !container) return;
+				const iterable = iterateFocusableElements(container);
+				if (event.key === "ArrowDown") {
+					const firstElement = iterable.next().value;
+					setTimeout(() => firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus());
+				} else if (event.key === "ArrowUp") {
+					const elements = [...iterable];
+					const lastElement = elements[elements.length - 1];
+					setTimeout(() => lastElement.focus());
+				}
+			};
+			anchor === null || anchor === void 0 || anchor.addEventListener("keydown", handler);
+			return () => anchor === null || anchor === void 0 ? void 0 : anchor.addEventListener("keydown", handler);
+		};
+		t1 = [
+			open,
+			containerRef,
+			anchorRef
+		];
+		$[0] = anchorRef;
+		$[1] = containerRef;
+		$[2] = open;
+		$[3] = t0;
+		$[4] = t1;
+	} else {
+		t0 = $[3];
+		t1 = $[4];
+	}
+	React.useEffect(t0, t1);
 };
-
+//#endregion
 export { useMenuKeyboardNavigation };

package/dist/hooks/useMergedRefs.d.ts

@@ -1,4 +1,6 @@
-import type { ForwardedRef, Ref as StandardRef } from 'react';
+import { ForwardedRef, Ref } from "react";
+
+//#region src/hooks/useMergedRefs.d.ts
 /**
  * Combine two refs of matching type (typically an external or forwarded ref and an internal `useRef` object or
  * callback ref).
@@ -29,14 +31,14 @@ import type { ForwardedRef, Ref as StandardRef } from 'react';
  *  return <button ref={combinedRef} />
  * }
  */
-export declare function useMergedRefs<T>(refA: Ref<T | null>, refB: Ref<T | null>): (value: T | null) => (() => void) | undefined;
+declare function useMergedRefs<T>(refA: Ref$1<T | null>, refB: Ref$1<T | null>): (value: T | null) => (() => void) | undefined;
 type CleanupFunction = () => void;
 /**
  * React 19 supports callback refs that can return a cleanup function. If a cleanup function is returned, the
  * cleanup is called on unmount **instead** of setting the ref to null.
  */
 type React19RefCallback<T> = {
-    bivarianceHack(instance: T): void | CleanupFunction;
+  bivarianceHack(instance: T): void | CleanupFunction;
 }['bivarianceHack'];
 /**
  * Supporting React 18 and 19 while alleviating the need for any hacks or casts in consumers:
@@ -46,6 +48,6 @@ type React19RefCallback<T> = {
  * - `Ref` for standard refs from `useRef` or passed in as React 19 prop
  * - `undefined` to allow for easy use of optional `ref` props in React 19
  */
-type Ref<T> = ForwardedRef<T> | React19RefCallback<T> | StandardRef<T> | undefined;
-export {};
-//# sourceMappingURL=useMergedRefs.d.ts.map
+type Ref$1<T> = ForwardedRef<T> | React19RefCallback<T> | Ref<T> | undefined;
+//#endregion
+export { useMergedRefs };

package/dist/hooks/useMergedRefs.js

@@ -1,86 +1,72 @@
-import { useCallback } from 'react';
-import { reactMajorVersion, isExperimentalReactVersion } from '../utils/environment.js';
-
+import { isExperimentalReactVersion, reactMajorVersion } from "../utils/environment.js";
+import { useCallback } from "react";
+//#region src/hooks/useMergedRefs.ts
 /**
- * Cleanup functions for refs were introduced in React 19. For feature detection,
- * we look to see if current version of React is >= 19 or if it is an
- * experimental version of React
- *
- * @see https://react.dev/blog/2024/12/05/react-19
- */
+* Cleanup functions for refs were introduced in React 19. For feature detection,
+* we look to see if current version of React is >= 19 or if it is an
+* experimental version of React
+*
+* @see https://react.dev/blog/2024/12/05/react-19
+*/
 const supportsRefCleanup = reactMajorVersion >= 19 || isExperimentalReactVersion;
-
 /**
- * Combine two refs of matching type (typically an external or forwarded ref and an internal `useRef` object or
- * callback ref).
- *
- * If you need to combine more than two refs (what are you doing?) just nest the hook:
- * `useMergedRefs(refA, useMergedRefs(refB, refC))`
- *
- * @param refA First ref to merge. The order is not important.
- * @param refB Second ref to merge. The order is not important.
- * @returns A new ref which must be passed to the relevant child component. **Important**: do not pass `refA` or
- * `refB` to the component!
- *
- * @example
- * // React 18
- * const Example = forwardRef<HTMLButtonElement, {}>((props, forwardedRef) => {
- *  const ref = useRef<HTMLButtonElement>(null)
- *  const combinedRef = useMergedRefs(forwardedRef, ref)
- *
- *  return <button ref={combinedRef} />
- * })
- *
- * @example
- * // React 19
- * const Example = ({ref: externalRef}: {ref?: Ref<HTMLButtonElement>}) => {
- *  const ref = useRef<HTMLButtonElement>(null)
- *  const combinedRef = useMergedRefs(externalRef, ref)
- *
- *  return <button ref={combinedRef} />
- * }
- */
+* Combine two refs of matching type (typically an external or forwarded ref and an internal `useRef` object or
+* callback ref).
+*
+* If you need to combine more than two refs (what are you doing?) just nest the hook:
+* `useMergedRefs(refA, useMergedRefs(refB, refC))`
+*
+* @param refA First ref to merge. The order is not important.
+* @param refB Second ref to merge. The order is not important.
+* @returns A new ref which must be passed to the relevant child component. **Important**: do not pass `refA` or
+* `refB` to the component!
+*
+* @example
+* // React 18
+* const Example = forwardRef<HTMLButtonElement, {}>((props, forwardedRef) => {
+*  const ref = useRef<HTMLButtonElement>(null)
+*  const combinedRef = useMergedRefs(forwardedRef, ref)
+*
+*  return <button ref={combinedRef} />
+* })
+*
+* @example
+* // React 19
+* const Example = ({ref: externalRef}: {ref?: Ref<HTMLButtonElement>}) => {
+*  const ref = useRef<HTMLButtonElement>(null)
+*  const combinedRef = useMergedRefs(externalRef, ref)
+*
+*  return <button ref={combinedRef} />
+* }
+*/
 function useMergedRefs(refA, refB) {
-  return useCallback(value => {
-    const cleanupA = setRef(refA, value);
-    const cleanupB = setRef(refB, value);
-
-    // TODO: remove when we are on React 19
-    if (!supportsRefCleanup) {
-      return;
-    }
-
-    // Only works in React 19. In React 18, the cleanup function will be ignored and the ref will get called with
-    // `null` which will be passed to each ref as expected.
-    return () => {
-      // For object refs and callback refs that don't return cleanups, we still need to pass `null` on cleanup
-      if (cleanupA) cleanupA();else setRef(refA, null);
-      if (cleanupB) cleanupB();else setRef(refB, null);
-    };
-  }, [refA, refB]);
+	return useCallback((value) => {
+		const cleanupA = setRef(refA, value);
+		const cleanupB = setRef(refB, value);
+		if (!supportsRefCleanup) return;
+		return () => {
+			if (cleanupA) cleanupA();
+			else setRef(refA, null);
+			if (cleanupB) cleanupB();
+			else setRef(refB, null);
+		};
+	}, [refA, refB]);
 }
-
 /**
- * React 19 supports callback refs that can return a cleanup function. If a cleanup function is returned, the
- * cleanup is called on unmount **instead** of setting the ref to null.
- */
-// bivarianceHack copied from React types
-
+* React 19 supports callback refs that can return a cleanup function. If a cleanup function is returned, the
+* cleanup is called on unmount **instead** of setting the ref to null.
+*/
 /**
- * Supporting React 18 and 19 while alleviating the need for any hacks or casts in consumers:
- * - `ForwardedRef` from the React 18 `forwardRef` HOC
- * - `React19RefCallback` for callback refs that can return a cleanup function (this is included in `Ref` in React 19
- *   but not in 18)
- * - `Ref` for standard refs from `useRef` or passed in as React 19 prop
- * - `undefined` to allow for easy use of optional `ref` props in React 19
- */
-
+* Supporting React 18 and 19 while alleviating the need for any hacks or casts in consumers:
+* - `ForwardedRef` from the React 18 `forwardRef` HOC
+* - `React19RefCallback` for callback refs that can return a cleanup function (this is included in `Ref` in React 19
+*   but not in 18)
+* - `Ref` for standard refs from `useRef` or passed in as React 19 prop
+* - `undefined` to allow for easy use of optional `ref` props in React 19
+*/
 function setRef(ref, value) {
-  if (typeof ref === 'function') {
-    return ref(value);
-  } else if (ref) {
-    ref.current = value;
-  }
+	if (typeof ref === "function") return ref(value);
+	else if (ref) ref.current = value;
 }
-
+//#endregion
 export { useMergedRefs };

package/dist/hooks/useMnemonics.d.ts

@@ -1,6 +1 @@
-import React from 'react';
-export declare const useMnemonics: (open: boolean, providedRef?: React.RefObject<HTMLElement | null>) => {
-    containerRef: React.RefObject<HTMLElement | null>;
-};
-export declare const isAlphabetKey: (event: KeyboardEvent) => boolean;
-//# sourceMappingURL=useMnemonics.d.ts.map
+import React from "react";