@primer/react 38.41.0 → 38.42.0-rc.242ba780a

package/dist/experimental/index.d.ts

@@ -15,7 +15,7 @@ import { FilteredActionListProps } from "../FilteredActionList/FilteredActionLis
 import { FilteredActionListInputProps } from "../FilteredActionList/FilteredActionListInput.js";
 import { FilteredActionList } from "../FilteredActionList/index.js";
 import { ObjectPaths } from "../DataTable/utils.js";
-import { DataTableData, DataTableRowGroup, UniqueRow } from "../DataTable/row.js";
+import { DataTableData, DataTableRowGroup, DataTableRowId, UniqueRow } from "../DataTable/row.js";
 import { CellAlignment, Column, ColumnWidth, createColumnHelper } from "../DataTable/column.js";
 import { ActionBarButtonProps, ActionBarMenuItemProps, ActionBarMenuProps, ActionBarProps } from "../ActionBar/ActionBar.js";
 import { ActionBar } from "../ActionBar/index.js";
@@ -28,7 +28,7 @@ import { Blankslate as BlankslateContainer } from "../Blankslate/index.js";
 import { CardActionProps as ActionProps, CardDescriptionProps as DescriptionProps, CardHeadingProps as HeadingProps, CardIconProps as IconProps, CardImageProps as ImageProps, CardMetadataProps as MetadataProps, CardProps } from "../Card/Card.js";
 import { Card } from "../Card/index.js";
 import { DataTable, DataTableProps } from "../DataTable/DataTable.js";
-import { TableActionsProps, TableBodyProps, TableCellProps, TableContainerProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps, TableSubtitleProps, TableTitleProps } from "../DataTable/Table.js";
+import { TableActionsProps, TableBodyProps, TableCellProps, TableContainerProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps, TableRowSelectionProps, TableSelectionHeaderProps, TableSubtitleProps, TableTitleProps } from "../DataTable/Table.js";
 import { TableGroupProps } from "../DataTable/TableGroup.js";
 import { Table } from "../DataTable/index.js";
 import { InlineMessage, InlineMessageProps } from "../InlineMessage/InlineMessage.js";
@@ -51,4 +51,4 @@ import { useTabPanel } from "./Tabs/useTabPanel.js";
 import { TopicTagProps } from "../TopicTag/TopicTag.js";
 import { TopicTagGroupProps } from "../TopicTag/TopicTagGroup.js";
 import { TopicTag } from "../TopicTag/index.js";
-export { ActionBar, type ActionBarButtonProps, type ActionBarMenuItemProps, type ActionBarMenuProps, type ActionBarProps, Announce, type AnnounceProps, AriaAlert, type AriaAlertProps, AriaStatus, type AriaStatusProps, BlankslateContainer as Blankslate, type BlankslateProps, ButtonBase, type ButtonBaseProps, Card, type ActionProps as CardActionProps, type DescriptionProps as CardDescriptionProps, type HeadingProps as CardHeadingProps, type IconProps as CardIconProps, type ImageProps as CardImageProps, type MetadataProps as CardMetadataProps, type CardProps, type CellAlignment, type Column, type ColumnWidth, DataTable, type DataTableData, type DataTableProps, type DataTableRowGroup, DefaultFeatureFlags, Dialog, type DialogButtonProps, type DialogHeaderProps, type DialogHeight, type DialogProps, type DialogWidth, FeatureFlags, type FeatureFlagsProps, FilteredActionList, type FilteredActionListInputProps, FilteredActionListLoadingTypes, type FilteredActionListProps, Hidden, type HiddenProps, InlineMessage, type InlineMessageProps, IssueLabel, type IssueLabelProps, KeybindingHint, type KeybindingHintProps, NavList, type NavListDividerProps, type NavListGroupProps, type NavListItemProps, type NavListLeadingVisualProps, type NavListProps, type NavListSubNavProps, type NavListTrailingVisualProps, type ObjectPaths, PageHeader, type ActionsProps as PageHeaderActionsProps, type PageHeaderProps, type TitleProps as PageHeaderTitleProps, ScrollableRegion, type ScrollableRegionProps, SelectPanel, type SelectPanelMessageProps, type SelectPanelProps, type SelectPanelSecondaryActionProps, SkeletonAvatar, type SkeletonAvatarProps, SkeletonBox, type SkeletonBoxProps, SkeletonText, type SkeletonTextProps, SlotConfig, Stack, type StackItemProps, type StackProps, type TabListProps, type TabPanelProps, type TabProps, Table, type TableActionsProps, type TableBodyProps, type TableCellProps, type TableContainerProps, type TableGroupProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, type TableSubtitleProps, type TableTitleProps, Tabs, type TabsProps, type TitleProps, Tooltip, type TooltipProps, TopicTag, type TopicTagGroupProps, type TopicTagProps, _default as UnderlinePanels, type PanelProps as UnderlinePanelsPanelProps, type UnderlinePanelsProps, type TabProps$1 as UnderlinePanelsTabProps, type UniqueRow, createColumnHelper, getAccessibleKeybindingHintString, useFeatureFlag, useOverflow, useSlots, useTab, useTabList, useTabPanel };
+export { ActionBar, type ActionBarButtonProps, type ActionBarMenuItemProps, type ActionBarMenuProps, type ActionBarProps, Announce, type AnnounceProps, AriaAlert, type AriaAlertProps, AriaStatus, type AriaStatusProps, BlankslateContainer as Blankslate, type BlankslateProps, ButtonBase, type ButtonBaseProps, Card, type ActionProps as CardActionProps, type DescriptionProps as CardDescriptionProps, type HeadingProps as CardHeadingProps, type IconProps as CardIconProps, type ImageProps as CardImageProps, type MetadataProps as CardMetadataProps, type CardProps, type CellAlignment, type Column, type ColumnWidth, DataTable, type DataTableData, type DataTableProps, type DataTableRowGroup, type DataTableRowId, DefaultFeatureFlags, Dialog, type DialogButtonProps, type DialogHeaderProps, type DialogHeight, type DialogProps, type DialogWidth, FeatureFlags, type FeatureFlagsProps, FilteredActionList, type FilteredActionListInputProps, FilteredActionListLoadingTypes, type FilteredActionListProps, Hidden, type HiddenProps, InlineMessage, type InlineMessageProps, IssueLabel, type IssueLabelProps, KeybindingHint, type KeybindingHintProps, NavList, type NavListDividerProps, type NavListGroupProps, type NavListItemProps, type NavListLeadingVisualProps, type NavListProps, type NavListSubNavProps, type NavListTrailingVisualProps, type ObjectPaths, PageHeader, type ActionsProps as PageHeaderActionsProps, type PageHeaderProps, type TitleProps as PageHeaderTitleProps, ScrollableRegion, type ScrollableRegionProps, SelectPanel, type SelectPanelMessageProps, type SelectPanelProps, type SelectPanelSecondaryActionProps, SkeletonAvatar, type SkeletonAvatarProps, SkeletonBox, type SkeletonBoxProps, SkeletonText, type SkeletonTextProps, SlotConfig, Stack, type StackItemProps, type StackProps, type TabListProps, type TabPanelProps, type TabProps, Table, type TableActionsProps, type TableBodyProps, type TableCellProps, type TableContainerProps, type TableGroupProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, type TableRowSelectionProps, type TableSelectionHeaderProps, type TableSubtitleProps, type TableTitleProps, Tabs, type TabsProps, type TitleProps, Tooltip, type TooltipProps, TopicTag, type TopicTagGroupProps, type TopicTagProps, _default as UnderlinePanels, type PanelProps as UnderlinePanelsPanelProps, type UnderlinePanelsProps, type TabProps$1 as UnderlinePanelsTabProps, type UniqueRow, createColumnHelper, getAccessibleKeybindingHintString, useFeatureFlag, useOverflow, useSlots, useTab, useTabList, useTabPanel };

package/dist/hooks/useOpenAndCloseFocus.d.ts

@@ -6,12 +6,14 @@ type UseOpenAndCloseFocusSettings = {
   containerRef: React.RefObject<HTMLElement | null>;
   returnFocusRef: React.RefObject<HTMLElement | null>;
   preventFocusOnOpen?: boolean;
+  preventFocusOnClose?: boolean;
 };
 declare function useOpenAndCloseFocus({
   initialFocusRef,
   returnFocusRef,
   containerRef,
-  preventFocusOnOpen
+  preventFocusOnOpen,
+  preventFocusOnClose
 }: UseOpenAndCloseFocusSettings): void;
 //#endregion
 export { UseOpenAndCloseFocusSettings, useOpenAndCloseFocus };

package/dist/hooks/useOpenAndCloseFocus.js

@@ -1,14 +1,24 @@
 import { c } from "../utils/react-compiler-runtime.js";
+import { useEffectCallback } from "../internal/hooks/useEffectCallback.js";
 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;
+	const $ = c(9);
+	const { initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen, preventFocusOnClose } = t0;
 	let t1;
+	if ($[0] !== preventFocusOnClose) {
+		t1 = (element) => {
+			if (!preventFocusOnClose) element === null || element === void 0 || element.focus();
+		};
+		$[0] = preventFocusOnClose;
+		$[1] = t1;
+	} else t1 = $[1];
+	const restoreFocus = useEffectCallback(t1);
 	let t2;
-	if ($[0] !== containerRef || $[1] !== initialFocusRef || $[2] !== preventFocusOnOpen || $[3] !== returnFocusRef) {
-		t1 = () => {
+	let t3;
+	if ($[2] !== containerRef || $[3] !== initialFocusRef || $[4] !== preventFocusOnOpen || $[5] !== restoreFocus || $[6] !== returnFocusRef) {
+		t2 = () => {
 			if (!preventFocusOnOpen) {
 				if (initialFocusRef && initialFocusRef.current) initialFocusRef.current.focus();
 				else if (containerRef.current) {
@@ -18,26 +28,28 @@ function useOpenAndCloseFocus(t0) {
 			}
 			const returnFocusRefCurrent = returnFocusRef.current;
 			return function() {
-				returnFocusRefCurrent === null || returnFocusRefCurrent === void 0 || returnFocusRefCurrent.focus();
+				restoreFocus(returnFocusRefCurrent);
 			};
 		};
-		t2 = [
+		t3 = [
 			initialFocusRef,
 			returnFocusRef,
 			containerRef,
-			preventFocusOnOpen
+			preventFocusOnOpen,
+			restoreFocus
 		];
-		$[0] = containerRef;
-		$[1] = initialFocusRef;
-		$[2] = preventFocusOnOpen;
-		$[3] = returnFocusRef;
-		$[4] = t1;
-		$[5] = t2;
+		$[2] = containerRef;
+		$[3] = initialFocusRef;
+		$[4] = preventFocusOnOpen;
+		$[5] = restoreFocus;
+		$[6] = returnFocusRef;
+		$[7] = t2;
+		$[8] = t3;
 	} else {
-		t1 = $[4];
-		t2 = $[5];
+		t2 = $[7];
+		t3 = $[8];
 	}
-	useEffect(t1, t2);
+	useEffect(t2, t3);
 }
 //#endregion
 export { useOpenAndCloseFocus };

package/dist/hooks/useOverlay.d.ts

@@ -9,6 +9,7 @@ type UseOverlaySettings = {
   onClickOutside: (e: TouchOrMouseEvent) => void;
   overlayRef?: React.RefObject<HTMLDivElement | null>;
   preventFocusOnOpen?: boolean;
+  preventFocusOnClose?: boolean;
 };
 type OverlayReturnProps = {
   ref: React.RefObject<HTMLDivElement | null>;
@@ -20,7 +21,8 @@ declare const useOverlay: ({
   onEscape,
   ignoreClickRefs,
   onClickOutside,
-  preventFocusOnOpen
+  preventFocusOnOpen,
+  preventFocusOnClose
 }: UseOverlaySettings) => OverlayReturnProps;
 //#endregion
 export { OverlayReturnProps, UseOverlaySettings, useOverlay };

package/dist/hooks/useOverlay.js

@@ -5,53 +5,55 @@ import { useOnEscapePress } from "./useOnEscapePress.js";
 import { useOpenAndCloseFocus } from "./useOpenAndCloseFocus.js";
 //#region src/hooks/useOverlay.tsx
 const useOverlay = (t0) => {
-	const $ = c(13);
-	const { overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside, preventFocusOnOpen } = t0;
+	const $ = c(14);
+	const { overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside, preventFocusOnOpen, preventFocusOnClose } = t0;
 	const overlayRef = useProvidedRefOrCreate(_overlayRef);
 	let t1;
-	if ($[0] !== initialFocusRef || $[1] !== overlayRef || $[2] !== preventFocusOnOpen || $[3] !== returnFocusRef) {
+	if ($[0] !== initialFocusRef || $[1] !== overlayRef || $[2] !== preventFocusOnClose || $[3] !== preventFocusOnOpen || $[4] !== returnFocusRef) {
 		t1 = {
 			containerRef: overlayRef,
 			returnFocusRef,
 			initialFocusRef,
-			preventFocusOnOpen
+			preventFocusOnOpen,
+			preventFocusOnClose
 		};
 		$[0] = initialFocusRef;
 		$[1] = overlayRef;
-		$[2] = preventFocusOnOpen;
-		$[3] = returnFocusRef;
-		$[4] = t1;
-	} else t1 = $[4];
+		$[2] = preventFocusOnClose;
+		$[3] = preventFocusOnOpen;
+		$[4] = returnFocusRef;
+		$[5] = t1;
+	} else t1 = $[5];
 	useOpenAndCloseFocus(t1);
 	let t2;
-	if ($[5] !== ignoreClickRefs || $[6] !== onClickOutside || $[7] !== overlayRef) {
+	if ($[6] !== ignoreClickRefs || $[7] !== onClickOutside || $[8] !== overlayRef) {
 		t2 = {
 			containerRef: overlayRef,
 			ignoreClickRefs,
 			onClickOutside
 		};
-		$[5] = ignoreClickRefs;
-		$[6] = onClickOutside;
-		$[7] = overlayRef;
-		$[8] = t2;
-	} else t2 = $[8];
+		$[6] = ignoreClickRefs;
+		$[7] = onClickOutside;
+		$[8] = overlayRef;
+		$[9] = t2;
+	} else t2 = $[9];
 	useOnOutsideClick(t2);
 	let t3;
-	if ($[9] !== onEscape) {
+	if ($[10] !== onEscape) {
 		t3 = (event) => {
 			onEscape(event);
 			event.preventDefault();
 		};
-		$[9] = onEscape;
-		$[10] = t3;
-	} else t3 = $[10];
+		$[10] = onEscape;
+		$[11] = t3;
+	} else t3 = $[11];
 	useOnEscapePress(t3);
 	let t4;
-	if ($[11] !== overlayRef) {
+	if ($[12] !== overlayRef) {
 		t4 = { ref: overlayRef };
-		$[11] = overlayRef;
-		$[12] = t4;
-	} else t4 = $[12];
+		$[12] = overlayRef;
+		$[13] = t4;
+	} else t4 = $[13];
 	return t4;
 };
 //#endregion

package/dist/internal/components/InputLabel.js

@@ -54,12 +54,11 @@ function InputLabel(t0) {
 	} else t4 = $[13];
 	let t5;
 	if ($[14] !== children || $[15] !== required || $[16] !== requiredIndicator || $[17] !== requiredText) {
-		var _requiredText;
 		t5 = required || requiredText ? /* @__PURE__ */ jsxs("span", {
 			className: InputLabel_module_css_default.RequiredText,
 			children: [/* @__PURE__ */ jsx("span", { children }), /* @__PURE__ */ jsx("span", {
 				"aria-hidden": requiredIndicator ? void 0 : true,
-				children: (_requiredText = requiredText) !== null && _requiredText !== void 0 ? _requiredText : "*"
+				children: requiredText !== null && requiredText !== void 0 ? requiredText : "*"
 			})]
 		}) : children;
 		$[14] = children;

package/dist/internal/components/TextInputInnerAction.js

@@ -94,13 +94,12 @@ const TextInputAction = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 	} else t6 = $[17];
 	let t7;
 	if ($[18] !== accessibleLabel || $[19] !== ariaLabel || $[20] !== children || $[21] !== forwardedRef || $[22] !== icon || $[23] !== rest || $[24] !== styleProps || $[25] !== tooltipDirection || $[26] !== variant) {
-		var _tooltipDirection;
 		t7 = /* @__PURE__ */ jsx("span", {
 			className: t6,
 			"data-component": "TextInput.Action",
 			children: icon && !children && ariaLabel ? /* @__PURE__ */ jsx(IconButton, {
 				...accessibleLabel,
-				tooltipDirection: (_tooltipDirection = tooltipDirection) !== null && _tooltipDirection !== void 0 ? _tooltipDirection : "s",
+				tooltipDirection: tooltipDirection !== null && tooltipDirection !== void 0 ? tooltipDirection : "s",
 				variant,
 				type: "button",
 				icon,

package/dist/internal/components/TextInputWrapper.d.ts

@@ -5,6 +5,9 @@ import React, { ComponentProps } from "react";
 type TextInputSizes = 'small' | 'medium' | 'large';
 type StyledTextInputBaseWrapperProps = {
   block?: boolean;
+  /**
+   * @deprecated Omit this prop to use the default background.
+   */
   contrast?: boolean;
   disabled?: boolean;
   hasTrailingAction?: boolean;

package/dist/internal/hooks/useThemeProvider.js

@@ -53,7 +53,7 @@ function useThemeProvider(props) {
 }
 function subscribeToSystemColorMode(callback) {
 	var _window, _window$matchMedia;
-	const media = (_window = window) === null || _window === void 0 ? void 0 : (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, "(prefers-color-scheme: dark)");
+	const media = (_window = window) === null || _window === void 0 || (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, "(prefers-color-scheme: dark)");
 	media === null || media === void 0 || media.addEventListener("change", callback);
 	return () => media === null || media === void 0 ? void 0 : media.removeEventListener("change", callback);
 }
@@ -64,8 +64,8 @@ function _temp() {
 	return "day";
 }
 function getSystemColorMode() {
-	var _window2, _window2$matchMedia, _window2$matchMedia$c;
-	return (_window2 = window) !== null && _window2 !== void 0 && (_window2$matchMedia = _window2.matchMedia) !== null && _window2$matchMedia !== void 0 && (_window2$matchMedia$c = _window2$matchMedia.call(_window2, "(prefers-color-scheme: dark)")) !== null && _window2$matchMedia$c !== void 0 && _window2$matchMedia$c.matches ? "night" : "day";
+	var _window2, _window2$matchMedia;
+	return (_window2 = window) !== null && _window2 !== void 0 && (_window2$matchMedia = _window2.matchMedia) !== null && _window2$matchMedia !== void 0 && (_window2$matchMedia = _window2$matchMedia.call(_window2, "(prefers-color-scheme: dark)")) !== null && _window2$matchMedia !== void 0 && _window2$matchMedia.matches ? "night" : "day";
 }
 //#endregion
 export { useThemeProvider };

package/generated/components.json

@@ -10,7 +10,7 @@
       "stories": [
         {
           "id": "experimental-components-actionbar--default",
-          "code": "() => (\n  <ActionBar aria-label=\"Toolbar\">\n    <ActionBar.IconButton\n      icon={BoldIcon}\n      aria-label=\"Bold\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={ItalicIcon}\n      aria-label=\"Italic\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={CodeIcon}\n      aria-label=\"Code\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={LinkIcon}\n      aria-label=\"Link\"\n    ></ActionBar.IconButton>\n    <ActionBar.Divider />\n    <ActionBar.IconButton\n      icon={FileAddedIcon}\n      aria-label=\"File Added\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={SearchIcon}\n      aria-label=\"Search\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={QuoteIcon}\n      aria-label=\"Insert Quote\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={ListUnorderedIcon}\n      aria-label=\"Unordered List\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={ListOrderedIcon}\n      aria-label=\"Ordered List\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={TasklistIcon}\n      aria-label=\"Task List\"\n      onClick={() => alert('Task List clicked')}\n    ></ActionBar.IconButton>\n  </ActionBar>\n)"
+          "code": "() => (\n  <ActionBar aria-label=\"Toolbar\">\n    <ActionBar.IconButton\n      icon={<BoldIcon />}\n      aria-label=\"Bold\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<ItalicIcon />}\n      aria-label=\"Italic\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<CodeIcon />}\n      aria-label=\"Code\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<LinkIcon />}\n      aria-label=\"Link\"\n    ></ActionBar.IconButton>\n    <ActionBar.Divider />\n    <ActionBar.IconButton\n      icon={<FileAddedIcon />}\n      aria-label=\"File Added\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<SearchIcon />}\n      aria-label=\"Search\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<QuoteIcon />}\n      aria-label=\"Insert Quote\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<ListUnorderedIcon />}\n      aria-label=\"Unordered List\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<ListOrderedIcon />}\n      aria-label=\"Ordered List\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<TasklistIcon />}\n      aria-label=\"Task List\"\n      onClick={() => alert('Task List clicked')}\n    ></ActionBar.IconButton>\n  </ActionBar>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -832,6 +832,12 @@
               "defaultValue": "",
               "description": "Callback that is called when the position of the overlay changes"
             },
+            {
+              "name": "preventFocusOnClose",
+              "type": "boolean",
+              "defaultValue": "false",
+              "description": "If true, focus will not be returned to the anchor or returnFocusRef when the menu closes. Consumers must manage focus themselves."
+            },
             {
               "name": "data-test-id",
               "type": "unknown",
@@ -1997,63 +2003,63 @@
       "stories": [
         {
           "id": "components-iconbutton--default",
-          "code": "() => <IconButton icon={HeartIcon} aria-label=\"Favorite\" />"
+          "code": "() => <IconButton icon={<HeartIcon />} aria-label=\"Favorite\" />"
         },
         {
           "id": "components-iconbutton-features--primary",
-          "code": "() => <IconButton icon={HeartIcon} variant=\"primary\" aria-label=\"Favorite\" />"
+          "code": "() => (\n  <IconButton icon={<HeartIcon />} variant=\"primary\" aria-label=\"Favorite\" />\n)"
         },
         {
           "id": "components-iconbutton-features--danger",
-          "code": "() => <IconButton icon={HeartIcon} variant=\"danger\" aria-label=\"Favorite\" />"
+          "code": "() => (\n  <IconButton icon={<HeartIcon />} variant=\"danger\" aria-label=\"Favorite\" />\n)"
         },
         {
           "id": "components-iconbutton-features--invisible",
-          "code": "() => <IconButton icon={HeartIcon} variant=\"invisible\" aria-label=\"Favorite\" />"
+          "code": "() => (\n  <IconButton icon={<HeartIcon />} variant=\"invisible\" aria-label=\"Favorite\" />\n)"
         },
         {
           "id": "components-iconbutton-features--disabled",
-          "code": "() => <IconButton disabled icon={HeartIcon} aria-label=\"Favorite\" />"
+          "code": "() => <IconButton disabled icon={<HeartIcon />} aria-label=\"Favorite\" />"
         },
         {
           "id": "components-iconbutton-features--small",
-          "code": "() => <IconButton size=\"small\" icon={HeartIcon} aria-label=\"Favorite\" />"
+          "code": "() => <IconButton size=\"small\" icon={<HeartIcon />} aria-label=\"Favorite\" />"
         },
         {
           "id": "components-iconbutton-features--medium",
-          "code": "() => <IconButton size=\"medium\" icon={HeartIcon} aria-label=\"Favorite\" />"
+          "code": "() => <IconButton size=\"medium\" icon={<HeartIcon />} aria-label=\"Favorite\" />"
         },
         {
           "id": "components-iconbutton-features--large",
-          "code": "() => <IconButton size=\"large\" icon={HeartIcon} aria-label=\"Favorite\" />"
+          "code": "() => <IconButton size=\"large\" icon={<HeartIcon />} aria-label=\"Favorite\" />"
         },
         {
           "id": "components-iconbutton-features--with-description",
-          "code": "() => (\n  <IconButton\n    icon={InboxIcon}\n    aria-label=\"Notifications\"\n    description=\"You have no unread notifications.\"\n  />\n)"
+          "code": "() => (\n  <IconButton\n    icon={<InboxIcon />}\n    aria-label=\"Notifications\"\n    description=\"You have no unread notifications.\"\n  />\n)"
         },
         {
           "id": "components-iconbutton-features--external-tooltip",
-          "code": "() => (\n  <Tooltip\n    text=\"this is a supportive description for icon button\"\n    direction=\"se\"\n  >\n    <IconButton icon={HeartIcon} aria-label=\"HeartIcon\" />\n  </Tooltip>\n)"
+          "code": "() => (\n  <Tooltip\n    text=\"this is a supportive description for icon button\"\n    direction=\"se\"\n  >\n    <IconButton icon={<HeartIcon />} aria-label=\"HeartIcon\" />\n  </Tooltip>\n)"
         },
         {
           "id": "components-iconbutton-features--as-a-menu-anchor",
-          "code": "() => (\n  <ActionMenu>\n    <ActionMenu.Anchor>\n      <IconButton icon={ChevronDownIcon} aria-label=\"Something\" />\n    </ActionMenu.Anchor>\n\n    <ActionMenu.Overlay width=\"medium\">\n      <ActionList>\n        <ActionList.Item onSelect={() => alert('Copy link clicked')}>\n          Copy link\n          <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>\n        </ActionList.Item>\n        <ActionList.Item onSelect={() => alert('Quote reply clicked')}>\n          Quote reply\n          <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>\n        </ActionList.Item>\n        <ActionList.Item onSelect={() => alert('Edit comment clicked')}>\n          Edit comment\n          <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>\n        </ActionList.Item>\n        <ActionList.Divider />\n        <ActionList.Item\n          variant=\"danger\"\n          onSelect={() => alert('Delete file clicked')}\n        >\n          Delete file\n          <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>\n        </ActionList.Item>\n      </ActionList>\n    </ActionMenu.Overlay>\n  </ActionMenu>\n)"
+          "code": "() => (\n  <ActionMenu>\n    <ActionMenu.Anchor>\n      <IconButton icon={<ChevronDownIcon />} aria-label=\"Something\" />\n    </ActionMenu.Anchor>\n\n    <ActionMenu.Overlay width=\"medium\">\n      <ActionList>\n        <ActionList.Item onSelect={() => alert('Copy link clicked')}>\n          Copy link\n          <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>\n        </ActionList.Item>\n        <ActionList.Item onSelect={() => alert('Quote reply clicked')}>\n          Quote reply\n          <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>\n        </ActionList.Item>\n        <ActionList.Item onSelect={() => alert('Edit comment clicked')}>\n          Edit comment\n          <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>\n        </ActionList.Item>\n        <ActionList.Divider />\n        <ActionList.Item\n          variant=\"danger\"\n          onSelect={() => alert('Delete file clicked')}\n        >\n          Delete file\n          <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>\n        </ActionList.Item>\n      </ActionList>\n    </ActionMenu.Overlay>\n  </ActionMenu>\n)"
         },
         {
           "id": "components-iconbutton-features--loading",
-          "code": "() => (\n  <IconButton loading icon={HeartIcon} variant=\"primary\" aria-label=\"Primary\" />\n)"
+          "code": "() => (\n  <IconButton\n    loading\n    icon={<HeartIcon />}\n    variant=\"primary\"\n    aria-label=\"Primary\"\n  />\n)"
         },
         {
           "id": "components-iconbutton-features--loading-trigger",
-          "code": "() => {\n  const [isLoading, setIsLoading] = useState(false)\n  const handleClick = () => {\n    setIsLoading(true)\n    setTimeout(() => {\n      setIsLoading(false)\n    }, 3000)\n  }\n  return (\n    <IconButton\n      loading={isLoading}\n      onClick={handleClick}\n      icon={DownloadIcon}\n      aria-label=\"Download\"\n    />\n  )\n}"
+          "code": "() => {\n  const [isLoading, setIsLoading] = useState(false)\n  const handleClick = () => {\n    setIsLoading(true)\n    setTimeout(() => {\n      setIsLoading(false)\n    }, 3000)\n  }\n  return (\n    <IconButton\n      loading={isLoading}\n      onClick={handleClick}\n      icon={<DownloadIcon />}\n      aria-label=\"Download\"\n    />\n  )\n}"
         },
         {
           "id": "components-iconbutton-features--keybinding-hint-on-description",
-          "code": "() => (\n  <IconButton\n    icon={InboxIcon}\n    aria-label=\"Notifications\"\n    description=\"You have unread notifications\"\n    keybindingHint=\"G+N\"\n  />\n)"
+          "code": "() => (\n  <IconButton\n    icon={<InboxIcon />}\n    aria-label=\"Notifications\"\n    description=\"You have unread notifications\"\n    keybindingHint=\"G+N\"\n  />\n)"
         },
         {
           "id": "components-iconbutton-features--keybinding-hint",
-          "code": "() => <IconButton icon={BoldIcon} aria-label=\"Bold\" keybindingHint=\"Mod+B\" />"
+          "code": "() => (\n  <IconButton icon={<BoldIcon />} aria-label=\"Bold\" keybindingHint=\"Mod+B\" />\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -2094,9 +2100,9 @@
         },
         {
           "name": "icon",
-          "type": "Component",
+          "type": "React.ReactNode | React.ComponentType<IconProps> | React.ExoticComponent<IconProps>",
           "defaultValue": "",
-          "description": "provide an octicon. It will be placed in the center of the button"
+          "description": "Provide an icon component or React node. It will be placed in the center of the button. Use a React element when passing an icon from a Server Component."
         },
         {
           "name": "aria-label",
@@ -2759,7 +2765,23 @@
         },
         {
           "id": "experimental-components-datatable-features--with-groups",
-          "code": "() => {\n  const titleId = React.useId()\n  const [pageIndex, setPageIndex] = React.useState(0)\n  const pageSize = 10\n  const allRows = paginationData.flatMap((item) =>\n    'rows' in item ? item.rows : [item],\n  )\n  const pageRows = new Set(\n    allRows\n      .slice(pageIndex * pageSize, (pageIndex + 1) * pageSize)\n      .map((row) => row.id),\n  )\n  // Count data rows, not headings, and preserve each item's position and group membership.\n  const data = paginationData.flatMap(\n    (item): DataTableData<PaginatedRepository> => {\n      if ('rows' in item) {\n        const rows = item.rows.filter((row) => pageRows.has(row.id))\n        return rows.length > 0\n          ? [\n              {\n                ...item,\n                rows,\n              },\n            ]\n          : []\n      }\n      return pageRows.has(item.id) ? [item] : []\n    },\n  )\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id={titleId}>\n        Paginated repositories by visibility\n      </Table.Title>\n      <DataTable\n        aria-labelledby={titleId}\n        data={data}\n        columns={[\n          {\n            header: 'Name',\n            field: 'name',\n            rowHeader: true,\n            sortBy: true,\n          },\n          {\n            header: 'Visibility',\n            field: 'visibility',\n          },\n        ]}\n      />\n      <Table.Pagination\n        aria-label=\"Pagination for grouped repositories\"\n        pageSize={pageSize}\n        totalCount={allRows.length}\n        onChange={({ pageIndex }) => setPageIndex(pageIndex)}\n      />\n    </Table.Container>\n  )\n}"
+          "code": "() => {\n  const titleId = React.useId()\n  const [pageIndex, setPageIndex] = React.useState(0)\n  const pageSize = 10\n  const allRows = paginationData.flatMap((item) =>\n    'rows' in item ? item.rows : [item],\n  )\n  const pageRows = new Set(\n    allRows\n      .slice(pageIndex * pageSize, (pageIndex + 1) * pageSize)\n      .map((row) => row.id),\n  )\n  const data = getPageData(paginationData, pageRows)\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id={titleId}>\n        Paginated repositories by visibility\n      </Table.Title>\n      <DataTable\n        aria-labelledby={titleId}\n        data={data}\n        columns={[\n          {\n            header: 'Name',\n            field: 'name',\n            rowHeader: true,\n            sortBy: true,\n          },\n          {\n            header: 'Visibility',\n            field: 'visibility',\n          },\n        ]}\n      />\n      <Table.Pagination\n        aria-label=\"Pagination for grouped repositories\"\n        pageSize={pageSize}\n        totalCount={allRows.length}\n        onChange={({ pageIndex }) => setPageIndex(pageIndex)}\n      />\n    </Table.Container>\n  )\n}"
+        },
+        {
+          "id": "experimental-components-datatable-features--with-row-selection",
+          "code": "() => {\n  const [selectedRows, setSelectedRows] = React.useState<\n    ReadonlySet<DataTableRowId>\n  >(() => new Set([2]))\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id=\"selectable-repositories\">\n        Selectable repositories\n      </Table.Title>\n      <DataTable\n        aria-labelledby=\"selectable-repositories\"\n        data={data}\n        columns={groupedColumns}\n        rowSelection\n        selectedRows={selectedRows}\n        onSelectionChange={({ selectedRows: nextSelectedRows }) => {\n          setSelectedRows(nextSelectedRows)\n        }}\n      />\n    </Table.Container>\n  )\n}"
+        },
+        {
+          "id": "experimental-components-datatable-features--with-grouped-row-selection",
+          "code": "() => {\n  const [selectedRows, setSelectedRows] = React.useState<\n    ReadonlySet<DataTableRowId>\n  >(() => new Set())\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id=\"selectable-repositories-by-visibility\">\n        Selectable repositories by visibility\n      </Table.Title>\n      <DataTable\n        aria-labelledby=\"selectable-repositories-by-visibility\"\n        data={repoGroupsWithDisabledRow}\n        columns={groupedColumns}\n        rowSelection\n        selectedRows={selectedRows}\n        isRowSelectable={(repo) => repo.id !== 1}\n        onSelectionChange={({ selectedRows: nextSelectedRows }) => {\n          setSelectedRows(nextSelectedRows)\n        }}\n      />\n    </Table.Container>\n  )\n}"
+        },
+        {
+          "id": "experimental-components-datatable-features--with-standalone-and-grouped-row-selection",
+          "code": "() => {\n  const [selectedRows, setSelectedRows] = React.useState<\n    ReadonlySet<DataTableRowId>\n  >(() => new Set())\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id=\"selectable-mixed-repositories\">\n        Selectable standalone and grouped repositories\n      </Table.Title>\n      <DataTable\n        aria-labelledby=\"selectable-mixed-repositories\"\n        data={[\n          ...data.filter((repo) => repo.type === 'internal'),\n          repoGroups[1],\n        ]}\n        columns={sortableGroupedColumns}\n        rowSelection\n        selectedRows={selectedRows}\n        onSelectionChange={({ selectedRows: nextSelectedRows }) => {\n          setSelectedRows(nextSelectedRows)\n        }}\n      />\n    </Table.Container>\n  )\n}"
+        },
+        {
+          "id": "experimental-components-datatable-features--with-paginated-row-selection",
+          "code": "() => {\n  const titleId = React.useId()\n  const [pageIndex, setPageIndex] = React.useState(0)\n  const [selectedRows, setSelectedRows] = React.useState<\n    ReadonlySet<DataTableRowId>\n  >(() => new Set())\n  const pageSize = 10\n  const allRows = paginationData.flatMap((item) =>\n    'rows' in item ? item.rows : [item],\n  )\n  const pageRows = new Set(\n    allRows\n      .slice(pageIndex * pageSize, (pageIndex + 1) * pageSize)\n      .map((row) => row.id),\n  )\n  const data = getPageData(paginationData, pageRows)\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id={titleId}>\n        Selectable paginated repositories\n      </Table.Title>\n      <DataTable\n        aria-labelledby={titleId}\n        data={data}\n        columns={[\n          {\n            header: 'Name',\n            field: 'name',\n            rowHeader: true,\n          },\n          {\n            header: 'Visibility',\n            field: 'visibility',\n          },\n        ]}\n        rowSelection\n        selectedRows={selectedRows}\n        onSelectionChange={({ selectedRows }) => setSelectedRows(selectedRows)}\n      />\n      <Table.Pagination\n        aria-label=\"Pagination for selectable repositories\"\n        pageSize={pageSize}\n        totalCount={allRows.length}\n        onChange={({ pageIndex }) => {\n          setPageIndex(pageIndex)\n          // Selection applies only to the current page.\n          setSelectedRows(new Set())\n        }}\n      />\n    </Table.Container>\n  )\n}"
         },
         {
           "id": "experimental-components-datatable-features--with-sortable-groups",
@@ -2767,7 +2789,11 @@
         },
         {
           "id": "experimental-components-table-features--with-groups",
-          "code": "() => {\n  const titleId = React.useId()\n  const [pageIndex, setPageIndex] = React.useState(0)\n  const pageSize = 10\n  const allRows = paginationData.flatMap((item) =>\n    'rows' in item ? item.rows : [item],\n  )\n  const pageRows = new Set(\n    allRows\n      .slice(pageIndex * pageSize, (pageIndex + 1) * pageSize)\n      .map((row) => row.id),\n  )\n  // Count data rows, not headings, and preserve each item's position and group membership.\n  const data = paginationData.flatMap(\n    (item): DataTableData<PaginatedRepository> => {\n      if ('rows' in item) {\n        const rows = item.rows.filter((row) => pageRows.has(row.id))\n        return rows.length > 0\n          ? [\n              {\n                ...item,\n                rows,\n              },\n            ]\n          : []\n      }\n      return pageRows.has(item.id) ? [item] : []\n    },\n  )\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id={titleId}>\n        Paginated repositories by visibility\n      </Table.Title>\n      <DataTable\n        aria-labelledby={titleId}\n        data={data}\n        columns={[\n          {\n            header: 'Name',\n            field: 'name',\n            rowHeader: true,\n            sortBy: true,\n          },\n          {\n            header: 'Visibility',\n            field: 'visibility',\n          },\n        ]}\n      />\n      <Table.Pagination\n        aria-label=\"Pagination for grouped repositories\"\n        pageSize={pageSize}\n        totalCount={allRows.length}\n        onChange={({ pageIndex }) => setPageIndex(pageIndex)}\n      />\n    </Table.Container>\n  )\n}"
+          "code": "() => {\n  const titleId = React.useId()\n  const [pageIndex, setPageIndex] = React.useState(0)\n  const pageSize = 10\n  const allRows = paginationData.flatMap((item) =>\n    'rows' in item ? item.rows : [item],\n  )\n  const pageRows = new Set(\n    allRows\n      .slice(pageIndex * pageSize, (pageIndex + 1) * pageSize)\n      .map((row) => row.id),\n  )\n  const data = getPageData(paginationData, pageRows)\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id={titleId}>\n        Paginated repositories by visibility\n      </Table.Title>\n      <DataTable\n        aria-labelledby={titleId}\n        data={data}\n        columns={[\n          {\n            header: 'Name',\n            field: 'name',\n            rowHeader: true,\n            sortBy: true,\n          },\n          {\n            header: 'Visibility',\n            field: 'visibility',\n          },\n        ]}\n      />\n      <Table.Pagination\n        aria-label=\"Pagination for grouped repositories\"\n        pageSize={pageSize}\n        totalCount={allRows.length}\n        onChange={({ pageIndex }) => setPageIndex(pageIndex)}\n      />\n    </Table.Container>\n  )\n}"
+        },
+        {
+          "id": "experimental-components-table-features--with-row-selection",
+          "code": "() => {\n  const [selectedRows, setSelectedRows] = React.useState<\n    ReadonlySet<DataTableRowId>\n  >(() => new Set([2]))\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id=\"selectable-repositories\">\n        Selectable repositories\n      </Table.Title>\n      <DataTable\n        aria-labelledby=\"selectable-repositories\"\n        data={data}\n        columns={groupedColumns}\n        rowSelection\n        selectedRows={selectedRows}\n        onSelectionChange={({ selectedRows: nextSelectedRows }) => {\n          setSelectedRows(nextSelectedRows)\n        }}\n      />\n    </Table.Container>\n  )\n}"
         }
       ],
       "importPath": "@primer/react/experimental",
@@ -2792,6 +2818,36 @@
           "type": "Array<Column<Data>>",
           "description": "Provide the columns for the table and the fields in `data` to which they correspond"
         },
+        {
+          "name": "getRowId",
+          "type": "(row: Data) => DataTableRowId",
+          "description": "Provide a stable row ID. Defaults to row.id. DataTableRowId is an exported string | number type."
+        },
+        {
+          "name": "rowSelection",
+          "type": "boolean",
+          "description": "Render row checkboxes and a select-all checkbox for the current page."
+        },
+        {
+          "name": "selectedRows",
+          "type": "ReadonlySet<DataTableRowId>",
+          "description": "Control selection using stable IDs from `getRowId`. Missing or non-selectable IDs stay stored but do not count as selected."
+        },
+        {
+          "name": "defaultSelectedRows",
+          "type": "ReadonlySet<DataTableRowId>",
+          "description": "Set the initial selection for an uncontrolled, static, single-page table."
+        },
+        {
+          "name": "onSelectionChange",
+          "type": "({ selectedRows }: { selectedRows: Set<DataTableRowId> }) => void",
+          "description": "Receive a new selection set when a checkbox is toggled. Data changes alone do not trigger this callback."
+        },
+        {
+          "name": "isRowSelectable",
+          "type": "(row: Data) => boolean",
+          "description": "Determine which rows can be selected and counted by select-all."
+        },
         {
           "name": "cellPadding",
           "type": "'condensed' | 'normal' | 'spacious'",
@@ -2952,6 +3008,80 @@
             }
           ]
         },
+        {
+          "name": "Table.SelectionHeader",
+          "props": [
+            {
+              "name": "selection",
+              "type": "'all' | 'some' | 'none'",
+              "required": true,
+              "description": "Whether all, some, or none of the selectable rows are selected."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "description": "Whether row selection is unavailable."
+            },
+            {
+              "name": "onToggleSelect",
+              "type": "() => void",
+              "description": "Request toggling selection for all selectable rows."
+            },
+            {
+              "name": "checkboxRef",
+              "type": "React.Ref<HTMLInputElement>",
+              "description": "Forward a ref to the native selection checkbox."
+            },
+            {
+              "name": "aria-label",
+              "type": "string",
+              "defaultValue": "'Select rows'",
+              "description": "Provide the selection checkbox's accessible name."
+            },
+            {
+              "name": "aria-description",
+              "type": "string",
+              "description": "Describe the select-all scope, for example \"Select all 10 rows\"."
+            }
+          ]
+        },
+        {
+          "name": "Table.RowSelection",
+          "props": [
+            {
+              "name": "selected",
+              "type": "boolean",
+              "required": true,
+              "description": "Whether the row is selected."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "description": "Whether the row cannot be selected."
+            },
+            {
+              "name": "onToggleSelect",
+              "type": "() => void",
+              "description": "Request toggling selection for the row."
+            },
+            {
+              "name": "checkboxRef",
+              "type": "React.Ref<HTMLInputElement>",
+              "description": "Forward a ref to the native row checkbox."
+            },
+            {
+              "name": "aria-label",
+              "type": "string",
+              "defaultValue": "'Select row'",
+              "description": "Name the row checkbox when `aria-labelledby` is not provided."
+            },
+            {
+              "name": "aria-labelledby",
+              "type": "string",
+              "description": "Reference the row header IDs. The checkbox name adds \"Select\" before their text."
+            }
+          ]
+        },
         {
           "name": "Table.Cell",
           "props": [
@@ -4615,6 +4745,12 @@
       ],
       "importPath": "@primer/react",
       "props": [
+        {
+          "name": "preventFocusOnClose",
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "If true, focus will not be returned to returnFocusRef when the Overlay is unmounted. Consumers must manage focus themselves."
+        },
         {
           "name": "returnFocusRef",
           "type": "React.RefObject<HTMLElement>",
@@ -7912,7 +8048,8 @@
           "name": "contrast",
           "type": "boolean",
           "defaultValue": "false",
-          "description": "Changes background color to a higher contrast color"
+          "deprecated": true,
+          "description": "Deprecated. Omit this prop to use the default background."
         },
         {
           "name": "size",
@@ -8262,7 +8399,8 @@
           "name": "contrast",
           "type": "boolean",
           "defaultValue": "false",
-          "description": "Changes background color to a higher contrast color"
+          "deprecated": true,
+          "description": "Deprecated. Omit this prop to use the default background."
         },
         {
           "name": "validationStatus",