@primer/react 38.30.1-rc.bce2a87c7 → 38.31.0-rc.2630f104b

package/dist/hooks/useFocusTrap.js

@@ -1,75 +1,61 @@
-import React from 'react';
-import { focusTrap } from '@primer/behaviors';
-import { useProvidedRefOrCreate } from './useProvidedRefOrCreate.js';
-import { useOnOutsideClick } from './useOnOutsideClick.js';
-
+import { useOnOutsideClick } from "./useOnOutsideClick.js";
+import { useProvidedRefOrCreate } from "./useProvidedRefOrCreate.js";
+import React from "react";
+import { focusTrap } from "@primer/behaviors";
+//#region src/hooks/useFocusTrap.ts
 /**
- * Hook used to trap focus inside a container. Returns a ref that can be added to the container
- * that should trap focus.
- * @param settings {FocusTrapHookSettings}
- */
+* Hook used to trap focus inside a container. Returns a ref that can be added to the container
+* that should trap focus.
+* @param settings {FocusTrapHookSettings}
+*/
 function useFocusTrap(settings, dependencies = []) {
-  const [outsideClicked, setOutsideClicked] = React.useState(false);
-  const containerRef = useProvidedRefOrCreate(settings === null || settings === void 0 ? void 0 : settings.containerRef);
-  const initialFocusRef = useProvidedRefOrCreate(settings === null || settings === void 0 ? void 0 : settings.initialFocusRef);
-  const disabled = settings === null || settings === void 0 ? void 0 : settings.disabled;
-  const abortController = React.useRef();
-  const previousFocusedElement = React.useRef(null);
-
-  // If we are enabling a focus trap and haven't already stored the previously focused element
-  // go ahead an do that so we can restore later when the trap is disabled.
-  // eslint-disable-next-line react-hooks/refs
-  if (!previousFocusedElement.current && !disabled) {
-    previousFocusedElement.current = document.activeElement;
-  }
-
-  // This function removes the event listeners that enable the focus trap and restores focus
-  // to the previously-focused element (if necessary).
-  function disableTrap() {
-    var _abortController$curr;
-    (_abortController$curr = abortController.current) === null || _abortController$curr === void 0 ? void 0 : _abortController$curr.abort();
-    if (settings !== null && settings !== void 0 && settings.allowOutsideClick && outsideClicked) {
-      return;
-    }
-    if (settings !== null && settings !== void 0 && settings.returnFocusRef && settings.returnFocusRef.current instanceof HTMLElement) {
-      settings.returnFocusRef.current.focus();
-    } else if (settings !== null && settings !== void 0 && settings.restoreFocusOnCleanUp && previousFocusedElement.current instanceof HTMLElement) {
-      previousFocusedElement.current.focus();
-      previousFocusedElement.current = null;
-    }
-  }
-  React.useEffect(() => {
-    if (containerRef.current instanceof HTMLElement) {
-      if (!disabled) {
-        var _initialFocusRef$curr;
-        abortController.current = focusTrap(containerRef.current, (_initialFocusRef$curr = initialFocusRef.current) !== null && _initialFocusRef$curr !== void 0 ? _initialFocusRef$curr : undefined);
-        return () => {
-          disableTrap();
-        };
-      } else {
-        disableTrap();
-      }
-    }
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [containerRef, initialFocusRef, disabled, ...dependencies]);
-  useOnOutsideClick({
-    containerRef: containerRef,
-    onClickOutside: () => {
-      setOutsideClicked(true);
-      if (settings !== null && settings !== void 0 && settings.allowOutsideClick) {
-        var _abortController$curr2;
-        // eslint-disable-next-line react-hooks/immutability
-        if (settings.returnFocusRef) settings.returnFocusRef = undefined;
-        settings.restoreFocusOnCleanUp = false;
-        (_abortController$curr2 = abortController.current) === null || _abortController$curr2 === void 0 ? void 0 : _abortController$curr2.abort();
-      }
-    }
-  });
-  return {
-    containerRef,
-    initialFocusRef
-  };
+	const [outsideClicked, setOutsideClicked] = React.useState(false);
+	const containerRef = useProvidedRefOrCreate(settings === null || settings === void 0 ? void 0 : settings.containerRef);
+	const initialFocusRef = useProvidedRefOrCreate(settings === null || settings === void 0 ? void 0 : settings.initialFocusRef);
+	const disabled = settings === null || settings === void 0 ? void 0 : settings.disabled;
+	const abortController = React.useRef();
+	const previousFocusedElement = React.useRef(null);
+	if (!previousFocusedElement.current && !disabled) previousFocusedElement.current = document.activeElement;
+	function disableTrap() {
+		var _abortController$curr;
+		(_abortController$curr = abortController.current) === null || _abortController$curr === void 0 || _abortController$curr.abort();
+		if (settings !== null && settings !== void 0 && settings.allowOutsideClick && outsideClicked) return;
+		if (settings !== null && settings !== void 0 && settings.returnFocusRef && settings.returnFocusRef.current instanceof HTMLElement) settings.returnFocusRef.current.focus();
+		else if (settings !== null && settings !== void 0 && settings.restoreFocusOnCleanUp && previousFocusedElement.current instanceof HTMLElement) {
+			previousFocusedElement.current.focus();
+			previousFocusedElement.current = null;
+		}
+	}
+	React.useEffect(() => {
+		if (containerRef.current instanceof HTMLElement) if (!disabled) {
+			var _initialFocusRef$curr;
+			abortController.current = focusTrap(containerRef.current, (_initialFocusRef$curr = initialFocusRef.current) !== null && _initialFocusRef$curr !== void 0 ? _initialFocusRef$curr : void 0);
+			return () => {
+				disableTrap();
+			};
+		} else disableTrap();
+	}, [
+		containerRef,
+		initialFocusRef,
+		disabled,
+		...dependencies
+	]);
+	useOnOutsideClick({
+		containerRef,
+		onClickOutside: () => {
+			setOutsideClicked(true);
+			if (settings !== null && settings !== void 0 && settings.allowOutsideClick) {
+				var _abortController$curr2;
+				if (settings.returnFocusRef) settings.returnFocusRef = void 0;
+				settings.restoreFocusOnCleanUp = false;
+				(_abortController$curr2 = abortController.current) === null || _abortController$curr2 === void 0 || _abortController$curr2.abort();
+			}
+		}
+	});
+	return {
+		containerRef,
+		initialFocusRef
+	};
 }
-
+//#endregion
 export { useFocusTrap };

package/dist/hooks/useFocusZone.d.ts

@@ -1,30 +1,31 @@
-import React from 'react';
-import type { FocusZoneSettings } from '@primer/behaviors';
-export { FocusKeys } from '@primer/behaviors';
-export type { Direction } from '@primer/behaviors';
-export interface FocusZoneHookSettings extends Omit<FocusZoneSettings, 'activeDescendantControl'> {
-    /**
-     * Optional ref for the container that holds all elements participating in arrow key focus.
-     * If one is not passed, we will create one for you and return it from the hook.
-     */
-    containerRef?: React.RefObject<HTMLElement | null>;
-    /**
-     * If using the "active descendant" focus pattern, pass `true` or a ref to the controlling
-     * element. If a ref object is not passed, we will create one for you.
-     */
-    activeDescendantFocus?: boolean | React.RefObject<HTMLElement | null>;
-    /**
-     * Set to true to disable the focus zone and clean up listeners. Can be re-enabled at
-     * any time.
-     */
-    disabled?: boolean;
-    /**
-     * Set to true to allow focus to move to elements that are dynamically prepended to the container.
-     */
-    focusPrependedElements?: boolean;
+import React from "react";
+import { FocusKeys, FocusZoneSettings } from "@primer/behaviors";
+
+//#region src/hooks/useFocusZone.d.ts
+interface FocusZoneHookSettings extends Omit<FocusZoneSettings, 'activeDescendantControl'> {
+  /**
+   * Optional ref for the container that holds all elements participating in arrow key focus.
+   * If one is not passed, we will create one for you and return it from the hook.
+   */
+  containerRef?: React.RefObject<HTMLElement | null>;
+  /**
+   * If using the "active descendant" focus pattern, pass `true` or a ref to the controlling
+   * element. If a ref object is not passed, we will create one for you.
+   */
+  activeDescendantFocus?: boolean | React.RefObject<HTMLElement | null>;
+  /**
+   * Set to true to disable the focus zone and clean up listeners. Can be re-enabled at
+   * any time.
+   */
+  disabled?: boolean;
+  /**
+   * Set to true to allow focus to move to elements that are dynamically prepended to the container.
+   */
+  focusPrependedElements?: boolean;
 }
-export declare function useFocusZone(settings?: FocusZoneHookSettings, dependencies?: React.DependencyList): {
-    containerRef: React.RefObject<HTMLElement | null>;
-    activeDescendantControlRef: React.RefObject<HTMLElement | null>;
+declare function useFocusZone(settings?: FocusZoneHookSettings, dependencies?: React.DependencyList): {
+  containerRef: React.RefObject<HTMLElement | null>;
+  activeDescendantControlRef: React.RefObject<HTMLElement | null>;
 };
-//# sourceMappingURL=useFocusZone.d.ts.map
+//#endregion
+export { FocusKeys, FocusZoneHookSettings, useFocusZone };

package/dist/hooks/useFocusZone.js

@@ -1,42 +1,34 @@
-import React, { useEffect } from 'react';
-import { focusZone } from '@primer/behaviors';
-export { FocusKeys } from '@primer/behaviors';
-import { useProvidedRefOrCreate } from './useProvidedRefOrCreate.js';
-
+import { useProvidedRefOrCreate } from "./useProvidedRefOrCreate.js";
+import React, { useEffect } from "react";
+import { FocusKeys as FocusKeys$1, focusZone } from "@primer/behaviors";
+//#region src/hooks/useFocusZone.ts
 function useFocusZone(settings = {}, dependencies = []) {
-  const containerRef = useProvidedRefOrCreate(settings.containerRef);
-  const useActiveDescendant = !!settings.activeDescendantFocus;
-  const passedActiveDescendantRef = typeof settings.activeDescendantFocus === 'boolean' || !settings.activeDescendantFocus ? undefined : settings.activeDescendantFocus;
-  const activeDescendantControlRef = useProvidedRefOrCreate(passedActiveDescendantRef);
-  const disabled = settings.disabled;
-  const abortController = React.useRef();
-  useEffect(() => {
-    if (containerRef.current instanceof HTMLElement && (
-    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-    !useActiveDescendant || activeDescendantControlRef.current instanceof HTMLElement)) {
-      if (!disabled) {
-        var _activeDescendantCont;
-        const vanillaSettings = {
-          ...settings,
-          activeDescendantControl: (_activeDescendantCont = activeDescendantControlRef.current) !== null && _activeDescendantCont !== void 0 ? _activeDescendantCont : undefined
-        };
-        abortController.current = focusZone(containerRef.current, vanillaSettings);
-        return () => {
-          var _abortController$curr;
-          (_abortController$curr = abortController.current) === null || _abortController$curr === void 0 ? void 0 : _abortController$curr.abort();
-        };
-      } else {
-        var _abortController$curr2;
-        (_abortController$curr2 = abortController.current) === null || _abortController$curr2 === void 0 ? void 0 : _abortController$curr2.abort();
-      }
-    }
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [disabled, ...dependencies]);
-  return {
-    containerRef,
-    activeDescendantControlRef
-  };
+	const containerRef = useProvidedRefOrCreate(settings.containerRef);
+	const useActiveDescendant = !!settings.activeDescendantFocus;
+	const activeDescendantControlRef = useProvidedRefOrCreate(typeof settings.activeDescendantFocus === "boolean" || !settings.activeDescendantFocus ? void 0 : settings.activeDescendantFocus);
+	const disabled = settings.disabled;
+	const abortController = React.useRef();
+	useEffect(() => {
+		if (containerRef.current instanceof HTMLElement && (!useActiveDescendant || activeDescendantControlRef.current instanceof HTMLElement)) if (!disabled) {
+			var _activeDescendantCont;
+			const vanillaSettings = {
+				...settings,
+				activeDescendantControl: (_activeDescendantCont = activeDescendantControlRef.current) !== null && _activeDescendantCont !== void 0 ? _activeDescendantCont : void 0
+			};
+			abortController.current = focusZone(containerRef.current, vanillaSettings);
+			return () => {
+				var _abortController$curr;
+				(_abortController$curr = abortController.current) === null || _abortController$curr === void 0 || _abortController$curr.abort();
+			};
+		} else {
+			var _abortController$curr2;
+			(_abortController$curr2 = abortController.current) === null || _abortController$curr2 === void 0 || _abortController$curr2.abort();
+		}
+	}, [disabled, ...dependencies]);
+	return {
+		containerRef,
+		activeDescendantControlRef
+	};
 }
-
-export { useFocusZone };
+//#endregion
+export { FocusKeys$1 as FocusKeys, useFocusZone };

package/dist/hooks/useId.d.ts

@@ -1,3 +1,4 @@
+//#region src/hooks/useId.d.ts
 /**
  * Generate a unique id to be used in a component. If an `id` is provided, it
  * will be used instead.
@@ -5,5 +6,6 @@
  * @param id - An optional value to be used instead of generating a unique id.
  * Useful when accepting an optional `id` as a prop in a component.
  */
-export declare function useId(id?: string): string;
-//# sourceMappingURL=useId.d.ts.map
+declare function useId(id?: string): string;
+//#endregion
+export { useId };

package/dist/hooks/useId.js

@@ -1,18 +1,16 @@
-import { useId as useId$1 } from 'react';
-
+import { useId } from "react";
+//#region src/hooks/useId.ts
 /**
- * Generate a unique id to be used in a component. If an `id` is provided, it
- * will be used instead.
- *
- * @param id - An optional value to be used instead of generating a unique id.
- * Useful when accepting an optional `id` as a prop in a component.
- */
-function useId(id) {
-  const uniqueId = useId$1();
-  if (id) {
-    return id;
-  }
-  return uniqueId;
+* Generate a unique id to be used in a component. If an `id` is provided, it
+* will be used instead.
+*
+* @param id - An optional value to be used instead of generating a unique id.
+* Useful when accepting an optional `id` as a prop in a component.
+*/
+function useId$1(id) {
+	const uniqueId = useId();
+	if (id) return id;
+	return uniqueId;
 }
-
-export { useId };
+//#endregion
+export { useId$1 as useId };

package/dist/hooks/useMedia.js

@@ -1,80 +1,69 @@
-import { c } from 'react-compiler-runtime';
-import React, { useContext, useEffect } from 'react';
-import { MatchMediaContext } from './MatchMediaContext.js';
-
+import { canUseDOM } from "../utils/environment.js";
+import { warning } from "../utils/warning.js";
+import { MatchMediaContext } from "./MatchMediaContext.js";
+import { c } from "react-compiler-runtime";
+import React, { useContext, useEffect } from "react";
+//#region src/hooks/useMedia.ts
 /**
- * `useMedia` will use the given `mediaQueryString` with `matchMedia` to
- * determine if the document matches the media query string.
- *
- * If `MatchMedia` is used as an ancestor, `useMedia` will instead use the
- * value of the media query string, if available
- *
- * @example
- * function Example() {
- *   const coarsePointer = useMedia('(pointer: coarse)');
- *   // ...
- * }
- */
+* `useMedia` will use the given `mediaQueryString` with `matchMedia` to
+* determine if the document matches the media query string.
+*
+* If `MatchMedia` is used as an ancestor, `useMedia` will instead use the
+* value of the media query string, if available
+*
+* @example
+* function Example() {
+*   const coarsePointer = useMedia('(pointer: coarse)');
+*   // ...
+* }
+*/
 function useMedia(mediaQueryString, defaultState) {
-  const $ = c(8);
-  const features = useContext(MatchMediaContext);
-  let t0;
-  if ($[0] !== defaultState || $[1] !== features || $[2] !== mediaQueryString) {
-    t0 = () => {
-      if (features[mediaQueryString] !== undefined) {
-        return features[mediaQueryString];
-      }
-      {
-        return defaultState;
-      }
-    };
-    $[0] = defaultState;
-    $[1] = features;
-    $[2] = mediaQueryString;
-    $[3] = t0;
-  } else {
-    t0 = $[3];
-  }
-  const [matches, setMatches] = React.useState(t0);
-  if (features[mediaQueryString] !== undefined && matches !== features[mediaQueryString]) {
-    setMatches(features[mediaQueryString]);
-  }
-  let t1;
-  let t2;
-  if ($[4] !== features || $[5] !== mediaQueryString) {
-    t1 = () => {
-      if (features[mediaQueryString] !== undefined) {
-        return;
-      }
-      const listener = function listener(event) {
-        setMatches(event.matches);
-      };
-      const mediaQueryList = window.matchMedia(mediaQueryString);
-      if (mediaQueryList.addEventListener) {
-        mediaQueryList.addEventListener("change", listener);
-      } else {
-        mediaQueryList.addListener(listener);
-      }
-      setMatches(mediaQueryList.matches);
-      return () => {
-        if (mediaQueryList.addEventListener) {
-          mediaQueryList.removeEventListener("change", listener);
-        } else {
-          mediaQueryList.removeListener(listener);
-        }
-      };
-    };
-    t2 = [features, mediaQueryString];
-    $[4] = features;
-    $[5] = mediaQueryString;
-    $[6] = t1;
-    $[7] = t2;
-  } else {
-    t1 = $[6];
-    t2 = $[7];
-  }
-  useEffect(t1, t2);
-  return matches;
+	const $ = c(8);
+	const features = useContext(MatchMediaContext);
+	let t0;
+	if ($[0] !== defaultState || $[1] !== features || $[2] !== mediaQueryString) {
+		t0 = () => {
+			if (features[mediaQueryString] !== void 0) return features[mediaQueryString];
+			if (defaultState !== void 0) return defaultState;
+			if (canUseDOM) return window.matchMedia(mediaQueryString).matches;
+			warning(true, "`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.");
+			return false;
+		};
+		$[0] = defaultState;
+		$[1] = features;
+		$[2] = mediaQueryString;
+		$[3] = t0;
+	} else t0 = $[3];
+	const [matches, setMatches] = React.useState(t0);
+	if (features[mediaQueryString] !== void 0 && matches !== features[mediaQueryString]) setMatches(features[mediaQueryString]);
+	let t1;
+	let t2;
+	if ($[4] !== features || $[5] !== mediaQueryString) {
+		t1 = () => {
+			if (features[mediaQueryString] !== void 0) return;
+			const listener = function listener(event) {
+				setMatches(event.matches);
+			};
+			const mediaQueryList = window.matchMedia(mediaQueryString);
+			if (mediaQueryList.addEventListener) mediaQueryList.addEventListener("change", listener);
+			else mediaQueryList.addListener(listener);
+			setMatches(mediaQueryList.matches);
+			return () => {
+				if (mediaQueryList.addEventListener) mediaQueryList.removeEventListener("change", listener);
+				else mediaQueryList.removeListener(listener);
+			};
+		};
+		t2 = [features, mediaQueryString];
+		$[4] = features;
+		$[5] = mediaQueryString;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t1 = $[6];
+		t2 = $[7];
+	}
+	useEffect(t1, t2);
+	return matches;
 }
-
+//#endregion
 export { useMedia };

package/dist/hooks/useMenuInitialFocus.d.ts

@@ -1,3 +1 @@
-import React from 'react';
-export declare const useMenuInitialFocus: (open: boolean, containerRef?: React.RefObject<HTMLElement | null>, anchorRef?: React.RefObject<HTMLElement | null>) => void;
-//# sourceMappingURL=useMenuInitialFocus.d.ts.map
+import React from "react";

package/dist/hooks/useMenuInitialFocus.js

@@ -1,66 +1,68 @@
-import React from 'react';
-import { iterateFocusableElements } from '@primer/behaviors/utils';
-
+import React from "react";
+import { iterateFocusableElements } from "@primer/behaviors/utils";
+//#region src/hooks/useMenuInitialFocus.ts
 const useMenuInitialFocus = (open, containerRef, anchorRef) => {
-  /**
-   * We need to pick the first element to focus based on how the menu was opened,
-   * however, we need to wait for the menu to be open to set focus.
-   * This is why we use set openingKey in state and have 2 effects
-   */
-  const [openingGesture, setOpeningGesture] = React.useState(undefined);
-  React.useEffect(function inferOpeningKey() {
-    const anchorElement = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
-    const clickHandler = event => {
-      // event.detail === 0 means onClick was fired by Enter/Space key
-      // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
-      if (event.detail !== 0) setOpeningGesture('mouse-click');
-    };
-    const keydownHandler = event => {
-      if (['Space', 'Enter', 'ArrowDown', 'ArrowUp'].includes(event.code)) {
-        setOpeningGesture(event.code);
-      }
-    };
-    anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.addEventListener('click', clickHandler);
-    anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.addEventListener('keydown', keydownHandler);
-    return () => {
-      anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.removeEventListener('click', clickHandler);
-      anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.removeEventListener('keydown', keydownHandler);
-    };
-  }, [anchorRef]);
-
-  /**
-   * Pick the first element to focus based on the key used to open the Menu
-   * Click: anchor
-   * ArrowDown | Space | Enter: first element
-   * ArrowUp: last element
-   */
-  React.useEffect(function moveFocusOnOpen() {
-    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-    if (!open || !(containerRef !== null && containerRef !== void 0 && containerRef.current)) return; // wait till the menu is open
-
-    const iterable = iterateFocusableElements(containerRef.current);
-    if (openingGesture === 'mouse-click') {
-      if (anchorRef !== null && anchorRef !== void 0 && anchorRef.current) anchorRef.current.focus();else throw new Error('For focus management, please attach anchorRef');
-    } else if (openingGesture && ['ArrowDown', 'Space', 'Enter'].includes(openingGesture)) {
-      const firstElement = iterable.next().value;
-      /** We push imperative focus to the next tick to prevent React's batching */
-      setTimeout(() => firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus());
-    } else if ('ArrowUp' === openingGesture) {
-      const elements = [...iterable];
-      const lastElement = elements[elements.length - 1];
-      setTimeout(() => lastElement.focus());
-    } else {
-      /** if the menu was not opened with the anchor, we default to the first element
-       *  for example: with keyboard shortcut (see stories/fixtures)
-       */
-      const firstElement = iterable.next().value;
-      setTimeout(() => firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus());
-    }
-  },
-  // we don't want containerRef in dependencies
-  // because re-renders to containerRef while it's open should not fire initialMenuFocus
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [open, openingGesture, anchorRef]);
+	/**
+	* We need to pick the first element to focus based on how the menu was opened,
+	* however, we need to wait for the menu to be open to set focus.
+	* This is why we use set openingKey in state and have 2 effects
+	*/
+	const [openingGesture, setOpeningGesture] = React.useState(void 0);
+	React.useEffect(function inferOpeningKey() {
+		const anchorElement = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
+		const clickHandler = (event) => {
+			if (event.detail !== 0) setOpeningGesture("mouse-click");
+		};
+		const keydownHandler = (event) => {
+			if ([
+				"Space",
+				"Enter",
+				"ArrowDown",
+				"ArrowUp"
+			].includes(event.code)) setOpeningGesture(event.code);
+		};
+		anchorElement === null || anchorElement === void 0 || anchorElement.addEventListener("click", clickHandler);
+		anchorElement === null || anchorElement === void 0 || anchorElement.addEventListener("keydown", keydownHandler);
+		return () => {
+			anchorElement === null || anchorElement === void 0 || anchorElement.removeEventListener("click", clickHandler);
+			anchorElement === null || anchorElement === void 0 || anchorElement.removeEventListener("keydown", keydownHandler);
+		};
+	}, [anchorRef]);
+	/**
+	* Pick the first element to focus based on the key used to open the Menu
+	* Click: anchor
+	* ArrowDown | Space | Enter: first element
+	* ArrowUp: last element
+	*/
+	React.useEffect(function moveFocusOnOpen() {
+		if (!open || !(containerRef !== null && containerRef !== void 0 && containerRef.current)) return;
+		const iterable = iterateFocusableElements(containerRef.current);
+		if (openingGesture === "mouse-click") if (anchorRef !== null && anchorRef !== void 0 && anchorRef.current) anchorRef.current.focus();
+		else throw new Error("For focus management, please attach anchorRef");
+		else if (openingGesture && [
+			"ArrowDown",
+			"Space",
+			"Enter"
+		].includes(openingGesture)) {
+			const firstElement = iterable.next().value;
+			/** We push imperative focus to the next tick to prevent React's batching */
+			setTimeout(() => firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus());
+		} else if ("ArrowUp" === openingGesture) {
+			const elements = [...iterable];
+			const lastElement = elements[elements.length - 1];
+			setTimeout(() => lastElement.focus());
+		} else {
+			/** if the menu was not opened with the anchor, we default to the first element
+			*  for example: with keyboard shortcut (see stories/fixtures)
+			*/
+			const firstElement = iterable.next().value;
+			setTimeout(() => firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus());
+		}
+	}, [
+		open,
+		openingGesture,
+		anchorRef
+	]);
 };
-
+//#endregion
 export { useMenuInitialFocus };

package/dist/hooks/useMenuKeyboardNavigation.d.ts

@@ -1,11 +1 @@
-import React from 'react';
-import type { MenuCloseHandler } from '../ActionMenu';
-/**
- * Keyboard navigation is a mix of 4 hooks
- * 1. useMenuInitialFocus
- * 2. useTypeaheadFocus
- * 3. useCloseMenuOnTab
- * 4. useMoveFocusToMenuItem
- */
-export declare const useMenuKeyboardNavigation: (open: boolean, onClose: MenuCloseHandler | undefined, containerRef?: React.RefObject<HTMLElement | null>, anchorRef?: React.RefObject<HTMLElement | null>, isSubmenu?: boolean) => void;
-//# sourceMappingURL=useMenuKeyboardNavigation.d.ts.map
+import React from "react";