@primer/react 38.30.1-rc.bce2a87c7 → 38.31.0-rc.099285e6a

package/dist/hooks/useMnemonics.js

@@ -1,115 +1,85 @@
-import { c } from 'react-compiler-runtime';
-import React from 'react';
-import { iterateFocusableElements } from '@primer/behaviors/utils';
-import { useProvidedRefOrCreate } from './useProvidedRefOrCreate.js';
-
-/*
- * A mnemonic indicates to the user which key to press (single)
- * to activate a command or navigate to a component
- * typically appearing in a menu title, menu item, or the text of a button.
- */
-
+import { useProvidedRefOrCreate } from "./useProvidedRefOrCreate.js";
+import { c } from "react-compiler-runtime";
+import React from "react";
+import { iterateFocusableElements } from "@primer/behaviors/utils";
+//#region src/hooks/useMnemonics.ts
 const useMnemonics = (open, providedRef) => {
-  const $ = c(10);
-  const containerRef = useProvidedRefOrCreate(providedRef);
-  let t0;
-  let t1;
-  if ($[0] !== containerRef || $[1] !== open) {
-    t0 = function addAriaKeyshortcuts() {
-      if (!open || !containerRef.current) {
-        return;
-      }
-      const container = containerRef.current;
-      const focusableItems = [...iterateFocusableElements(container)];
-      focusableItems.map(_temp);
-    };
-    t1 = [open, containerRef];
-    $[0] = containerRef;
-    $[1] = open;
-    $[2] = t0;
-    $[3] = t1;
-  } else {
-    t0 = $[2];
-    t1 = $[3];
-  }
-  React.useEffect(t0, t1);
-  let t2;
-  let t3;
-  if ($[4] !== containerRef || $[5] !== open) {
-    t2 = function handleKeyDown() {
-      if (!open || !containerRef.current) {
-        return;
-      }
-      const container_0 = containerRef.current;
-      const handler = event => {
-        var _elementToFocus;
-        const activeElement = document.activeElement;
-        if (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA") {
-          return;
-        }
-        const hasModifier = event.ctrlKey || event.altKey || event.metaKey;
-        if (hasModifier) {
-          return;
-        }
-        if (!isAlphabetKey(event)) {
-          return;
-        }
-        event.stopPropagation();
-        const query = event.key.toLowerCase();
-        let elementToFocus;
-        const focusableItems_0 = [...iterateFocusableElements(container_0)];
-        const itemsMatchingKey = focusableItems_0.filter(item_0 => {
-          var _item_0$getAttribute;
-          const keyshortcuts = (_item_0$getAttribute = item_0.getAttribute("aria-keyshortcuts")) === null || _item_0$getAttribute === void 0 ? void 0 : _item_0$getAttribute.split(" ").map(_temp2);
-          return keyshortcuts && keyshortcuts.includes(query);
-        });
-        const currentActiveIndex = itemsMatchingKey.indexOf(activeElement);
-        if (currentActiveIndex === itemsMatchingKey.length - 1) {
-          elementToFocus = itemsMatchingKey[0];
-        } else {
-          elementToFocus = itemsMatchingKey.find((item_1, index) => index > currentActiveIndex);
-        }
-        (_elementToFocus = elementToFocus) === null || _elementToFocus === void 0 ? void 0 : _elementToFocus.focus();
-      };
-      container_0.addEventListener("keydown", handler);
-      return () => container_0.removeEventListener("keydown", handler);
-    };
-    t3 = [open, containerRef];
-    $[4] = containerRef;
-    $[5] = open;
-    $[6] = t2;
-    $[7] = t3;
-  } else {
-    t2 = $[6];
-    t3 = $[7];
-  }
-  React.useEffect(t2, t3);
-  let t4;
-  if ($[8] !== containerRef) {
-    t4 = {
-      containerRef
-    };
-    $[8] = containerRef;
-    $[9] = t4;
-  } else {
-    t4 = $[9];
-  }
-  return t4;
+	const $ = c(10);
+	const containerRef = useProvidedRefOrCreate(providedRef);
+	let t0;
+	let t1;
+	if ($[0] !== containerRef || $[1] !== open) {
+		t0 = function addAriaKeyshortcuts() {
+			if (!open || !containerRef.current) return;
+			const container = containerRef.current;
+			[...iterateFocusableElements(container)].map(_temp);
+		};
+		t1 = [open, containerRef];
+		$[0] = containerRef;
+		$[1] = open;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	React.useEffect(t0, t1);
+	let t2;
+	let t3;
+	if ($[4] !== containerRef || $[5] !== open) {
+		t2 = function handleKeyDown() {
+			if (!open || !containerRef.current) return;
+			const container_0 = containerRef.current;
+			const handler = (event) => {
+				var _elementToFocus;
+				const activeElement = document.activeElement;
+				if (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA") return;
+				if (event.ctrlKey || event.altKey || event.metaKey) return;
+				if (!isAlphabetKey(event)) return;
+				event.stopPropagation();
+				const query = event.key.toLowerCase();
+				let elementToFocus;
+				const itemsMatchingKey = [...iterateFocusableElements(container_0)].filter((item_0) => {
+					var _item_0$getAttribute;
+					const keyshortcuts = (_item_0$getAttribute = item_0.getAttribute("aria-keyshortcuts")) === null || _item_0$getAttribute === void 0 ? void 0 : _item_0$getAttribute.split(" ").map(_temp2);
+					return keyshortcuts && keyshortcuts.includes(query);
+				});
+				const currentActiveIndex = itemsMatchingKey.indexOf(activeElement);
+				if (currentActiveIndex === itemsMatchingKey.length - 1) elementToFocus = itemsMatchingKey[0];
+				else elementToFocus = itemsMatchingKey.find((item_1, index) => index > currentActiveIndex);
+				(_elementToFocus = elementToFocus) === null || _elementToFocus === void 0 || _elementToFocus.focus();
+			};
+			container_0.addEventListener("keydown", handler);
+			return () => container_0.removeEventListener("keydown", handler);
+		};
+		t3 = [open, containerRef];
+		$[4] = containerRef;
+		$[5] = open;
+		$[6] = t2;
+		$[7] = t3;
+	} else {
+		t2 = $[6];
+		t3 = $[7];
+	}
+	React.useEffect(t2, t3);
+	let t4;
+	if ($[8] !== containerRef) {
+		t4 = { containerRef };
+		$[8] = containerRef;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
 };
-const isAlphabetKey = event => {
-  return event.key.length === 1 && /[a-z\d]/i.test(event.key);
+const isAlphabetKey = (event) => {
+	return event.key.length === 1 && /[a-z\d]/i.test(event.key);
 };
 function _temp(item) {
-  if (item.getAttribute("aria-keyshortcuts")) {
-    return;
-  }
-  const firstLetter = item.textContent.toLowerCase()[0];
-  if (firstLetter) {
-    item.setAttribute("aria-keyshortcuts", firstLetter);
-  }
+	if (item.getAttribute("aria-keyshortcuts")) return;
+	const firstLetter = item.textContent.toLowerCase()[0];
+	if (firstLetter) item.setAttribute("aria-keyshortcuts", firstLetter);
 }
 function _temp2(shortcut) {
-  return shortcut.toLowerCase();
+	return shortcut.toLowerCase();
 }
-
+//#endregion
 export { isAlphabetKey, useMnemonics };

package/dist/hooks/useOnEscapePress.d.ts

@@ -1,3 +1,4 @@
+//#region src/hooks/useOnEscapePress.d.ts
 /**
  * Sets up a `keydown` listener on `window.document`. If
  * 1) The pressed key is "Escape", and
@@ -19,5 +20,6 @@
  * `onEscape` callback for memoization. Omit this param if the callback is already
  * memoized. See `React.useCallback` for more info on memoization.
  */
-export declare const useOnEscapePress: (onEscape: (e: KeyboardEvent) => void, callbackDependencies?: React.DependencyList) => void;
-//# sourceMappingURL=useOnEscapePress.d.ts.map
+declare const useOnEscapePress: (onEscape: (e: KeyboardEvent) => void, callbackDependencies?: React.DependencyList) => void;
+//#endregion
+export { useOnEscapePress };

package/dist/hooks/useOnEscapePress.js

@@ -1,69 +1,58 @@
-import { useCallback, useMemo, useEffect } from 'react';
-
+import { useCallback, useEffect, useMemo } from "react";
+//#region src/hooks/useOnEscapePress.ts
 /**
- * Calls all handlers in reverse order
- * @param event The KeyboardEvent generated by the Escape keydown.
- */
+* Calls all handlers in reverse order
+* @param event The KeyboardEvent generated by the Escape keydown.
+*/
 function handleEscape(event) {
-  if (!event.defaultPrevented) {
-    for (const handler of Object.values(registry).reverse()) {
-      handler(event);
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      if (event.defaultPrevented) break;
-    }
-  }
+	if (!event.defaultPrevented) for (const handler of Object.values(registry).reverse()) {
+		handler(event);
+		if (event.defaultPrevented) break;
+	}
 }
 const registry = {};
 function register(id, handler) {
-  registry[id] = handler;
+	registry[id] = handler;
 }
 function deregister(id) {
-  delete registry[id];
+	delete registry[id];
 }
-
-// For auto-incrementing unique identifiers for registered handlers.
 let handlerId = 0;
-
 /**
- * Sets up a `keydown` listener on `window.document`. If
- * 1) The pressed key is "Escape", and
- * 2) The event has not had `.preventDefault()` called
- * The given callback will be executed.
- *
- * Note: If multiple `useOnEscapePress` hooks are active simultaneously, the
- * callbacks will occur in reverse order. In other words, if a parent component
- * and a child component both call `useOnEscapePress`, when the user presses
- * Escape, the child component's callback will execute, followed by the parent's
- * callback. Each callback has the chance to call `.preventDefault()` on the
- * event to prevent further callbacks.
- *
- * @param callback {(e: KeyboardEvent) => void} The callback that gets executed
- * when the Escape key is pressed. The KeyboardEvent generated by the Escape
- * keypress is passed as the only argument.
- *
- * @param callbackDependencies {React.DependencyList} The dependencies of the given
- * `onEscape` callback for memoization. Omit this param if the callback is already
- * memoized. See `React.useCallback` for more info on memoization.
- */
+* Sets up a `keydown` listener on `window.document`. If
+* 1) The pressed key is "Escape", and
+* 2) The event has not had `.preventDefault()` called
+* The given callback will be executed.
+*
+* Note: If multiple `useOnEscapePress` hooks are active simultaneously, the
+* callbacks will occur in reverse order. In other words, if a parent component
+* and a child component both call `useOnEscapePress`, when the user presses
+* Escape, the child component's callback will execute, followed by the parent's
+* callback. Each callback has the chance to call `.preventDefault()` on the
+* event to prevent further callbacks.
+*
+* @param callback {(e: KeyboardEvent) => void} The callback that gets executed
+* when the Escape key is pressed. The KeyboardEvent generated by the Escape
+* keypress is passed as the only argument.
+*
+* @param callbackDependencies {React.DependencyList} The dependencies of the given
+* `onEscape` callback for memoization. Omit this param if the callback is already
+* memoized. See `React.useCallback` for more info on memoization.
+*/
 const useOnEscapePress = (onEscape, callbackDependencies = [onEscape]) => {
-  // eslint-disable-next-line react-hooks/exhaustive-deps, react-hooks/use-memo
-  const escapeCallback = useCallback(onEscape, callbackDependencies);
-  const handler = useCallback(event => {
-    if (event.key === 'Escape') escapeCallback(event);
-  }, [escapeCallback]);
-  const id = useMemo(() => handlerId++, []);
-  useEffect(() => {
-    if (Object.keys(registry).length === 0) {
-      document.addEventListener('keydown', handleEscape);
-    }
-    register(id, handler);
-    return () => {
-      deregister(id);
-      if (Object.keys(registry).length === 0) {
-        document.removeEventListener('keydown', handleEscape);
-      }
-    };
-  }, [id, handler]);
+	const escapeCallback = useCallback(onEscape, callbackDependencies);
+	const handler = useCallback((event) => {
+		if (event.key === "Escape") escapeCallback(event);
+	}, [escapeCallback]);
+	const id = useMemo(() => handlerId++, []);
+	useEffect(() => {
+		if (Object.keys(registry).length === 0) document.addEventListener("keydown", handleEscape);
+		register(id, handler);
+		return () => {
+			deregister(id);
+			if (Object.keys(registry).length === 0) document.removeEventListener("keydown", handleEscape);
+		};
+	}, [id, handler]);
 };
-
+//#endregion
 export { useOnEscapePress };

package/dist/hooks/useOnOutsideClick.d.ts

@@ -1,9 +1,16 @@
-import type React from 'react';
-export type TouchOrMouseEvent = MouseEvent | TouchEvent;
-export type UseOnOutsideClickSettings = {
-    containerRef: React.RefObject<HTMLDivElement | null> | React.RefObject<HTMLUListElement | null>;
-    ignoreClickRefs?: React.RefObject<HTMLElement | null>[];
-    onClickOutside: (e: TouchOrMouseEvent) => void;
+import React from "react";
+
+//#region src/hooks/useOnOutsideClick.d.ts
+type TouchOrMouseEvent = MouseEvent | TouchEvent;
+type UseOnOutsideClickSettings = {
+  containerRef: React.RefObject<HTMLDivElement | null> | React.RefObject<HTMLUListElement | null>;
+  ignoreClickRefs?: React.RefObject<HTMLElement | null>[];
+  onClickOutside: (e: TouchOrMouseEvent) => void;
 };
-export declare const useOnOutsideClick: ({ containerRef, ignoreClickRefs, onClickOutside }: UseOnOutsideClickSettings) => void;
-//# sourceMappingURL=useOnOutsideClick.d.ts.map
+declare const useOnOutsideClick: ({
+  containerRef,
+  ignoreClickRefs,
+  onClickOutside
+}: UseOnOutsideClickSettings) => void;
+//#endregion
+export { TouchOrMouseEvent, UseOnOutsideClickSettings, useOnOutsideClick };

package/dist/hooks/useOnOutsideClick.js

@@ -1,75 +1,44 @@
-import { useMemo, useCallback, useEffect } from 'react';
-
-// Because events are handled at the document level, we provide a mechanism for early return.
+import { useCallback, useEffect, useMemo } from "react";
+//#region src/hooks/useOnOutsideClick.tsx
 const stopPropagation = true;
-
 /**
- * Calls all handlers in reverse order
- * @param event The MouseEvent generated by the click event.
- */
+* Calls all handlers in reverse order
+* @param event The MouseEvent generated by the click event.
+*/
 function handleClick(event) {
-  if (!event.defaultPrevented) {
-    for (const handler of Object.values(registry).reverse()) {
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      if (handler(event) === stopPropagation || event.defaultPrevented) {
-        break;
-      }
-    }
-  }
+	if (!event.defaultPrevented) {
+		for (const handler of Object.values(registry).reverse()) if (handler(event) === stopPropagation || event.defaultPrevented) break;
+	}
 }
 const registry = {};
 function register(id, handler) {
-  registry[id] = handler;
+	registry[id] = handler;
 }
 function deregister(id) {
-  delete registry[id];
+	delete registry[id];
 }
-
-// For auto-incrementing unique identifiers for registered handlers.
 let handlerId = 0;
-const useOnOutsideClick = ({
-  containerRef,
-  ignoreClickRefs,
-  onClickOutside
-}) => {
-  const id = useMemo(() => handlerId++, []);
-  const handler = useCallback(event => {
-    var _containerRef$current;
-    // don't call click handler if the mouse event was triggered by an auxiliary button (right click/wheel button/etc)
-    if (event instanceof MouseEvent && event.button > 0) {
-      return stopPropagation;
-    }
-
-    // don't call handler if the click happened inside of the container
-    if ((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
-      return stopPropagation;
-    }
-
-    // don't call handler if click happened on an ignored ref
-    if (ignoreClickRefs && ignoreClickRefs.some(({
-      current
-    }) => current === null || current === void 0 ? void 0 : current.contains(event.target))) {
-      return stopPropagation;
-    }
-    onClickOutside(event);
-  }, [containerRef, ignoreClickRefs, onClickOutside]);
-  useEffect(() => {
-    if (Object.keys(registry).length === 0) {
-      // use capture to ensure we get all events
-      document.addEventListener('mousedown', handleClick, {
-        capture: true
-      });
-    }
-    register(id, handler);
-    return () => {
-      deregister(id);
-      if (Object.keys(registry).length === 0) {
-        document.removeEventListener('mousedown', handleClick, {
-          capture: true
-        });
-      }
-    };
-  }, [id, handler]);
+const useOnOutsideClick = ({ containerRef, ignoreClickRefs, onClickOutside }) => {
+	const id = useMemo(() => handlerId++, []);
+	const handler = useCallback((event) => {
+		var _containerRef$current;
+		if (event instanceof MouseEvent && event.button > 0) return stopPropagation;
+		if ((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) return stopPropagation;
+		if (ignoreClickRefs && ignoreClickRefs.some(({ current }) => current === null || current === void 0 ? void 0 : current.contains(event.target))) return stopPropagation;
+		onClickOutside(event);
+	}, [
+		containerRef,
+		ignoreClickRefs,
+		onClickOutside
+	]);
+	useEffect(() => {
+		if (Object.keys(registry).length === 0) document.addEventListener("mousedown", handleClick, { capture: true });
+		register(id, handler);
+		return () => {
+			deregister(id);
+			if (Object.keys(registry).length === 0) document.removeEventListener("mousedown", handleClick, { capture: true });
+		};
+	}, [id, handler]);
 };
-
+//#endregion
 export { useOnOutsideClick };

package/dist/hooks/useOpenAndCloseFocus.d.ts

@@ -1,9 +1,17 @@
-import type React from 'react';
-export type UseOpenAndCloseFocusSettings = {
-    initialFocusRef?: React.RefObject<HTMLElement | null>;
-    containerRef: React.RefObject<HTMLElement | null>;
-    returnFocusRef: React.RefObject<HTMLElement | null>;
-    preventFocusOnOpen?: boolean;
+import React from "react";
+
+//#region src/hooks/useOpenAndCloseFocus.d.ts
+type UseOpenAndCloseFocusSettings = {
+  initialFocusRef?: React.RefObject<HTMLElement | null>;
+  containerRef: React.RefObject<HTMLElement | null>;
+  returnFocusRef: React.RefObject<HTMLElement | null>;
+  preventFocusOnOpen?: boolean;
 };
-export declare function useOpenAndCloseFocus({ initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen, }: UseOpenAndCloseFocusSettings): void;
-//# sourceMappingURL=useOpenAndCloseFocus.d.ts.map
+declare function useOpenAndCloseFocus({
+  initialFocusRef,
+  returnFocusRef,
+  containerRef,
+  preventFocusOnOpen
+}: UseOpenAndCloseFocusSettings): void;
+//#endregion
+export { UseOpenAndCloseFocusSettings, useOpenAndCloseFocus };

package/dist/hooks/useOpenAndCloseFocus.js

@@ -1,46 +1,43 @@
-import { c } from 'react-compiler-runtime';
-import { useEffect } from 'react';
-import { iterateFocusableElements } from '@primer/behaviors/utils';
-
+import { c } from "react-compiler-runtime";
+import { useEffect } from "react";
+import { iterateFocusableElements } from "@primer/behaviors/utils";
+//#region src/hooks/useOpenAndCloseFocus.ts
 function useOpenAndCloseFocus(t0) {
-  const $ = c(6);
-  const {
-    initialFocusRef,
-    returnFocusRef,
-    containerRef,
-    preventFocusOnOpen
-  } = t0;
-  let t1;
-  let t2;
-  if ($[0] !== containerRef || $[1] !== initialFocusRef || $[2] !== preventFocusOnOpen || $[3] !== returnFocusRef) {
-    t1 = () => {
-      if (!preventFocusOnOpen) {
-        if (initialFocusRef && initialFocusRef.current) {
-          initialFocusRef.current.focus();
-        } else {
-          if (containerRef.current) {
-            const firstItem = iterateFocusableElements(containerRef.current).next().value;
-            firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
-          }
-        }
-      }
-      const returnFocusRefCurrent = returnFocusRef.current;
-      return function () {
-        returnFocusRefCurrent === null || returnFocusRefCurrent === void 0 ? void 0 : returnFocusRefCurrent.focus();
-      };
-    };
-    t2 = [initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen];
-    $[0] = containerRef;
-    $[1] = initialFocusRef;
-    $[2] = preventFocusOnOpen;
-    $[3] = returnFocusRef;
-    $[4] = t1;
-    $[5] = t2;
-  } else {
-    t1 = $[4];
-    t2 = $[5];
-  }
-  useEffect(t1, t2);
+	const $ = c(6);
+	const { initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen } = t0;
+	let t1;
+	let t2;
+	if ($[0] !== containerRef || $[1] !== initialFocusRef || $[2] !== preventFocusOnOpen || $[3] !== returnFocusRef) {
+		t1 = () => {
+			if (!preventFocusOnOpen) {
+				if (initialFocusRef && initialFocusRef.current) initialFocusRef.current.focus();
+				else if (containerRef.current) {
+					const firstItem = iterateFocusableElements(containerRef.current).next().value;
+					firstItem === null || firstItem === void 0 || firstItem.focus();
+				}
+			}
+			const returnFocusRefCurrent = returnFocusRef.current;
+			return function() {
+				returnFocusRefCurrent === null || returnFocusRefCurrent === void 0 || returnFocusRefCurrent.focus();
+			};
+		};
+		t2 = [
+			initialFocusRef,
+			returnFocusRef,
+			containerRef,
+			preventFocusOnOpen
+		];
+		$[0] = containerRef;
+		$[1] = initialFocusRef;
+		$[2] = preventFocusOnOpen;
+		$[3] = returnFocusRef;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+	}
+	useEffect(t1, t2);
 }
-
+//#endregion
 export { useOpenAndCloseFocus };

package/dist/hooks/useOverflow.d.ts

@@ -1,2 +1,4 @@
-export declare function useOverflow<T extends HTMLElement>(ref: React.RefObject<T>): boolean;
-//# sourceMappingURL=useOverflow.d.ts.map
+//#region src/hooks/useOverflow.d.ts
+declare function useOverflow<T extends HTMLElement>(ref: React.RefObject<T>): boolean;
+//#endregion
+export { useOverflow };