@primer/react 38.36.0-rc.bd3520b7c → 38.36.0-rc.e29d259bd

package/dist/hooks/useMenuInitialFocus.js

@@ -1,68 +1,83 @@
+import { c } from "react-compiler-runtime";
 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 $ = c(9);
 	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");
+	let t0;
+	let t1;
+	if ($[0] !== anchorRef) {
+		t0 = 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_0) => {
+				if ([
+					"Space",
+					"Enter",
+					"ArrowDown",
+					"ArrowUp"
+				].includes(event_0.code)) setOpeningGesture(event_0.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);
+			};
 		};
-		const keydownHandler = (event) => {
-			if ([
-				"Space",
-				"Enter",
+		t1 = [anchorRef];
+		$[0] = anchorRef;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	React.useEffect(t0, t1);
+	let t2;
+	let t3;
+	if ($[3] !== anchorRef || $[4] !== containerRef || $[5] !== open || $[6] !== openingGesture) {
+		t2 = 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",
-				"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);
+				"Space",
+				"Enter"
+			].includes(openingGesture)) {
+				const firstElement = iterable.next().value;
+				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 {
+				const firstElement_0 = iterable.next().value;
+				setTimeout(() => firstElement_0 === null || firstElement_0 === void 0 ? void 0 : firstElement_0.focus());
+			}
 		};
-	}, [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
-	]);
+		t3 = [
+			open,
+			openingGesture,
+			anchorRef,
+			containerRef
+		];
+		$[3] = anchorRef;
+		$[4] = containerRef;
+		$[5] = open;
+		$[6] = openingGesture;
+		$[7] = t2;
+		$[8] = t3;
+	} else {
+		t2 = $[7];
+		t3 = $[8];
+	}
+	React.useEffect(t2, t3);
 };
 //#endregion
 export { useMenuInitialFocus };

package/generated/components.json

@@ -9042,7 +9042,7 @@
         },
         {
           "id": "components-underlinenav-features--overflow-template",
-          "code": "({ initialSelectedIndex = 1 }: { initialSelectedIndex?: number }) => {\n  const [selectedIndex, setSelectedIndex] = React.useState<number | null>(\n    initialSelectedIndex,\n  )\n  return (\n    <UnderlineNav aria-label=\"Repository\">\n      {items.map((item, index) => (\n        <UnderlineNav.Item\n          key={item.navigation}\n          leadingVisual={item.icon}\n          aria-current={index === selectedIndex ? 'page' : undefined}\n          // Set so that navigation in interaction tests does not cause the\n          // page to load the storybook iframe URL and instead keeps the test in\n          // the local preview\n          target=\"_self\"\n          onSelect={(event) => {\n            event.preventDefault()\n            setSelectedIndex(index)\n          }}\n          counter={item.counter}\n          href={item.href}\n        >\n          {item.navigation}\n        </UnderlineNav.Item>\n      ))}\n    </UnderlineNav>\n  )\n}"
+          "code": "({ initialSelectedIndex = 1 }: { initialSelectedIndex?: number }) => {\n  const [selectedIndex, setSelectedIndex] = React.useState<number | null>(\n    initialSelectedIndex,\n  )\n  return (\n    <UnderlineNav aria-label=\"Repository\" hideIconsBreakpoint=\"medium\">\n      {items.map((item, index) => (\n        <UnderlineNav.Item\n          key={item.navigation}\n          leadingVisual={item.icon}\n          aria-current={index === selectedIndex ? 'page' : undefined}\n          // Set so that navigation in interaction tests does not cause the\n          // page to load the storybook iframe URL and instead keeps the test in\n          // the local preview\n          target=\"_self\"\n          onSelect={(event) => {\n            event.preventDefault()\n            setSelectedIndex(index)\n          }}\n          counter={item.counter}\n          href={item.href}\n        >\n          {item.navigation}\n        </UnderlineNav.Item>\n      ))}\n    </UnderlineNav>\n  )\n}"
         },
         {
           "id": "components-underlinenav-features--overflow-on-narrow-screen",
@@ -9078,6 +9078,12 @@
           "defaultValue": "false",
           "description": "Whether the navigation items are in loading state. Component waits for all the counters to finish loading to prevent multiple layout shifts."
         },
+        {
+          "name": "hideIconsBreakpoint",
+          "type": "'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | null",
+          "defaultValue": "'medium'",
+          "description": "Controls the container width below which icons are hidden to save space. To keep icons visible in a narrow container, use a smaller breakpoint such as `xsmall`, or set to `null` to always show icons."
+        },
         {
           "name": "variant",
           "type": "'inset' | 'flush'",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.36.0-rc.bd3520b7c",
+  "version": "38.36.0-rc.e29d259bd",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -166,7 +166,7 @@
     "react-is": "18.3.1",
     "recast": "0.23.7",
     "rimraf": "5.0.5",
-    "rolldown": "^1.2.0",
+    "rolldown": "^1.2.2",
     "rolldown-plugin-dts": "^0.26.0",
     "rolldown-plugin-import-css": "^0.0.0",
     "rolldown-plugin-preserve-directives": "^0.0.0",