@primer/react 38.32.1-rc.3a244cb73 → 38.32.1-rc.50746cb84

package/dist/ActionList/Group.js

@@ -1,6 +1,6 @@
 import { useId as useId$1 } from "../hooks/useId.js";
-import { invariant } from "../utils/invariant.js";
 import { useSlots } from "../hooks/useSlots.js";
+import { invariant } from "../utils/invariant.js";
 import { ListContext } from "./shared.js";
 import ActionList_module_css_default from "./ActionList.module.css.js";
 import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";

package/dist/ActionList/Item.js

@@ -1,11 +1,11 @@
 import { useId as useId$1 } from "../hooks/useId.js";
+import { useSlots } from "../hooks/useSlots.js";
 import { ConditionalWrapper } from "../internal/components/ConditionalWrapper.js";
 import { invariant } from "../utils/invariant.js";
 import { fixedForwardRef } from "../utils/modern-polymorphic.js";
 import VisuallyHidden from "../_VisuallyHidden.js";
 import { TooltipContext } from "../TooltipV2/TooltipContext.js";
 import { Tooltip } from "../TooltipV2/Tooltip.js";
-import { useSlots } from "../hooks/useSlots.js";
 import { ActionListContainerContext } from "./ActionListContainerContext.js";
 import { ItemContext, ListContext } from "./shared.js";
 import ActionList_module_css_default from "./ActionList.module.css.js";

package/dist/ActionList/List.js

@@ -1,8 +1,8 @@
 import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
 import useIsomorphicLayoutEffect from "../utils/useIsomorphicLayoutEffect.js";
 import { useId as useId$1 } from "../hooks/useId.js";
-import { fixedForwardRef } from "../utils/modern-polymorphic.js";
 import { useSlots } from "../hooks/useSlots.js";
+import { fixedForwardRef } from "../utils/modern-polymorphic.js";
 import { FocusKeys, useFocusZone } from "../hooks/useFocusZone.js";
 import { ActionListContainerContext } from "./ActionListContainerContext.js";
 import { ListContext } from "./shared.js";

package/dist/ActionMenu/ActionMenu.js

@@ -2,10 +2,10 @@ import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
 import { useProvidedStateOrCreate } from "../hooks/useProvidedStateOrCreate.js";
 import { useMenuKeyboardNavigation } from "../hooks/useMenuKeyboardNavigation.js";
 import { useId as useId$1 } from "../hooks/useId.js";
+import { isSlot } from "../utils/is-slot.js";
 import { Tooltip } from "../TooltipV2/Tooltip.js";
 import { ButtonComponent } from "../Button/Button.js";
 import { useResponsiveValue } from "../hooks/useResponsiveValue.js";
-import { isSlot } from "../utils/is-slot.js";
 import { DialogContext } from "../Dialog/DialogContext.js";
 import { ActionListContainerContext } from "../ActionList/ActionListContainerContext.js";
 import { Divider } from "../ActionList/Divider.js";

package/dist/AnchoredOverlay/AnchoredOverlay.js

@@ -122,7 +122,8 @@ const AnchoredOverlay = ({ renderAnchor, anchorRef: externalAnchorRef, anchorId:
 			else currentOverlay.style.removeProperty("position-try-fallbacks");
 			pendingPositionFrame = requestAnimationFrame(() => {
 				pendingPositionFrame = null;
-				const result = getDefaultPosition(anchorElement, currentOverlay, width ? parseInt(widthMap[width]) : parseInt(widthMap.small));
+				const fallbackWidth = width ? parseInt(widthMap[width]) : parseInt(widthMap.small);
+				const result = getDefaultPosition(anchorElement, currentOverlay, fallbackWidth);
 				currentOverlay.setAttribute("data-align", result.horizontal);
 				if (result.suggestedSide) currentOverlay.setAttribute("data-side", result.suggestedSide);
 				const offset = result.horizontal === "left" ? result.leftOffset : result.rightOffset;

package/dist/Autocomplete/AutocompleteMenu.js

@@ -193,10 +193,11 @@ function AutocompleteMenu(props) {
 		t12 = (current, _previous, directlyActivated) => {
 			activeDescendantRef.current = current || null;
 			if (current) {
-				setHighlightedItem(allItemsToRenderRef.current.find((item_1) => {
+				const selectedItem = allItemsToRenderRef.current.find((item_1) => {
 					var _current$closest;
 					return item_1.id === ((_current$closest = current.closest("li")) === null || _current$closest === void 0 ? void 0 : _current$closest.getAttribute("data-id"));
-				}));
+				});
+				setHighlightedItem(selectedItem);
 				setIsMenuDirectlyActivated(directlyActivated);
 			}
 			if (current && customScrollContainerRef && customScrollContainerRef.current && directlyActivated) scrollIntoView(current, customScrollContainerRef.current, menuScrollMargins);

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -250,7 +250,10 @@ function Breadcrumbs(t0) {
 			const measuredContainerWidth = containerElement.offsetWidth;
 			setContainerWidth((prev_0) => prev_0 === measuredContainerWidth ? prev_0 : measuredContainerWidth);
 			const listElement = containerElement.querySelector("ol");
-			if (listElement && listElement.children.length > 0 && listElement.children.length === childArray.length) setChildArrayWidths(Array.from(listElement.children).map(_temp3));
+			if (listElement && listElement.children.length > 0 && listElement.children.length === childArray.length) {
+				const widths = Array.from(listElement.children).map(_temp3);
+				setChildArrayWidths(widths);
+			}
 		};
 		$[3] = childArray.length;
 		$[4] = overflow;

package/dist/Dialog/Dialog.js

@@ -3,9 +3,9 @@ import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
 import { useOnEscapePress } from "../hooks/useOnEscapePress.js";
 import { useResizeObserver } from "../hooks/useResizeObserver.js";
 import { useId as useId$1 } from "../hooks/useId.js";
+import { useSlots } from "../hooks/useSlots.js";
 import { IconButton } from "../Button/IconButton.js";
 import { ButtonComponent } from "../Button/Button.js";
-import { useSlots } from "../hooks/useSlots.js";
 import { useFocusTrap } from "../hooks/useFocusTrap.js";
 import { useFocusZone } from "../hooks/useFocusZone.js";
 import Portal_default from "../Portal/index.js";

package/dist/FilteredActionList/useAnnouncements.js

@@ -31,20 +31,23 @@ const useAnnouncements = (items, listContainerRef, inputRef, enabled = true, loa
 	}, [enabled]);
 	useEffect(function announceInitialFocus() {
 		const focusHandler = () => {
-			if (usingRovingTabindex) announce$1(`${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`, {
-				delayMs,
-				from: liveRegion ? liveRegion : void 0
-			});
-			else window.requestAnimationFrame(() => {
+			if (usingRovingTabindex) {
+				const announcementText = `${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`;
+				announce$1(announcementText, {
+					delayMs,
+					from: liveRegion ? liveRegion : void 0
+				});
+			} else window.requestAnimationFrame(() => {
 				const activeItem = getItemWithActiveDescendant(listContainerRef, items);
 				if (!activeItem) return;
 				const { index, text, selected } = activeItem;
-				announce$1([
+				const announcementText = [
 					`Focus on filter text box and list of items`,
 					`Focused item: ${text}`,
 					`${selected ? "selected" : "not selected"}`,
 					`${index + 1} of ${items.length}`
-				].join(", "), {
+				].join(", ");
+				announce$1(announcementText, {
 					delayMs,
 					from: liveRegion ? liveRegion : void 0
 				});
@@ -70,20 +73,23 @@ const useAnnouncements = (items, listContainerRef, inputRef, enabled = true, loa
 			announce$1(`${message === null || message === void 0 ? void 0 : message.title}. ${message === null || message === void 0 ? void 0 : message.description}`, { delayMs });
 			return;
 		}
-		if (usingRovingTabindex) announce$1(`${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`, {
-			delayMs,
-			from: liveRegion ? liveRegion : void 0
-		});
-		else window.requestAnimationFrame(() => {
+		if (usingRovingTabindex) {
+			const announcementText = `${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`;
+			announce$1(announcementText, {
+				delayMs,
+				from: liveRegion ? liveRegion : void 0
+			});
+		} else window.requestAnimationFrame(() => {
 			const activeItem = getItemWithActiveDescendant(listContainerRef, items);
 			if (!activeItem) return;
 			const { index, text, selected } = activeItem;
-			announce$1([
+			const announcementText = [
 				`List updated`,
 				`Focused item: ${text}`,
 				`${selected ? "selected" : "not selected"}`,
 				`${index + 1} of ${items.length}`
-			].join(", "), {
+			].join(", ");
+			announce$1(announcementText, {
 				delayMs,
 				from: liveRegion ? liveRegion : void 0
 			});

package/dist/NavList/NavList.js

@@ -1,8 +1,8 @@
 import useIsomorphicLayoutEffect from "../utils/useIsomorphicLayoutEffect.js";
 import { useId as useId$1 } from "../hooks/useId.js";
+import { useSlots } from "../hooks/useSlots.js";
 import { fixedForwardRef } from "../utils/modern-polymorphic.js";
 import _VisuallyHidden_module_css_default from "../_VisuallyHidden.module.css.js";
-import { useSlots } from "../hooks/useSlots.js";
 import { ActionListContainerContext } from "../ActionList/ActionListContainerContext.js";
 import Heading$1 from "../Heading/Heading.js";
 import ActionList_module_css_default from "../ActionList/ActionList.module.css.js";

package/dist/PageHeader/PageHeader.js

@@ -1,7 +1,7 @@
 import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
 import { warning } from "../utils/warning.js";
-import { isResponsiveValue } from "../hooks/useResponsiveValue.js";
 import { isSlot } from "../utils/is-slot.js";
+import { isResponsiveValue } from "../hooks/useResponsiveValue.js";
 import { getResponsiveAttributes } from "../internal/utils/getResponsiveAttributes.js";
 import Heading from "../Heading/Heading.js";
 import Link from "../Link/Link.js";

package/dist/PageLayout/PageLayout.js

@@ -1,8 +1,8 @@
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { useId as useId$1 } from "../hooks/useId.js";
 import { warning } from "../utils/warning.js";
-import { isResponsiveValue } from "../hooks/useResponsiveValue.js";
 import { useSlots } from "../hooks/useSlots.js";
+import { isResponsiveValue } from "../hooks/useResponsiveValue.js";
 import { useOverflow } from "../hooks/useOverflow.js";
 import { getResponsiveAttributes } from "../internal/utils/getResponsiveAttributes.js";
 import PageLayout_module_css_default from "./PageLayout.module.css.js";

package/dist/TextInputWithTokens/TextInputWithTokens.js

@@ -12,8 +12,8 @@ import { c } from "react-compiler-runtime";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useRef, useState } from "react";
-import { FocusKeys } from "@primer/behaviors";
 import { isFocusable } from "@primer/behaviors/utils";
+import { FocusKeys } from "@primer/behaviors";
 import { isValidElementType } from "react-is";
 //#region src/TextInputWithTokens/TextInputWithTokens.tsx
 /**

package/dist/TooltipV2/Tooltip.js

@@ -184,12 +184,13 @@ const Tooltip = /*#__PURE__*/ React.forwardRef(({ direction = "s", text, type =
 				(_child$props$onFocus = (_child$props3 = child.props).onFocus) === null || _child$props$onFocus === void 0 || _child$props$onFocus.call(_child$props3, event);
 			},
 			onMouseOverCapture: (event) => {
+				const delayTime = delayTimeMap[delay] || 50;
 				openTimeoutRef.current = safeSetTimeout(() => {
 					var _child$props$onMouseE, _child$props4;
 					if (!openTimeoutRef.current) return;
 					openTooltip();
 					(_child$props$onMouseE = (_child$props4 = child.props).onMouseEnter) === null || _child$props$onMouseE === void 0 || _child$props$onMouseE.call(_child$props4, event);
-				}, delayTimeMap[delay] || 50);
+				}, delayTime);
 			},
 			onMouseLeave: (event) => {
 				var _child$props$onMouseL, _child$props5;

package/dist/TreeView/TreeView.js

@@ -1,4 +1,6 @@
 import { useId as useId$1 } from "../hooks/useId.js";
+import { isSlot } from "../utils/is-slot.js";
+import { useSlots } from "../hooks/useSlots.js";
 import Spinner from "../Spinner/Spinner.js";
 import { AriaStatus } from "../live-region/AriaStatus.js";
 import { fixedForwardRef } from "../utils/modern-polymorphic.js";
@@ -10,8 +12,6 @@ import useSafeTimeout from "../hooks/useSafeTimeout.js";
 import { Tooltip } from "../TooltipV2/Tooltip.js";
 import { IconButton } from "../Button/IconButton.js";
 import { ButtonComponent } from "../Button/Button.js";
-import { isSlot } from "../utils/is-slot.js";
-import { useSlots } from "../hooks/useSlots.js";
 import { Dialog } from "../Dialog/Dialog.js";
 import { ConfirmationDialog } from "../ConfirmationDialog/ConfirmationDialog.js";
 import { ActionList } from "../ActionList/index.js";
@@ -349,7 +349,10 @@ const SubTree = ({ count, state, children, "aria-label": ariaLabel }) => {
 				});
 				setLoadingFocused(false);
 			}
-		} else if (state === "loading") announceUpdate(`${getAccessibleName(parentElement)} content loading`);
+		} else if (state === "loading") {
+			const parentName = getAccessibleName(parentElement);
+			announceUpdate(`${parentName} content loading`);
+		}
 	}, [
 		loadingFocused,
 		previousState,

package/dist/experimental/SelectPanel2/SelectPanel.js

@@ -1,14 +1,14 @@
 import { useProvidedRefOrCreate } from "../../hooks/useProvidedRefOrCreate.js";
 import { useAnchoredPosition } from "../../hooks/useAnchoredPosition.js";
 import { useId as useId$1 } from "../../hooks/useId.js";
+import { isSlot } from "../../utils/is-slot.js";
+import { useSlots } from "../../hooks/useSlots.js";
 import Spinner from "../../Spinner/Spinner.js";
 import { AriaStatus } from "../../live-region/AriaStatus.js";
 import { invariant } from "../../utils/invariant.js";
 import { IconButton } from "../../Button/IconButton.js";
 import { ButtonComponent } from "../../Button/Button.js";
 import { useResponsiveValue } from "../../hooks/useResponsiveValue.js";
-import { isSlot } from "../../utils/is-slot.js";
-import { useSlots } from "../../hooks/useSlots.js";
 import { ActionListContainerContext } from "../../ActionList/ActionListContainerContext.js";
 import Heading from "../../Heading/Heading.js";
 import Link from "../../Link/Link.js";

package/dist/experimental/UnderlinePanels/UnderlinePanels.js

@@ -1,8 +1,8 @@
 import useIsomorphicLayoutEffect from "../../utils/useIsomorphicLayoutEffect.js";
 import { useResizeObserver } from "../../hooks/useResizeObserver.js";
 import { useId as useId$1 } from "../../hooks/useId.js";
-import { invariant } from "../../utils/invariant.js";
 import { isSlot } from "../../utils/is-slot.js";
+import { invariant } from "../../utils/invariant.js";
 import { createComponent } from "../../utils/create-component.js";
 import { UnderlineItem, UnderlineItemList, UnderlineWrapper } from "../../internal/components/UnderlineTabbedInterface.js";
 import UnderlinePanels_module_css_default from "./UnderlinePanels.module.css.js";

package/dist/experimental/index.js

@@ -1,4 +1,5 @@
 "use client";
+import { useSlots } from "../hooks/useSlots.js";
 import { Announce } from "../live-region/Announce.js";
 import { AriaAlert } from "../live-region/AriaAlert.js";
 import { AriaStatus } from "../live-region/AriaStatus.js";
@@ -6,7 +7,6 @@ import { ButtonBase } from "../Button/ButtonBase.js";
 import { KeybindingHint } from "../KeybindingHint/KeybindingHint.js";
 import { getAccessibleKeybindingHintString } from "../KeybindingHint/utils.js";
 import { Tooltip } from "../TooltipV2/Tooltip.js";
-import { useSlots } from "../hooks/useSlots.js";
 import { useOverflow } from "../hooks/useOverflow.js";
 import { ScrollableRegion } from "../ScrollableRegion/ScrollableRegion.js";
 import { Dialog } from "../Dialog/Dialog.js";

package/dist/hooks/useDialog.js

@@ -91,7 +91,8 @@ function useDialog(t0) {
 	let t8;
 	if ($[15] !== getFocusableItem) {
 		t8 = (e_1) => {
-			const focusableItem_0 = getFocusableItem(e_1, e_1.shiftKey ? -1 : 1);
+			const movement_0 = e_1.shiftKey ? -1 : 1;
+			const focusableItem_0 = getFocusableItem(e_1, movement_0);
 			if (!focusableItem_0) return;
 			focusableItem_0.focus();
 		};

package/dist/hooks/useScrollFlash.js

@@ -15,7 +15,8 @@ function useScrollFlash(scrollContainerRef) {
 			if (!scrollContainer) return;
 			const id = requestAnimationFrame(() => {
 				const currentScroll = scrollContainer.scrollTop;
-				scrollContainer.scrollTop = currentScroll < 1 ? currentScroll + 1 : currentScroll - 1;
+				const altScroll = currentScroll < 1 ? currentScroll + 1 : currentScroll - 1;
+				scrollContainer.scrollTop = altScroll;
 				scrollContainer.scrollTop = currentScroll;
 			});
 			return () => cancelAnimationFrame(id);

package/dist/index.js

@@ -9,12 +9,15 @@ import { VisuallyHidden } from "./VisuallyHidden/VisuallyHidden.js";
 import { useOnOutsideClick } from "./hooks/useOnOutsideClick.js";
 import { useProvidedRefOrCreate } from "./hooks/useProvidedRefOrCreate.js";
 import { useOnEscapePress } from "./hooks/useOnEscapePress.js";
+import { useOpenAndCloseFocus } from "./hooks/useOpenAndCloseFocus.js";
 import useIsomorphicLayoutEffect from "./utils/useIsomorphicLayoutEffect.js";
 import { useResizeObserver } from "./hooks/useResizeObserver.js";
 import { useAnchoredPosition } from "./hooks/useAnchoredPosition.js";
-import { useOpenAndCloseFocus } from "./hooks/useOpenAndCloseFocus.js";
 import { useOverlay } from "./hooks/useOverlay.js";
+import { useRefObjectAsForwardedRef } from "./hooks/useRefObjectAsForwardedRef.js";
 import { useId } from "./hooks/useId.js";
+import { isSlot } from "./utils/is-slot.js";
+import { useSlots } from "./hooks/useSlots.js";
 import Spinner from "./Spinner/Spinner.js";
 import CounterLabel from "./CounterLabel/CounterLabel.js";
 import { ButtonBase } from "./Button/ButtonBase.js";
@@ -25,8 +28,6 @@ import { IconButton } from "./Button/IconButton.js";
 import { LinkButton } from "./Button/LinkButton.js";
 import { ButtonComponent } from "./Button/Button.js";
 import { useResponsiveValue } from "./hooks/useResponsiveValue.js";
-import { isSlot } from "./utils/is-slot.js";
-import { useSlots } from "./hooks/useSlots.js";
 import { PageLayout } from "./PageLayout/PageLayout.js";
 import { SplitPageLayout } from "./SplitPageLayout/SplitPageLayout.js";
 import useDetails from "./hooks/useDetails.js";
@@ -38,7 +39,6 @@ import Portal_default from "./Portal/index.js";
 import { Dialog } from "./Dialog/Dialog.js";
 import { ConfirmationDialog } from "./ConfirmationDialog/ConfirmationDialog.js";
 import { useConfirm } from "./ConfirmationDialog/useConfirm.js";
-import { useRefObjectAsForwardedRef } from "./hooks/useRefObjectAsForwardedRef.js";
 import { createComponent } from "./utils/create-component.js";
 import { asSlot } from "./utils/as-slot.js";
 import Radio from "./Radio/Radio.js";

package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.js

@@ -1,6 +1,6 @@
 import { useId as useId$1 } from "../../../hooks/useId.js";
-import VisuallyHidden from "../../../_VisuallyHidden.js";
 import { useSlots } from "../../../hooks/useSlots.js";
+import VisuallyHidden from "../../../_VisuallyHidden.js";
 import ValidationAnimationContainer from "../ValidationAnimationContainer.js";
 import CheckboxOrRadioGroupContext from "./CheckboxOrRadioGroupContext.js";
 import CheckboxOrRadioGroup_module_css_default from "./CheckboxOrRadioGroup.module.css.js";

package/dist/utils/warning.js

@@ -5,9 +5,10 @@ const warn = function warn(message) {
 const warning = function warning(condition, format, ...args) {
 	if (condition) {
 		let index = 0;
-		warn(format.replace(/%s/g, () => {
+		const message = format.replace(/%s/g, () => {
 			return args[index++];
-		}));
+		});
+		warn(message);
 	}
 };
 //#endregion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.32.1-rc.3a244cb73",
+  "version": "38.32.1-rc.50746cb84",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -169,7 +169,7 @@
     "react-is": "18.3.1",
     "recast": "0.23.7",
     "rimraf": "5.0.5",
-    "rolldown": "^1.1.2",
+    "rolldown": "^1.1.4",
     "rolldown-plugin-dts": "^0.26.0",
     "rolldown-plugin-import-css": "^0.0.0",
     "rolldown-plugin-preserve-directives": "^0.0.0",