@primer/react 38.41.0 → 38.42.0-rc.23d625bd0

package/dist/Overlay/Overlay.d.ts

@@ -54,6 +54,7 @@ type ContainerProps = {
   portalContainerName?: string;
   preventOverflow?: boolean;
   preventFocusOnOpen?: boolean;
+  preventFocusOnClose?: boolean;
   returnFocusRef: React.RefObject<HTMLElement | null>;
 };
 type internalOverlayProps = Merge<OwnOverlayProps, ContainerProps>;
@@ -68,6 +69,7 @@ type internalOverlayProps = Merge<OwnOverlayProps, ContainerProps>;
  * @param portalContainerName Optional. The name of the portal container to render the Overlay into.
  * @param preventOverflow Optional. The Overlay width will be adjusted responsively if there is not enough space to display the Overlay. If `preventOverflow` is `true`, the width of the `Overlay` will not be adjusted.
  * @param preventFocusOnOpen Optional. If 'true', focus will not be applied when the component is first mounted, even if initialFocusRef prop is given.
+ * @param preventFocusOnClose Optional. If true, focus will not be returned when the component is unmounted. Consumers must manage focus themselves.
  * @param returnFocusRef Required. Ref for the element to focus when the `Overlay` is closed.
  * @param right Optional. Horizontal right position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
  * @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`.

package/dist/Overlay/Overlay.js

@@ -76,12 +76,13 @@ const BaseOverlay = /*#__PURE__*/ React.forwardRef(({ visibility, height, width,
 * @param portalContainerName Optional. The name of the portal container to render the Overlay into.
 * @param preventOverflow Optional. The Overlay width will be adjusted responsively if there is not enough space to display the Overlay. If `preventOverflow` is `true`, the width of the `Overlay` will not be adjusted.
 * @param preventFocusOnOpen Optional. If 'true', focus will not be applied when the component is first mounted, even if initialFocusRef prop is given.
+* @param preventFocusOnClose Optional. If true, focus will not be returned when the component is unmounted. Consumers must manage focus themselves.
 * @param returnFocusRef Required. Ref for the element to focus when the `Overlay` is closed.
 * @param right Optional. Horizontal right position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
 * @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`.
 
 */
-const Overlay = /*#__PURE__*/ React.forwardRef(({ anchorSide, _PrivateDisablePortal, height = "auto", ignoreClickRefs, initialFocusRef, left, onClickOutside, onEscape, portalContainerName, preventOverflow = true, preventFocusOnOpen, returnFocusRef, right, role = "none", visibility = "visible", width = "auto", responsiveVariant, ...props }, forwardedRef) => {
+const Overlay = /*#__PURE__*/ React.forwardRef(({ anchorSide, _PrivateDisablePortal, height = "auto", ignoreClickRefs, initialFocusRef, left, onClickOutside, onEscape, portalContainerName, preventOverflow = true, preventFocusOnOpen, preventFocusOnClose, returnFocusRef, right, role = "none", visibility = "visible", width = "auto", responsiveVariant, ...props }, forwardedRef) => {
 	const overlayRef = useRef(null);
 	const mergedOverlayRef = useMergedRefs(forwardedRef, overlayRef);
 	const slideAnimationDistance = 8;
@@ -94,7 +95,8 @@ const Overlay = /*#__PURE__*/ React.forwardRef(({ anchorSide, _PrivateDisablePor
 		ignoreClickRefs,
 		onClickOutside,
 		initialFocusRef,
-		preventFocusOnOpen
+		preventFocusOnOpen,
+		preventFocusOnClose
 	});
 	useEffect(() => {
 		var _overlayRef$current;

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/generated/components.json

@@ -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",
@@ -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>",

package/generated/hooks.json

@@ -696,6 +696,12 @@
               "type": "boolean",
               "defaultValue": "false",
               "description": "If true, focus will not be set when the container is opened."
+            },
+            {
+              "name": "preventFocusOnClose",
+              "type": "boolean",
+              "defaultValue": "false",
+              "description": "If true, focus will not be returned to returnFocusRef when the hook is cleaned up. Consumers must manage focus themselves."
             }
           ]
         }
@@ -769,6 +775,12 @@
               "name": "preventFocusOnOpen",
               "type": "boolean",
               "description": "Flag to prevent focus on the overlay when it is opened."
+            },
+            {
+              "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."
             }
           ]
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.41.0",
+  "version": "38.42.0-rc.23d625bd0",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -157,7 +157,7 @@
     "mdast-util-to-string": "4.0.0",
     "micromark-extension-frontmatter": "2.0.0",
     "micromark-extension-mdxjs": "3.0.0",
-    "oxc-transform-react": "^0.152.0",
+    "oxc-transform-react": "^0.153.0",
     "postcss-preset-primer": "^0.0.0",
     "publint": "^0.3.15",
     "react": "18.3.1",

package/dist/DataTable/Table-50e68700.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/DataTable/Table.module.css.js"],"names":[],"mappings":"AACA,oCAUE,mCAA8B,CAT9B,YAAa,CAEb,uHAMiB,CAPjB,6BASF,CAGA,gCAQE,iBAAkB,CANlB,8CAAuC,CACvC,gDAA6C,CAI7C,eAAgB,CAFhB,gBAIF,CAGA,mEANE,oCAA6B,CAL7B,QAkBF,CAPA,mCAEE,4CAAsC,CACtC,8CAA2C,CAG3C,kBAAmB,CAFnB,kDAGF,CAGA,kCAGE,kBAAmB,CADnB,mCAA8B,CAD9B,YAAa,CAGb,iBAAkB,CAClB,gBACF,CAGA,kCAIE,mDAA4C,CAC5C,iBAAkB,CAHlB,UAAW,CAKX,yCAAoC,CADpC,2CAAuC,CALvC,UAOF,CAGA,mOAGE,2CACF,CAOA,qEAJE,eAsCF,CAlCA,2BAEE,8BAA+B,CAC/B,wFAA2F,CAC3F,yBAA0B,CAW1B,4CAAwC,CADxC,wBAAyB,CAFzB,gBAAiB,CANjB,YAAa,CAGb,gCAAiC,CAQjC,kDAAmD,CANnD,mBAA0B,CAJ1B,UA2BF,CAdE,gEACE,4BAA6B,CAC7B,4BACF,CAEA,6DACE,2BAA4B,CAC5B,6BACF,CAEA,+DACE,4BAA6B,CAC7B,0BACF,CAIF,wFAEE,6FACF,CAEA,sFAEE,2FACF,CAEA,gEAME,kBAAmB,CACnB,0FAA0E,CAL1E,YAAa,CAEb,iCAAkC,CAClC,gBAGF,CAEA,0HAEE,YAAa,CAEb,wBAAyB,CADzB,cAEF,CAEA,2FACE,YAAa,CACb,0BACF,CAEA,4GACE,4FACF,CAIA,wHAEE,iDACF,CAGA,uHAEE,kDACF,CAGA,kNAEE,oDACF,CAGA,iNAEE,qDACF,CAMA,6KAEE,6CACF,CAEA,2KAEE,2CACF,CAGA,iCAGE,6CAAsC,CACtC,4FAA4E,CAF5E,kCAA2B,CAD3B,gDAIF,CAEA,6HAEE,oCACF,CAGA,mCACE,iBACF,CASA,yZAEE,kBACF,CAGA,+GACE,mEACF,CAGA,kDAIE,kBAAmB,CADnB,oCAA6B,CAF7B,YAAa,CACb,gDAGF,CAGA,uCACE,SACF,CAEA,4CACE,YAAa,CAEb,qBAAsB,CADtB,UAEF,CAEA,2CAEE,iCAqBF,CAnBE,6DACE,yBACF,CAEA,6DACE,2BACF,CAEA,6DACE,yBACF,CAEA,6DACE,yBACF,CAEA,6DACE,yBACF,CAGF,yEACE,gCACF,CAEA,8DACE,0FACF,CAEA,qCACE,gBACF,CAGA,sIAIE,gBACF,CAEA,0CACE,sIAIE,YAAa,CAEb,gBAAkB,CADlB,6BAEF,CACF,CAEA,0CASE,6CAAsC,CAGtC,0FAA0E,CAD1E,2FAA2E,CAD3E,6FAA6E,CAF7E,kCAA2B,CAN3B,gBAAmB,CAInB,iCAAkC,CAClC,gBAMF,CAEA,uFAZE,oBAAqB,CACrB,mCAA8B,CAH9B,YAkBF,CAEA,2CAEE,oCAA6B,CAD7B,gDAEF,CAMA,gFACE,kCACF","file":"Table-50e68700.css","sourcesContent":["/* Container ---------------------------------------------------------------- */\n.TableContainer {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-areas:\n    'title actions'\n    'divider divider'\n    'subtitle subtitle'\n    'filter filter'\n    'table table'\n    'footer footer';\n  column-gap: var(--base-size-8);\n}\n\n/* TableTitle */\n.TableTitle {\n  margin: 0;\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-semibold);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 20px;\n  color: var(--fgColor-default);\n  grid-area: title;\n  align-self: center;\n}\n\n/* TableSubtitle */\n.TableSubtitle {\n  margin: 0;\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-title-lineHeight-small);\n  color: var(--fgColor-default);\n  grid-area: subtitle;\n}\n\n/* TableActions */\n.TableActions {\n  display: flex;\n  column-gap: var(--base-size-8);\n  align-items: center;\n  grid-area: actions;\n  justify-self: end;\n}\n\n/* TableDivider */\n.TableDivider {\n  width: 100%;\n  height: 1px;\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--borderColor-default);\n  grid-area: divider;\n  margin-block-start: var(--base-size-16);\n  margin-block-end: var(--base-size-8);\n}\n\n/* Spacing before the table */\n.TableTitle + .TableOverflowWrapper,\n.TableSubtitle + .TableOverflowWrapper,\n.TableActions + .TableOverflowWrapper {\n  margin-block-start: var(--base-size-8);\n}\n\n.TableOverflowWrapper {\n  grid-area: table;\n}\n\n/* Table -------------------------------------------------------------------- */\n.Table {\n  /* Default table styles */\n  --table-border-radius: 0.375rem;\n  --table-cell-padding: var(--cell-padding-block, 0.5rem) var(--cell-padding-inline, 0.75rem);\n  --table-font-size: 0.75rem;\n\n  display: grid;\n  width: 100%;\n  /* stylelint-disable-next-line primer/typography */\n  font-size: var(--table-font-size);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: calc(20 / 12);\n  border-spacing: 0;\n  /* stylelint-disable-next-line primer/borders */\n  border-collapse: separate;\n  background-color: var(--bgColor-default);\n  grid-area: table;\n  grid-template-columns: var(--grid-template-columns);\n\n  /* Density modes: condensed, normal, spacious */\n  &:where([data-cell-padding='condensed']) {\n    --cell-padding-block: 0.25rem;\n    --cell-padding-inline: 0.5rem;\n  }\n\n  &:where([data-cell-padding='normal']) {\n    --cell-padding-block: 0.5rem;\n    --cell-padding-inline: 0.75rem;\n  }\n\n  &:where([data-cell-padding='spacious']) {\n    --cell-padding-block: 0.75rem;\n    --cell-padding-inline: 1rem;\n  }\n}\n\n/* Borders */\n.TableCell:first-child,\n.TableHeader:first-child {\n  border-inline-start: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableCell:last-child,\n.TableHeader:last-child {\n  border-inline-end: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableHeader,\n.TableCell {\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--table-cell-padding);\n  text-align: start;\n  align-items: center;\n  border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableHeader:where([data-cell-align='end']),\n.TableCell:where([data-cell-align='end']) {\n  display: flex;\n  text-align: end;\n  justify-content: flex-end;\n}\n\n.TableHeader[data-cell-align='end'] .TableSortButton {\n  display: flex;\n  flex-direction: row-reverse;\n}\n\n.TableHead .TableRow:first-of-type .TableHeader {\n  border-block-start: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n/* Border radius */\n/* stylelint-disable-next-line selector-max-specificity */\n.TableHead .TableRow:first-of-type .TableHeader:first-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-top-left-radius: var(--table-border-radius);\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.TableHead .TableRow:first-of-type .TableHeader:last-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-top-right-radius: var(--table-border-radius);\n}\n\n/* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */\n.TableOverflowWrapper:last-child .Table .TableBody:last-of-type .TableRow:last-of-type .TableCell:first-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-bottom-left-radius: var(--table-border-radius);\n}\n\n/* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */\n.TableOverflowWrapper:last-child .Table .TableBody:last-of-type .TableRow:last-of-type .TableCell:last-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-bottom-right-radius: var(--table-border-radius);\n}\n\n/**\n * Offset padding to make sure type aligns regardless of cell padding\n * selection\n */\n.TableRow > *:first-child:not(.TableCellSkeleton),\n.TableRow > *:first-child .TableCellSkeletonItem {\n  padding-inline-start: var(--base-size-16);\n}\n\n.TableRow > *:last-child:not(.TableCellSkeleton),\n.TableRow > *:last-child .TableCellSkeletonItem {\n  padding-inline-end: var(--base-size-16);\n}\n\n/* TableHeader */\n.TableHeader {\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-muted);\n  background-color: var(--bgColor-muted);\n  border-block-start: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableHeader:where([aria-sort='descending']),\n.TableHeader:where([aria-sort='ascending']) {\n  color: var(--fgColor-default);\n}\n\n/* Control visibility of sort icons */\n.TableSortIcon {\n  visibility: hidden;\n}\n\n/* The ASC icon is visible if the header is sortable and is hovered or focused */\n.TableHeader:hover .TableSortIcon--ascending,\n.TableHeader .TableSortButton:focus .TableSortIcon--ascending {\n  visibility: visible;\n}\n\n/* Each sort icon is visible if the TableHeader is currently in the corresponding sort state */\n.TableHeader[aria-sort='ascending'] .TableSortIcon--ascending,\n.TableHeader[aria-sort='descending'] .TableSortIcon--descending {\n  visibility: visible;\n}\n\n/* TableRow */\n.TableRow:hover .TableCell:not(.TableCellSkeleton) {\n  background-color: var(--control-transparent-bgColor-hover);\n}\n\n/* TableCell */\n.TableCell:where([scope='row']) {\n  display: flex;\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-default);\n  align-items: center;\n}\n\n/* TableCellSkeleton */\n.TableCellSkeleton {\n  padding: 0;\n}\n\n.TableCellSkeletonItems {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.TableCellSkeletonItem {\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--table-cell-padding);\n\n  &:nth-of-type(5n + 1) {\n    --skeleton-item-width: 85%;\n  }\n\n  &:nth-of-type(5n + 2) {\n    --skeleton-item-width: 67.5%;\n  }\n\n  &:nth-of-type(5n + 3) {\n    --skeleton-item-width: 80%;\n  }\n\n  &:nth-of-type(5n + 4) {\n    --skeleton-item-width: 60%;\n  }\n\n  &:nth-of-type(5n + 5) {\n    --skeleton-item-width: 75%;\n  }\n}\n\n.TableCellSkeletonItem [data-component='SkeletonText'] {\n  width: var(--skeleton-item-width);\n}\n\n.TableCellSkeletonItem:not(:last-of-type) {\n  border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableSortButton {\n  column-gap: 0.5rem;\n}\n\n/* Grid layout */\n.TableHead,\n.TableBody,\n.TableGroupHeaderBody,\n.TableRow {\n  display: contents;\n}\n\n@supports (grid-template-columns: subgrid) {\n  .TableHead,\n  .TableBody,\n  .TableGroupHeaderBody,\n  .TableRow {\n    display: grid;\n    grid-template-columns: subgrid;\n    grid-column: -1 /1;\n  }\n}\n\n.TableGroupHeaderCell {\n  display: flex;\n  grid-column: 1 / -1;\n  align-items: baseline;\n  column-gap: var(--base-size-8);\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--table-cell-padding);\n  text-align: start;\n  color: var(--fgColor-muted);\n  background-color: var(--bgColor-muted);\n  border-inline-start: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-inline-end: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableGroupHeaderContent {\n  display: flex;\n  align-items: baseline;\n  column-gap: var(--base-size-8);\n}\n\n.TableGroupHeaderLabel {\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-default);\n}\n\n.TableGroupHeaderCount {\n  color: var(--fgColor-muted);\n}\n\n.PlaceholderText {\n  color: var(--fgColor-muted);\n}\n"]}