@primer/react 38.34.0-rc.56d4e88fd → 38.34.0-rc.56e4390f1

package/dist/experimental/UnderlinePanels/UnderlinePanels.js

@@ -3,15 +3,16 @@ import { useResizeObserver } from "../../hooks/useResizeObserver.js";
 import { useId as useId$1 } from "../../hooks/useId.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";
+import { useTab } from "../Tabs/useTab.js";
+import { useTabList } from "../Tabs/useTabList.js";
+import { useTabPanel } from "../Tabs/useTabPanel.js";
+import { Tabs } from "../Tabs/Tabs.js";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { Children, cloneElement, createContext, isValidElement, useContext, useMemo, useRef, useState } from "react";
-import { TabContainerElement } from "@github/tab-container-element";
 //#region src/experimental/UnderlinePanels/UnderlinePanels.tsx
-const TabContainerComponent = createComponent(TabContainerElement, "tab-container");
 const UnderlinePanelsContext = /*#__PURE__*/ createContext({
 	iconsVisible: true,
 	loadingCounters: void 0
@@ -21,27 +22,43 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
 	const wrapperRef = useRef(null);
 	const listRef = useRef(null);
 	const parentId = useId$1(props.id);
-	const [tabs, tabPanels, tabsHaveIcons] = useMemo(() => {
+	const [tabs, tabPanels, tabsHaveIcons, selectedFromProps] = useMemo(() => {
 		let tabIndex = 0;
 		let panelIndex = 0;
 		const childrenWithProps = Children.map(children, (child) => {
-			if (/*#__PURE__*/ isValidElement(child) && (child.type === Tab || isSlot(child, Tab))) return /*#__PURE__*/ cloneElement(child, { id: `${parentId}-tab-${tabIndex++}` });
-			if (/*#__PURE__*/ isValidElement(child) && (child.type === Panel || isSlot(child, Panel))) return /*#__PURE__*/ cloneElement(child, { "aria-labelledby": `${parentId}-tab-${panelIndex++}` });
+			if (/*#__PURE__*/ isValidElement(child) && (child.type === Tab || isSlot(child, Tab))) return /*#__PURE__*/ cloneElement(child, { value: `${tabIndex++}` });
+			if (/*#__PURE__*/ isValidElement(child) && (child.type === Panel || isSlot(child, Panel))) return /*#__PURE__*/ cloneElement(child, { value: `${panelIndex++}` });
 			return child;
 		});
 		const tabs = [];
 		const tabPanels = [];
+		let selectedFromProps;
 		for (const child of Children.toArray(childrenWithProps)) {
 			if (!/*#__PURE__*/ isValidElement(child)) continue;
-			if (child.type === Tab || isSlot(child, Tab)) tabs.push(child);
-			else if (child.type === Panel || isSlot(child, Panel)) tabPanels.push(child);
+			if (child.type === Tab || isSlot(child, Tab)) {
+				const ariaSelected = child.props["aria-selected"];
+				if (ariaSelected === true || ariaSelected === "true") selectedFromProps = `${tabs.length}`;
+				tabs.push(child);
+			} else if (child.type === Panel || isSlot(child, Panel)) tabPanels.push(child);
 		}
 		return [
 			tabs,
 			tabPanels,
-			tabs.some((tab) => /*#__PURE__*/ React.isValidElement(tab) && tab.props.icon)
+			tabs.some((tab) => /*#__PURE__*/ React.isValidElement(tab) && tab.props.icon),
+			selectedFromProps
 		];
-	}, [children, parentId]);
+	}, [children]);
+	const [selectedValue, setSelectedValue] = useState(() => selectedFromProps !== null && selectedFromProps !== void 0 ? selectedFromProps : "0");
+	const [prevSelectedFromProps, setPrevSelectedFromProps] = useState(selectedFromProps);
+	if (selectedFromProps !== prevSelectedFromProps) {
+		setPrevSelectedFromProps(selectedFromProps);
+		if (selectedFromProps !== void 0 && selectedFromProps !== selectedValue) setSelectedValue(selectedFromProps);
+	}
+	const { tabListProps } = useTabList({
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		ref: listRef
+	});
 	const contextValue = useMemo(() => ({
 		iconsVisible,
 		loadingCounters
@@ -68,55 +85,65 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
 	!(tabs.length === tabPanels.length) && invariant(false, `The number of tabs and panels must be equal. Counted ${tabs.length} tabs and ${tabPanels.length} panels.`);
 	return /*#__PURE__*/ jsx(UnderlinePanelsContext.Provider, {
 		value: contextValue,
-		children: /*#__PURE__*/ jsxs(TabContainerComponent, { children: [/*#__PURE__*/ jsx(UnderlineWrapper, {
-			ref: wrapperRef,
-			slot: "tablist-wrapper",
-			"data-icons-visible": iconsVisible,
-			className: clsx(className, UnderlinePanels_module_css_default.StyledUnderlineWrapper),
-			...props,
-			children: /*#__PURE__*/ jsx(UnderlineItemList, {
-				ref: listRef,
-				"aria-label": ariaLabel,
-				"aria-labelledby": ariaLabelledBy,
-				role: "tablist",
-				children: tabs
-			})
-		}), tabPanels] })
+		children: /*#__PURE__*/ jsxs(Tabs, {
+			id: parentId,
+			value: selectedValue,
+			onValueChange: ({ value }) => setSelectedValue(value),
+			children: [/*#__PURE__*/ jsx(UnderlineWrapper, {
+				ref: wrapperRef,
+				"data-icons-visible": iconsVisible,
+				className: clsx(className, UnderlinePanels_module_css_default.StyledUnderlineWrapper),
+				...props,
+				children: /*#__PURE__*/ jsx(UnderlineItemList, {
+					ref: listRef,
+					role: tabListProps.role,
+					"aria-label": tabListProps["aria-label"],
+					"aria-labelledby": tabListProps["aria-labelledby"],
+					"aria-orientation": tabListProps["aria-orientation"],
+					onKeyDown: tabListProps.onKeyDown,
+					children: tabs
+				})
+			}), tabPanels]
+		})
 	});
 };
 UnderlinePanels.displayName = "UnderlinePanels";
-const TabImpl = ({ "aria-selected": ariaSelected, onSelect, ...props }) => {
+const TabImpl = ({ onSelect, value, ...itemProps }) => {
 	const { loadingCounters } = useContext(UnderlinePanelsContext);
-	const clickHandler = React.useCallback((event) => {
-		if (!event.defaultPrevented && typeof onSelect === "function") onSelect(event);
-	}, [onSelect]);
-	const keyDownHandler = React.useCallback((event) => {
-		if ((event.key === " " || event.key === "Enter") && !event.defaultPrevented && typeof onSelect === "function") onSelect(event);
-	}, [onSelect]);
+	const { tabProps } = useTab({ value: value !== null && value !== void 0 ? value : "" });
+	const { onKeyDown: tabOnKeyDown, onMouseDown: tabOnMouseDown, onFocus: tabOnFocus, ...restTabProps } = tabProps;
 	return /*#__PURE__*/ jsx(UnderlineItem, {
 		as: "button",
-		role: "tab",
-		tabIndex: ariaSelected ? 0 : -1,
-		"aria-selected": ariaSelected,
+		...itemProps,
+		...restTabProps,
 		type: "button",
-		onClick: clickHandler,
-		onKeyDown: keyDownHandler,
-		loadingCounters,
-		...props
+		onClick: (event) => {
+			if (!event.defaultPrevented && typeof onSelect === "function") onSelect(event);
+		},
+		onKeyDown: (event) => {
+			tabOnKeyDown === null || tabOnKeyDown === void 0 || tabOnKeyDown(event);
+			if ((event.key === " " || event.key === "Enter") && !event.defaultPrevented && typeof onSelect === "function") onSelect(event);
+		},
+		onMouseDown: tabOnMouseDown,
+		onFocus: tabOnFocus,
+		loadingCounters
 	});
 };
 TabImpl.displayName = "TabImpl";
 TabImpl.displayName = "UnderlinePanels.Tab";
 const Tab = /*#__PURE__*/ React.memo(TabImpl);
 Tab.displayName = "UnderlinePanels.Tab";
-const Panel = ({ children, ...rest }) => {
+const PanelImpl = ({ children, value, ...panelRest }) => {
+	const { tabPanelProps } = useTabPanel({ value: value !== null && value !== void 0 ? value : "" });
 	return /*#__PURE__*/ jsx("div", {
-		role: "tabpanel",
-		...rest,
+		...panelRest,
+		...tabPanelProps,
 		children
 	});
 };
-Panel.displayName = "Panel";
+PanelImpl.displayName = "PanelImpl";
+PanelImpl.displayName = "UnderlinePanels.Panel";
+const Panel = PanelImpl;
 Panel.displayName = "UnderlinePanels.Panel";
 var UnderlinePanels_default = Object.assign(UnderlinePanels, {
 	Panel,

package/dist/experimental/index.js

@@ -4,15 +4,15 @@ import { Announce } from "../live-region/Announce.js";
 import { AriaAlert } from "../live-region/AriaAlert.js";
 import { AriaStatus } from "../live-region/AriaStatus.js";
 import { ButtonBase } from "../Button/ButtonBase.js";
+import { DefaultFeatureFlags } from "../FeatureFlags/DefaultFeatureFlags.js";
+import { FeatureFlags } from "../FeatureFlags/FeatureFlags.js";
+import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
 import { KeybindingHint } from "../KeybindingHint/KeybindingHint.js";
 import { getAccessibleKeybindingHintString } from "../KeybindingHint/utils.js";
 import { Tooltip } from "../TooltipV2/Tooltip.js";
 import { useOverflow } from "../hooks/useOverflow.js";
 import { ScrollableRegion } from "../ScrollableRegion/ScrollableRegion.js";
 import { Dialog } from "../Dialog/Dialog.js";
-import { DefaultFeatureFlags } from "../FeatureFlags/DefaultFeatureFlags.js";
-import { FeatureFlags } from "../FeatureFlags/FeatureFlags.js";
-import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
 import { Stack } from "../Stack/index.js";
 import { SkeletonBox } from "../Skeleton/SkeletonBox.js";
 import { FilteredActionListLoadingTypes } from "../FilteredActionList/constants.js";
@@ -30,12 +30,12 @@ import { Table } from "../DataTable/index.js";
 import { InlineMessage } from "../InlineMessage/InlineMessage.js";
 import { Hidden } from "../Hidden/Hidden.js";
 import { SelectPanel } from "./SelectPanel2/SelectPanel.js";
-import UnderlinePanels_default from "./UnderlinePanels/UnderlinePanels.js";
-import { IssueLabel } from "./IssueLabel/IssueLabel.js";
 import { useTab } from "./Tabs/useTab.js";
 import { useTabList } from "./Tabs/useTabList.js";
 import { useTabPanel } from "./Tabs/useTabPanel.js";
 import { Tabs } from "./Tabs/Tabs.js";
+import UnderlinePanels_default from "./UnderlinePanels/UnderlinePanels.js";
+import { IssueLabel } from "./IssueLabel/IssueLabel.js";
 import { TopicTag } from "../TopicTag/index.js";
 //#region src/experimental/index.ts
 /**

package/dist/hooks/useMergedRefs.d.ts

@@ -17,18 +17,18 @@ import { ForwardedRef, Ref } from "react";
  * // React 18
  * const Example = forwardRef<HTMLButtonElement, {}>((props, forwardedRef) => {
  *  const ref = useRef<HTMLButtonElement>(null)
- *  const combinedRef = useMergedRefs(forwardedRef, ref)
+ *  const mergedRef = useMergedRefs(forwardedRef, ref)
  *
- *  return <button ref={combinedRef} />
+ *  return <button ref={mergedRef} />
  * })
  *
  * @example
  * // React 19
  * const Example = ({ref: externalRef}: {ref?: Ref<HTMLButtonElement>}) => {
  *  const ref = useRef<HTMLButtonElement>(null)
- *  const combinedRef = useMergedRefs(externalRef, ref)
+ *  const mergedRef = useMergedRefs(externalRef, ref)
  *
- *  return <button ref={combinedRef} />
+ *  return <button ref={mergedRef} />
  * }
  */
 declare function useMergedRefs<T>(refA: Ref$1<T | null>, refB: Ref$1<T | null>): (value: T | null) => (() => void) | undefined;

package/dist/hooks/useMergedRefs.js

@@ -1,7 +1,9 @@
 import { isExperimentalReactVersion, reactMajorVersion } from "../utils/environment.js";
 import { c } from "react-compiler-runtime";
-import "react";
+import { version } from "react";
 //#region src/hooks/useMergedRefs.ts
+var _version$split$;
+const majorReactVersion = parseInt((_version$split$ = version.split(".")[0]) !== null && _version$split$ !== void 0 ? _version$split$ : "18", 10);
 /**
 * 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
@@ -26,18 +28,18 @@ const supportsRefCleanup = reactMajorVersion >= 19 || isExperimentalReactVersion
 * // React 18
 * const Example = forwardRef<HTMLButtonElement, {}>((props, forwardedRef) => {
 *  const ref = useRef<HTMLButtonElement>(null)
-*  const combinedRef = useMergedRefs(forwardedRef, ref)
+*  const mergedRef = useMergedRefs(forwardedRef, ref)
 *
-*  return <button ref={combinedRef} />
+*  return <button ref={mergedRef} />
 * })
 *
 * @example
 * // React 19
 * const Example = ({ref: externalRef}: {ref?: Ref<HTMLButtonElement>}) => {
 *  const ref = useRef<HTMLButtonElement>(null)
-*  const combinedRef = useMergedRefs(externalRef, ref)
+*  const mergedRef = useMergedRefs(externalRef, ref)
 *
-*  return <button ref={combinedRef} />
+*  return <button ref={mergedRef} />
 * }
 */
 function useMergedRefs(refA, refB) {
@@ -48,6 +50,7 @@ function useMergedRefs(refA, refB) {
 			const cleanupA = setRef(refA, value);
 			const cleanupB = setRef(refB, value);
 			if (!supportsRefCleanup) return;
+			if (majorReactVersion <= 18) return;
 			return () => {
 				if (cleanupA) cleanupA();
 				else setRef(refA, null);

package/dist/hooks/useProvidedRefOrCreate.d.ts

@@ -9,17 +9,14 @@ import React from "react";
  * @param providedRef The ref to use - if undefined, will use the ref from a call to React.useRef
  * @type TRef The type of the RefObject which should be created.
  *
- * @deprecated This hook is incompatible with forwarded callback refs. Prefer `useMergedRefs` with an internally
- * created ref instead.
+ * @note This hook is overly restrictive in that it forces the provided ref to be a ref object rather than a callback.
+ * In particular, it should **not** be used to merge internal refs with forwarded refs. For this, use
+ * {@linkcode useMergedRefs} instead.
  *
- * ```diff
- * - const ref = useProvidedRefOrCreate(forwardedRef as RefObject<...>)
- * + const ref = useRef(null)
- * + const mergedRef = useMergedRefs(forwardedRef, ref)
- *
- * - return <div ref={ref} />
- * + return <div ref={mergedRef} />
- * ```
+ * The primary valid use case for this hook is for when the consumer is using the provided ref to point to an external
+ * element, like an externally rendered anchor. This is 'backwards' from forwarded refs with respect to data flow; the
+ * consumer is passing a reference to an external element, rather than passing a handle to obtain a reference to an
+ * internal element.
  */
 declare function useProvidedRefOrCreate<TRef>(providedRef?: React.RefObject<TRef | null>): React.RefObject<TRef | null>;
 //#endregion

package/dist/hooks/useProvidedRefOrCreate.js

@@ -8,17 +8,14 @@ import React from "react";
 * @param providedRef The ref to use - if undefined, will use the ref from a call to React.useRef
 * @type TRef The type of the RefObject which should be created.
 *
-* @deprecated This hook is incompatible with forwarded callback refs. Prefer `useMergedRefs` with an internally
-* created ref instead.
+* @note This hook is overly restrictive in that it forces the provided ref to be a ref object rather than a callback.
+* In particular, it should **not** be used to merge internal refs with forwarded refs. For this, use
+* {@linkcode useMergedRefs} instead.
 *
-* ```diff
-* - const ref = useProvidedRefOrCreate(forwardedRef as RefObject<...>)
-* + const ref = useRef(null)
-* + const mergedRef = useMergedRefs(forwardedRef, ref)
-*
-* - return <div ref={ref} />
-* + return <div ref={mergedRef} />
-* ```
+* The primary valid use case for this hook is for when the consumer is using the provided ref to point to an external
+* element, like an externally rendered anchor. This is 'backwards' from forwarded refs with respect to data flow; the
+* consumer is passing a reference to an external element, rather than passing a handle to obtain a reference to an
+* internal element.
 */
 function useProvidedRefOrCreate(providedRef) {
 	const createdRef = React.useRef(null);

package/generated/components.json

@@ -2656,11 +2656,18 @@
       ],
       "importPath": "@primer/react",
       "props": [
+        {
+          "name": "variant",
+          "type": "'primary' | 'secondary'",
+          "defaultValue": "",
+          "description": "Pass in 'primary' for a darker background and inverse text, or 'secondary' for a lighter background and primary text. Omitting the variant prop renders the default counter scheme"
+        },
         {
           "name": "scheme",
           "type": "'primary' | 'secondary'",
           "defaultValue": "",
-          "description": "Pass in 'primary' for a darker background and inverse text, or 'secondary' for a lighter background and primary text. Omitting the scheme prop renders the default counter scheme"
+          "description": "Use `variant` instead.",
+          "deprecated": true
         },
         {
           "name": "className",
@@ -5060,7 +5067,7 @@
         },
         {
           "id": "components-pagelayout-features--pull-request-page",
-          "code": "() => (\n  <PageLayout>\n    <PageLayout.Header>\n      <div className={classes.HeaderStack}>\n        <div>\n          <Heading as=\"h1\" className={classes.TitleHeading}>\n            Input validation styles{' '}\n            <Text className={classes.TitleSubdued}>#1831</Text>\n          </Heading>\n          <div className={classes.StatusRow}>\n            <StateLabel status=\"pullOpened\">Open</StateLabel>\n            <Text className={classes.StatusMeta}>\n              <Link href=\"#\" muted className={classes.BoldMetaLink}>\n                mperrotti\n              </Link>{' '}\n              wants to merge 3 commits into{' '}\n              <BranchName href=\"#\">main</BranchName> from{' '}\n              <BranchName href=\"#\">mp/validation-styles</BranchName>\n            </Text>\n          </div>\n        </div>\n        <TabNav>\n          <TabNav.Link href=\"#\" selected>\n            Conversation\n          </TabNav.Link>\n          <TabNav.Link href=\"#\">Commits</TabNav.Link>\n          <TabNav.Link href=\"#\">Checks</TabNav.Link>\n          <TabNav.Link href=\"#\">Files changed</TabNav.Link>\n        </TabNav>\n      </div>\n    </PageLayout.Header>\n    <PageLayout.Content>\n      <div className={classes.ContentBox}></div>\n      <div className={classes.ScrollBox} tabIndex={0}>\n        This box has really long content. If it is too long, it will cause x\n        overflow and should show a scrollbar. When this overflows, it should not\n        break to overall page layout!\n      </div>\n    </PageLayout.Content>\n    <PageLayout.Pane aria-label=\"Side pane\">\n      <div className={classes.PaneStack}>\n        <div>\n          <Text className={classes.PaneSectionHeading}>Assignees</Text>\n          <Text className={classes.PaneMetaText}>\n            No one –{' '}\n            <Link href=\"#\" muted>\n              assign yourself\n            </Link>\n          </Text>\n        </div>\n        <div role=\"separator\" className={classes.PaneSeparator}></div>\n        <div>\n          <Text className={classes.PaneSectionHeading}>Labels</Text>\n          <Text className={classes.PaneMetaText}>None yet</Text>\n        </div>\n      </div>\n    </PageLayout.Pane>\n  </PageLayout>\n)"
+          "code": "() => (\n  <PageLayout>\n    <PageLayout.Header>\n      <div className={classes.HeaderStack}>\n        <div>\n          <Heading as=\"h1\" className={classes.TitleHeading}>\n            Input validation styles{' '}\n            <Text className={classes.TitleSubdued}>#1831</Text>\n          </Heading>\n          <div className={classes.StatusRow}>\n            <StateLabel status=\"pullOpened\">Open</StateLabel>\n            <Text className={classes.StatusMeta}>\n              <Link href=\"#\" muted className={classes.BoldMetaLink}>\n                mperrotti\n              </Link>{' '}\n              wants to merge 3 commits into{' '}\n              <BranchName href=\"#\">main</BranchName> from{' '}\n              <BranchName href=\"#\">mp/validation-styles</BranchName>\n            </Text>\n          </div>\n        </div>\n        <TabNav>\n          <TabNav.Link href=\"#\" selected>\n            Conversation\n          </TabNav.Link>\n          <TabNav.Link href=\"#\">Commits</TabNav.Link>\n          <TabNav.Link href=\"#\">Checks</TabNav.Link>\n          <TabNav.Link href=\"#\">Files changed</TabNav.Link>\n        </TabNav>\n      </div>\n    </PageLayout.Header>\n    <PageLayout.Content>\n      <div className={classes.ContentBox}></div>\n      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n      <div className={classes.ScrollBox} tabIndex={0}>\n        This box has really long content. If it is too long, it will cause x\n        overflow and should show a scrollbar. When this overflows, it should not\n        break to overall page layout!\n      </div>\n    </PageLayout.Content>\n    <PageLayout.Pane aria-label=\"Side pane\">\n      <div className={classes.PaneStack}>\n        <div>\n          <Text className={classes.PaneSectionHeading}>Assignees</Text>\n          <Text className={classes.PaneMetaText}>\n            No one –{' '}\n            <Link href=\"#\" muted>\n              assign yourself\n            </Link>\n          </Text>\n        </div>\n        <div role=\"separator\" className={classes.PaneSeparator}></div>\n        <div>\n          <Text className={classes.PaneSectionHeading}>Labels</Text>\n          <Text className={classes.PaneMetaText}>None yet</Text>\n        </div>\n      </div>\n    </PageLayout.Pane>\n  </PageLayout>\n)"
         },
         {
           "id": "components-pagelayout-features--sticky-pane",
@@ -5068,7 +5075,7 @@
         },
         {
           "id": "components-pagelayout-features--nested-scroll-container",
-          "code": "(args) => (\n  <div className={classes.NestedScrollContainer}>\n    <Placeholder label=\"Above scroll container\" height={120} />\n    <div className={classes.OverflowAuto}>\n      <PageLayout\n        rowGap=\"none\"\n        columnGap=\"none\"\n        padding=\"none\"\n        containerWidth=\"full\"\n      >\n        <PageLayout.Header padding=\"normal\" divider=\"line\">\n          <Placeholder label=\"Header\" height={64} />\n        </PageLayout.Header>\n        <PageLayout.Content padding=\"normal\" width=\"large\">\n          <div\n            className={classes.ContentGrid}\n            tabIndex={0}\n            role=\"region\"\n            aria-label=\"Page content\"\n          >\n            {Array.from({\n              length: args.numParagraphsInContent,\n            }).map((_, i) => (\n              <p key={i} className={classes.Paragraph}>\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n                enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n                ante quam, at varius lorem molestie vel. Sed at eros consequat,\n                varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n                commodo. Phasellus at imperdiet risus. Donec sit amet massa\n                purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus\n                felis. Ut porttitor auctor tellus in imperdiet. Ut blandit\n                tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum\n                auctor euismod nisi. Nullam tincidunt est in mi tincidunt\n                dictum. Sed consectetur aliquet velit ut ornare.\n              </p>\n            ))}\n          </div>\n        </PageLayout.Content>\n        <PageLayout.Pane\n          position=\"start\"\n          padding=\"normal\"\n          divider=\"line\"\n          sticky\n          aria-label=\"Side pane\"\n        >\n          <div className={classes.ContentGrid}>\n            {Array.from({\n              length: args.numParagraphsInPane,\n            }).map((_, i) => (\n              <p key={i} className={classes.Paragraph}>\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n                enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n                ante quam, at varius lorem molestie vel. Sed at eros consequat,\n                varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n                commodo. Phasellus at imperdiet risus. Donec sit amet massa\n                purus.\n              </p>\n            ))}\n          </div>\n        </PageLayout.Pane>\n        <PageLayout.Footer padding=\"normal\" divider=\"line\">\n          <Placeholder label=\"Footer\" height={64} />\n        </PageLayout.Footer>\n      </PageLayout>\n    </div>\n    <Placeholder label=\"Below scroll container\" height={120} />\n  </div>\n)"
+          "code": "(args) => (\n  <div className={classes.NestedScrollContainer}>\n    <Placeholder label=\"Above scroll container\" height={120} />\n    <div className={classes.OverflowAuto}>\n      <PageLayout\n        rowGap=\"none\"\n        columnGap=\"none\"\n        padding=\"none\"\n        containerWidth=\"full\"\n      >\n        <PageLayout.Header padding=\"normal\" divider=\"line\">\n          <Placeholder label=\"Header\" height={64} />\n        </PageLayout.Header>\n        <PageLayout.Content padding=\"normal\" width=\"large\">\n          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n          <div\n            className={classes.ContentGrid}\n            tabIndex={0}\n            role=\"region\"\n            aria-label=\"Page content\"\n          >\n            {Array.from({\n              length: args.numParagraphsInContent,\n            }).map((_, i) => (\n              <p key={i} className={classes.Paragraph}>\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n                enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n                ante quam, at varius lorem molestie vel. Sed at eros consequat,\n                varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n                commodo. Phasellus at imperdiet risus. Donec sit amet massa\n                purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus\n                felis. Ut porttitor auctor tellus in imperdiet. Ut blandit\n                tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum\n                auctor euismod nisi. Nullam tincidunt est in mi tincidunt\n                dictum. Sed consectetur aliquet velit ut ornare.\n              </p>\n            ))}\n          </div>\n        </PageLayout.Content>\n        <PageLayout.Pane\n          position=\"start\"\n          padding=\"normal\"\n          divider=\"line\"\n          sticky\n          aria-label=\"Side pane\"\n        >\n          <div className={classes.ContentGrid}>\n            {Array.from({\n              length: args.numParagraphsInPane,\n            }).map((_, i) => (\n              <p key={i} className={classes.Paragraph}>\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n                enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n                ante quam, at varius lorem molestie vel. Sed at eros consequat,\n                varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n                commodo. Phasellus at imperdiet risus. Donec sit amet massa\n                purus.\n              </p>\n            ))}\n          </div>\n        </PageLayout.Pane>\n        <PageLayout.Footer padding=\"normal\" divider=\"line\">\n          <Placeholder label=\"Footer\" height={64} />\n        </PageLayout.Footer>\n      </PageLayout>\n    </div>\n    <Placeholder label=\"Below scroll container\" height={120} />\n  </div>\n)"
         },
         {
           "id": "components-pagelayout-features--custom-sticky-header",
@@ -5080,7 +5087,7 @@
         },
         {
           "id": "components-pagelayout-features--scroll-container-within-page-layout-pane",
-          "code": "() => (\n  <div className={classes.NestedScrollContainer}>\n    <div className={classes.OverflowAuto}>\n      <Placeholder label=\"Above inner scroll container\" height={120} />\n      <PageLayout\n        rowGap=\"none\"\n        columnGap=\"none\"\n        padding=\"none\"\n        containerWidth=\"full\"\n      >\n        <PageLayout.Pane\n          position=\"start\"\n          padding=\"normal\"\n          divider=\"line\"\n          sticky\n          aria-label=\"Sticky pane\"\n        >\n          <div className={classes.OverflowAuto}>\n            <PageLayout.Pane padding=\"normal\" aria-label=\"Side pane\">\n              <Placeholder label=\"Inner scroll container\" height={800} />\n            </PageLayout.Pane>\n          </div>\n        </PageLayout.Pane>\n        <PageLayout.Content padding=\"normal\" width=\"large\">\n          <div\n            className={classes.ContentGrid}\n            tabIndex={0}\n            role=\"region\"\n            aria-label=\"Page content\"\n          >\n            <Placeholder label=\"Page content\" height={1600} />\n          </div>\n        </PageLayout.Content>\n      </PageLayout>\n      <Placeholder label=\"Beneath inner scroll container\" height={120} />\n    </div>\n  </div>\n)"
+          "code": "() => (\n  <div className={classes.NestedScrollContainer}>\n    <div className={classes.OverflowAuto}>\n      <Placeholder label=\"Above inner scroll container\" height={120} />\n      <PageLayout\n        rowGap=\"none\"\n        columnGap=\"none\"\n        padding=\"none\"\n        containerWidth=\"full\"\n      >\n        <PageLayout.Pane\n          position=\"start\"\n          padding=\"normal\"\n          divider=\"line\"\n          sticky\n          aria-label=\"Sticky pane\"\n        >\n          <div className={classes.OverflowAuto}>\n            <PageLayout.Pane padding=\"normal\" aria-label=\"Side pane\">\n              <Placeholder label=\"Inner scroll container\" height={800} />\n            </PageLayout.Pane>\n          </div>\n        </PageLayout.Pane>\n        <PageLayout.Content padding=\"normal\" width=\"large\">\n          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n          <div\n            className={classes.ContentGrid}\n            tabIndex={0}\n            role=\"region\"\n            aria-label=\"Page content\"\n          >\n            <Placeholder label=\"Page content\" height={1600} />\n          </div>\n        </PageLayout.Content>\n      </PageLayout>\n      <Placeholder label=\"Beneath inner scroll container\" height={120} />\n    </div>\n  </div>\n)"
         },
         {
           "id": "components-pagelayout-features--custom-pane-widths",
@@ -7439,10 +7446,17 @@
       ],
       "importPath": "@primer/react",
       "props": [
+        {
+          "name": "size",
+          "type": "'small' | 'medium'",
+          "defaultValue": "'medium'"
+        },
         {
           "name": "variant",
           "type": "'small' | 'normal'",
-          "defaultValue": "'normal'"
+          "defaultValue": "'normal'",
+          "description": "Use `size` instead.",
+          "deprecated": true
         },
         {
           "name": "status",
@@ -8185,11 +8199,11 @@
         },
         {
           "id": "components-timeline-features--with-actions",
-          "code": "() => (\n  <div\n    className={classes.RealisticTimeline}\n    onClick={(e) => {\n      if ((e.target as HTMLElement).closest('a')) e.preventDefault()\n    }}\n  >\n    <Timeline>\n      <Timeline.Item>\n        <Timeline.Badge variant=\"done\">\n          <Octicon icon={GitMergeIcon} aria-label=\"Merged\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          merged via the queue into <BranchName href=\"#\">main</BranchName> with\n          commit{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            01e49tb\n          </Link>{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            just now\n          </Link>\n          <div className={classes.ChecksSubline}>28 checks passed</div>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">View details</Button>\n          <Button size=\"small\">Revert</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item>\n        <Timeline.Badge>\n          <Octicon icon={RepoPushIcon} aria-label=\"Force-push\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          force-pushed the <BranchName href=\"#\">main</BranchName> branch from{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            01e49tb\n          </Link>{' '}\n          to{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            02f50uc\n          </Link>{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            2 hours ago\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">Compare</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item condensed>\n        <Timeline.Badge>\n          <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" muted>\n            Update README.md\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Label\n            className={`${classes.SignatureLabelVerified} ${classes.HideAtNarrow}`}\n          >\n            Verified\n          </Label>\n          <Octicon\n            icon={CheckIcon}\n            className={classes.IconSuccess}\n            aria-label=\"All checks passed\"\n          />\n          <Link href=\"#\" className={classes.ShaLink} muted>\n            3fbdc0\n          </Link>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item condensed>\n        <Timeline.Badge>\n          <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" muted>\n            Initial commit\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Label className={classes.HideAtNarrow}>Unverified</Label>\n          <Octicon\n            icon={XIcon}\n            className={classes.IconDanger}\n            aria-label=\"Some checks failed\"\n          />\n          <Link href=\"#\" className={classes.ShaLink} muted>\n            3fbdc0\n          </Link>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item>\n        <Timeline.Badge>\n          <Octicon icon={CrossReferenceIcon} aria-label=\"Cross-reference\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Avatar\n            src=\"https://avatars.githubusercontent.com/u/92997159?v=4\"\n            size={20}\n            className={classes.InlineAvatar}\n          />\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          mentioned this pull request{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            just now\n          </Link>\n          <div className={classes.CrossReferenceRow}>\n            <div className={classes.CrossReferenceTitle}>\n              <Link href=\"#\" className={classes.CrossReferenceLink}>\n                <span className={classes.CrossReferenceName}>\n                  Fix positioning of Autocomplete overlay menu\n                </span>{' '}\n                <span className={classes.CrossReferenceNumber}>\n                  primer/react#7431\n                </span>\n              </Link>\n            </div>\n            <Octicon\n              icon={LockIcon}\n              size={16}\n              className={classes.CrossReferenceMeta}\n              aria-label=\"Private\"\n            />\n            <StateLabel status=\"pullOpened\" size=\"small\">\n              Open\n            </StateLabel>\n          </div>\n          <div className={classes.CrossReferenceTaskline}>\n            <Octicon icon={TasklistIcon} size={16} />\n            17 tasks\n          </div>\n        </Timeline.Body>\n      </Timeline.Item>\n    </Timeline>\n  </div>\n)"
+          "code": "() => (\n  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n  <div\n    className={classes.RealisticTimeline}\n    onClick={(e) => {\n      if ((e.target as HTMLElement).closest('a')) e.preventDefault()\n    }}\n  >\n    <Timeline>\n      <Timeline.Item>\n        <Timeline.Badge variant=\"done\">\n          <Octicon icon={GitMergeIcon} aria-label=\"Merged\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          merged via the queue into <BranchName href=\"#\">main</BranchName> with\n          commit{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            01e49tb\n          </Link>{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            just now\n          </Link>\n          <div className={classes.ChecksSubline}>28 checks passed</div>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">View details</Button>\n          <Button size=\"small\">Revert</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item>\n        <Timeline.Badge>\n          <Octicon icon={RepoPushIcon} aria-label=\"Force-push\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          force-pushed the <BranchName href=\"#\">main</BranchName> branch from{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            01e49tb\n          </Link>{' '}\n          to{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            02f50uc\n          </Link>{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            2 hours ago\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">Compare</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item condensed>\n        <Timeline.Badge>\n          <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" muted>\n            Update README.md\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Label\n            className={`${classes.SignatureLabelVerified} ${classes.HideAtNarrow}`}\n          >\n            Verified\n          </Label>\n          <Octicon\n            icon={CheckIcon}\n            className={classes.IconSuccess}\n            aria-label=\"All checks passed\"\n          />\n          <Link href=\"#\" className={classes.ShaLink} muted>\n            3fbdc0\n          </Link>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item condensed>\n        <Timeline.Badge>\n          <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" muted>\n            Initial commit\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Label className={classes.HideAtNarrow}>Unverified</Label>\n          <Octicon\n            icon={XIcon}\n            className={classes.IconDanger}\n            aria-label=\"Some checks failed\"\n          />\n          <Link href=\"#\" className={classes.ShaLink} muted>\n            3fbdc0\n          </Link>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item>\n        <Timeline.Badge>\n          <Octicon icon={CrossReferenceIcon} aria-label=\"Cross-reference\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Avatar\n            src=\"https://avatars.githubusercontent.com/u/92997159?v=4\"\n            size={20}\n            className={classes.InlineAvatar}\n          />\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          mentioned this pull request{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            just now\n          </Link>\n          <div className={classes.CrossReferenceRow}>\n            <div className={classes.CrossReferenceTitle}>\n              <Link href=\"#\" className={classes.CrossReferenceLink}>\n                <span className={classes.CrossReferenceName}>\n                  Fix positioning of Autocomplete overlay menu\n                </span>{' '}\n                <span className={classes.CrossReferenceNumber}>\n                  primer/react#7431\n                </span>\n              </Link>\n            </div>\n            <Octicon\n              icon={LockIcon}\n              size={16}\n              className={classes.CrossReferenceMeta}\n              aria-label=\"Private\"\n            />\n            <StateLabel status=\"pullOpened\" size=\"small\">\n              Open\n            </StateLabel>\n          </div>\n          <div className={classes.CrossReferenceTaskline}>\n            <Octicon icon={TasklistIcon} size={16} />\n            17 tasks\n          </div>\n        </Timeline.Body>\n      </Timeline.Item>\n    </Timeline>\n  </div>\n)"
         },
         {
           "id": "components-timeline-features--with-avatar",
-          "code": "() => (\n  <div\n    className={`${classes.RealisticTimeline} ${classes.AvatarGutter}`}\n    onClick={(e) => {\n      if ((e.target as HTMLElement).closest('a')) e.preventDefault()\n    }}\n  >\n    <Timeline>\n      <Timeline.Item>\n        <Timeline.Avatar>\n          <Avatar\n            size={40}\n            src=\"https://avatars.githubusercontent.com/u/92997159?v=4\"\n            alt=\"\"\n          />\n        </Timeline.Avatar>\n        <Timeline.Badge variant=\"done\">\n          <Octicon icon={CheckIcon} aria-label=\"Approved\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            monalisa\n          </Link>\n          {'approved these changes '}\n          <RelativeTime date={new Date()} format=\"relative\" />\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">View reviewed changes</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n    </Timeline>\n  </div>\n)"
+          "code": "() => (\n  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n  <div\n    className={`${classes.RealisticTimeline} ${classes.AvatarGutter}`}\n    onClick={(e) => {\n      if ((e.target as HTMLElement).closest('a')) e.preventDefault()\n    }}\n  >\n    <Timeline>\n      <Timeline.Item>\n        <Timeline.Avatar>\n          <Avatar\n            size={40}\n            src=\"https://avatars.githubusercontent.com/u/92997159?v=4\"\n            alt=\"\"\n          />\n        </Timeline.Avatar>\n        <Timeline.Badge variant=\"done\">\n          <Octicon icon={CheckIcon} aria-label=\"Approved\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            monalisa\n          </Link>\n          {'approved these changes '}\n          <RelativeTime date={new Date()} format=\"relative\" />\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">View reviewed changes</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n    </Timeline>\n  </div>\n)"
         }
       ],
       "importPath": "@primer/react",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.34.0-rc.56d4e88fd",
+  "version": "38.34.0-rc.56e4390f1",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -77,7 +77,6 @@
   "dependencies": {
     "@github/mini-throttle": "^2.1.1",
     "@github/relative-time-element": "^5.0.0",
-    "@github/tab-container-element": "^4.8.2",
     "@lit-labs/react": "1.2.1",
     "@oddbird/popover-polyfill": "^0.5.2",
     "@primer/behaviors": "^1.10.3",
@@ -111,12 +110,12 @@
     "@primer/doc-gen": "^0.0.1",
     "@primer/react-compiler-check": "^0.0.0",
     "@rolldown/plugin-babel": "^0.2.3",
-    "@storybook/addon-a11y": "10.5.0",
-    "@storybook/addon-docs": "10.5.0",
-    "@storybook/addon-links": "10.5.0",
-    "@storybook/addon-mcp": "^0.6.0",
+    "@storybook/addon-a11y": "10.5.3",
+    "@storybook/addon-docs": "10.5.3",
+    "@storybook/addon-links": "10.5.3",
+    "@storybook/addon-mcp": "^0.7.0",
     "@storybook/icons": "^2.1.0",
-    "@storybook/react-vite": "10.5.0",
+    "@storybook/react-vite": "10.5.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^16.3.0",
@@ -173,7 +172,7 @@
     "rolldown-plugin-dts": "^0.26.0",
     "rolldown-plugin-import-css": "^0.0.0",
     "rolldown-plugin-preserve-directives": "^0.0.0",
-    "storybook": "10.5.0",
+    "storybook": "10.5.3",
     "terser": "5.36.0",
     "ts-toolbelt": "9.6.0",
     "tsx": "4.20.3",