@primer/react 38.39.1-rc.99036c1d8 → 38.40.0-rc.37bd8a025

package/CHANGELOG.md

@@ -1,11 +1,21 @@
 # @primer/react
 
-## 38.39.1
+## 38.40.0
+
+### Minor Changes
+
+- [#8422](https://github.com/primer/react/pull/8422) [`2909f19`](https://github.com/primer/react/commit/2909f19f64dbbc12aefb3455139596d88e5098b2) Thanks [@tay1orjones](https://github.com/tay1orjones)! - NavList, ActionList: Add a `disableItemGap` prop to render navigation items edge-to-edge.
+
+- [#8386](https://github.com/primer/react/pull/8386) [`6c64598`](https://github.com/primer/react/commit/6c645987c5ad27d5c23f57190a10b8707b29c58c) Thanks [@rickyzhangca](https://github.com/rickyzhangca)! - DataTable: Add config-driven row groups that can be interleaved with standalone rows.
 
 ### Patch Changes
 
 - [#8408](https://github.com/primer/react/pull/8408) [`c880319`](https://github.com/primer/react/commit/c8803199ddb0e669596f6e2370fd4117a055cfc3) Thanks [@janmaarten-a11y](https://github.com/janmaarten-a11y)! - Button and LinkButton: Limit link variant underlines to the text label when visuals are present
 
+- [#8411](https://github.com/primer/react/pull/8411) [`8c52029`](https://github.com/primer/react/commit/8c520293151054fd39e5094f4740e97e89ce18d8) Thanks [@mattcosta7](https://github.com/mattcosta7)! - Tooltip: Prevent React Fragment triggers from crashing and provide a clear development warning
+
+- [#8409](https://github.com/primer/react/pull/8409) [`9d0632c`](https://github.com/primer/react/commit/9d0632ccc6c23e92cbbe786ce922795c92931b04) Thanks [@iansan5653](https://github.com/iansan5653)! - Fix Tooltip ref handling to preserve child element ref
+
 ## 38.39.0
 
 ### Minor Changes

package/dist/ActionList/List.js

@@ -17,7 +17,7 @@ import { clsx } from "clsx";
 //#region src/ActionList/List.tsx
 const UnwrappedList = (props, forwardedRef) => {
 	var _slots$heading$props$;
-	const $ = c(40);
+	const $ = c(41);
 	let className;
 	let restProps;
 	let role;
@@ -26,8 +26,9 @@ const UnwrappedList = (props, forwardedRef) => {
 	let t1;
 	let t2;
 	let t3;
+	let t4;
 	if ($[0] !== props) {
-		({as: t0, variant: t1, selectionVariant, showDividers: t2, role, disableFocusZone: t3, className, ...restProps} = props);
+		({as: t0, variant: t1, selectionVariant, showDividers: t2, role, disableFocusZone: t3, disableItemGap: t4, className, ...restProps} = props);
 		$[0] = props;
 		$[1] = className;
 		$[2] = restProps;
@@ -37,6 +38,7 @@ const UnwrappedList = (props, forwardedRef) => {
 		$[6] = t1;
 		$[7] = t2;
 		$[8] = t3;
+		$[9] = t4;
 	} else {
 		className = $[1];
 		restProps = $[2];
@@ -46,17 +48,19 @@ const UnwrappedList = (props, forwardedRef) => {
 		t1 = $[6];
 		t2 = $[7];
 		t3 = $[8];
+		t4 = $[9];
 	}
 	const Component = t0 === void 0 ? "ul" : t0;
 	const variant = t1 === void 0 ? "inset" : t1;
 	const showDividers = t2 === void 0 ? false : t2;
 	const disableFocusZone = t3 === void 0 ? false : t3;
-	let t4;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = { heading: Heading };
-		$[9] = t4;
-	} else t4 = $[9];
-	const [slots, childrenWithoutSlots] = useSlots(restProps.children, t4);
+	const disableItemGap = t4 === void 0 ? false : t4;
+	let t5;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = { heading: Heading };
+		$[10] = t5;
+	} else t5 = $[10];
+	const [slots, childrenWithoutSlots] = useSlots(restProps.children, t5);
 	const headingId = useId$1();
 	const { listRole: listRoleFromContainer, listLabelledBy, selectionVariant: containerSelectionVariant, enableFocusZone: enableFocusZoneFromContainer, container } = React.useContext(ActionListContainerContext);
 	const ariaLabelledBy = slots.heading ? (_slots$heading$props$ = slots.heading.props.id) !== null && _slots$heading$props$ !== void 0 ? _slots$heading$props$ : headingId : listLabelledBy;
@@ -67,58 +71,58 @@ const UnwrappedList = (props, forwardedRef) => {
 	const providedOrCreatedRef = useProvidedRefOrCreate(forwardedRef);
 	const readRef = mergedRefEnabled ? listRef : providedOrCreatedRef;
 	const appliedRef = mergedRefEnabled ? mergedRef : providedOrCreatedRef;
-	const itemGapEnabled = useFeatureFlag("primer_react_action_list_item_gap") && container === "NavList";
+	const itemGapEnabled = useFeatureFlag("primer_react_action_list_item_gap") && !disableItemGap && container === "NavList";
 	let enableFocusZone = false;
 	if (enableFocusZoneFromContainer !== void 0) enableFocusZone = enableFocusZoneFromContainer;
 	else if (listRole && !disableFocusZone) {
-		let t5;
-		if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-			t5 = [
+		let t6;
+		if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+			t6 = [
 				"menu",
 				"menubar",
 				"listbox"
 			];
-			$[10] = t5;
-		} else t5 = $[10];
-		enableFocusZone = t5.includes(listRole);
+			$[11] = t6;
+		} else t6 = $[11];
+		enableFocusZone = t6.includes(listRole);
 	}
-	const t5 = !enableFocusZone;
-	const t6 = listRole === "menu" || container === "SelectPanel" || container === "FilteredActionList" ? "wrap" : void 0;
-	let t7;
-	if ($[11] !== readRef || $[12] !== t5 || $[13] !== t6) {
-		t7 = {
-			disabled: t5,
+	const t6 = !enableFocusZone;
+	const t7 = listRole === "menu" || container === "SelectPanel" || container === "FilteredActionList" ? "wrap" : void 0;
+	let t8;
+	if ($[12] !== readRef || $[13] !== t6 || $[14] !== t7) {
+		t8 = {
+			disabled: t6,
 			containerRef: readRef,
 			bindKeys: FocusKeys.ArrowVertical | FocusKeys.HomeAndEnd | FocusKeys.PageUpDown,
-			focusOutBehavior: t6
+			focusOutBehavior: t7
 		};
-		$[11] = readRef;
-		$[12] = t5;
+		$[12] = readRef;
 		$[13] = t6;
 		$[14] = t7;
-	} else t7 = $[14];
-	useFocusZone(t7);
-	const t8 = selectionVariant || containerSelectionVariant;
-	let t9;
-	if ($[15] !== headingId || $[16] !== listRole || $[17] !== showDividers || $[18] !== t8 || $[19] !== variant) {
-		t9 = {
+		$[15] = t8;
+	} else t8 = $[15];
+	useFocusZone(t8);
+	const t9 = selectionVariant || containerSelectionVariant;
+	let t10;
+	if ($[16] !== headingId || $[17] !== listRole || $[18] !== showDividers || $[19] !== t9 || $[20] !== variant) {
+		t10 = {
 			variant,
-			selectionVariant: t8,
+			selectionVariant: t9,
 			showDividers,
 			role: listRole,
 			headingId
 		};
-		$[15] = headingId;
-		$[16] = listRole;
-		$[17] = showDividers;
-		$[18] = t8;
-		$[19] = variant;
-		$[20] = t9;
-	} else t9 = $[20];
-	const listContextValue = t9;
-	let t10;
-	if ($[21] !== readRef.current) {
-		t10 = () => {
+		$[16] = headingId;
+		$[17] = listRole;
+		$[18] = showDividers;
+		$[19] = t9;
+		$[20] = variant;
+		$[21] = t10;
+	} else t10 = $[21];
+	const listContextValue = t10;
+	let t11;
+	if ($[22] !== readRef.current) {
+		t11 = () => {
 			const list = readRef.current;
 			if (!list) return;
 			const hasMixed = list.querySelector("[data-has-description=\"true\"]") !== null && list.querySelector("[data-has-description=\"false\"]") !== null;
@@ -126,56 +130,56 @@ const UnwrappedList = (props, forwardedRef) => {
 			if (hasMixed && current !== "true") list.setAttribute("data-mixed-descriptions", "true");
 			else if (!hasMixed && current !== null) list.removeAttribute("data-mixed-descriptions");
 		};
-		$[21] = readRef.current;
-		$[22] = t10;
-	} else t10 = $[22];
-	useIsomorphicLayoutEffect(t10);
-	const t11 = slots.heading;
-	let t12;
-	if ($[23] !== className) {
-		t12 = clsx(ActionList_module_css_default.ActionList, className);
-		$[23] = className;
-		$[24] = t12;
-	} else t12 = $[24];
-	const t13 = itemGapEnabled ? "" : void 0;
-	let t14;
-	if ($[25] !== Component || $[26] !== appliedRef || $[27] !== ariaLabelledBy || $[28] !== childrenWithoutSlots || $[29] !== listRole || $[30] !== restProps || $[31] !== showDividers || $[32] !== t12 || $[33] !== t13 || $[34] !== variant) {
-		t14 = /*#__PURE__*/ jsx(Component, {
-			className: t12,
+		$[22] = readRef.current;
+		$[23] = t11;
+	} else t11 = $[23];
+	useIsomorphicLayoutEffect(t11);
+	const t12 = slots.heading;
+	let t13;
+	if ($[24] !== className) {
+		t13 = clsx(ActionList_module_css_default.ActionList, className);
+		$[24] = className;
+		$[25] = t13;
+	} else t13 = $[25];
+	const t14 = itemGapEnabled ? "" : void 0;
+	let t15;
+	if ($[26] !== Component || $[27] !== appliedRef || $[28] !== ariaLabelledBy || $[29] !== childrenWithoutSlots || $[30] !== listRole || $[31] !== restProps || $[32] !== showDividers || $[33] !== t13 || $[34] !== t14 || $[35] !== variant) {
+		t15 = /*#__PURE__*/ jsx(Component, {
+			className: t13,
 			role: listRole,
 			"aria-labelledby": ariaLabelledBy,
 			ref: appliedRef,
 			"data-component": "ActionList",
 			"data-dividers": showDividers,
 			"data-variant": variant,
-			"data-item-gap": t13,
+			"data-item-gap": t14,
 			...restProps,
 			children: childrenWithoutSlots
 		});
-		$[25] = Component;
-		$[26] = appliedRef;
-		$[27] = ariaLabelledBy;
-		$[28] = childrenWithoutSlots;
-		$[29] = listRole;
-		$[30] = restProps;
-		$[31] = showDividers;
-		$[32] = t12;
+		$[26] = Component;
+		$[27] = appliedRef;
+		$[28] = ariaLabelledBy;
+		$[29] = childrenWithoutSlots;
+		$[30] = listRole;
+		$[31] = restProps;
+		$[32] = showDividers;
 		$[33] = t13;
-		$[34] = variant;
-		$[35] = t14;
-	} else t14 = $[35];
-	let t15;
-	if ($[36] !== listContextValue || $[37] !== slots.heading || $[38] !== t14) {
-		t15 = /*#__PURE__*/ jsxs(ListContext.Provider, {
+		$[34] = t14;
+		$[35] = variant;
+		$[36] = t15;
+	} else t15 = $[36];
+	let t16;
+	if ($[37] !== listContextValue || $[38] !== slots.heading || $[39] !== t15) {
+		t16 = /*#__PURE__*/ jsxs(ListContext.Provider, {
 			value: listContextValue,
-			children: [t11, t14]
+			children: [t12, t15]
 		});
-		$[36] = listContextValue;
-		$[37] = slots.heading;
-		$[38] = t14;
+		$[37] = listContextValue;
+		$[38] = slots.heading;
 		$[39] = t15;
-	} else t15 = $[39];
-	return t15;
+		$[40] = t16;
+	} else t16 = $[40];
+	return t16;
 };
 const List = fixedForwardRef(UnwrappedList);
 Object.assign(List, { displayName: "ActionList" });

package/dist/ActionList/index.d.ts

@@ -22,6 +22,7 @@ declare const ActionList: (<As extends React.ElementType = "ul">(props: Distribu
   role?: AriaRole;
   disableFocusZone?: boolean;
   className?: string;
+  disableItemGap?: boolean;
 } & {
   children?: import("react").ReactNode | undefined;
 }, "as"> & {

package/dist/ActionList/shared.d.ts

@@ -100,6 +100,10 @@ type ActionListProps<As extends React.ElementType = 'ul'> = PolymorphicProps<As,
    */
   disableFocusZone?: boolean;
   className?: string;
+  /**
+   * Disable the gap between items when this `ActionList` is rendered in a `NavList`.
+   */
+  disableItemGap?: boolean;
 }>>;
 //#endregion
 export { ActionListItemProps, ActionListProps };

package/dist/DataTable/DataTable.d.ts

@@ -1,11 +1,11 @@
-import { ObjectPaths } from "./utils.js";
-import { UniqueRow } from "./row.js";
+import { IsAny, ObjectPaths } from "./utils.js";
+import { DataTableData, DataTableRowGroup, UniqueRow } from "./row.js";
 import { SortDirection } from "./sorting.js";
 import { Column } from "./column.js";
-import React from "react";
+import { ReactElement } from "react";
 
 //#region src/DataTable/DataTable.d.ts
-type DataTableProps<Data extends UniqueRow> = {
+type DataTableBaseProps<Data extends UniqueRow> = {
   /**
    * Provide an id to an element which uniquely describes this table
    */
@@ -19,10 +19,6 @@ type DataTableProps<Data extends UniqueRow> = {
    * a cell
    */
   cellPadding?: 'condensed' | 'normal' | 'spacious';
-  /**
-   * Provide a collection of the rows which will be rendered inside of the table
-   */
-  data: Array<Data>;
   /**
    * Provide the columns for the table and the fields in `data` to which they
    * correspond
@@ -60,17 +56,21 @@ type DataTableProps<Data extends UniqueRow> = {
    */
   onToggleSort?: (columnId: ObjectPaths<Data> | string | number, direction: Exclude<SortDirection, 'NONE'>) => void;
 };
-declare function DataTable<Data extends UniqueRow>({
-  'aria-labelledby': labelledby,
-  'aria-describedby': describedby,
-  cellPadding,
-  columns,
-  data,
-  initialSortColumn,
-  initialSortDirection,
-  externalSorting,
-  getRowId,
-  onToggleSort
-}: DataTableProps<Data>): React.JSX.Element;
+type DataTableProps<Data extends UniqueRow> = DataTableBaseProps<Data> & {
+  /**
+   * Provide a collection of rows, row groups, or a mixture of both.
+   */
+  data: DataTableData<Data>;
+};
+type DataFromItem<Item> = Item extends DataTableRowGroup<infer Data> ? Data : Item extends UniqueRow ? Item : never;
+type DataFromInput<Input extends DataTableData<UniqueRow>> = IsAny<Input> extends true ? UniqueRow : DataFromItem<Input[number]>;
+type InferredDataTableProps<Input extends DataTableData<UniqueRow>> = DataTableBaseProps<DataFromInput<Input>> & {
+  data: Input & DataTableData<DataFromInput<Input>>;
+};
+interface DataTableComponent {
+  <Data extends UniqueRow>(props: DataTableProps<Data>): ReactElement;
+  <Input extends DataTableData<UniqueRow>>(props: InferredDataTableProps<Input>): ReactElement;
+}
+declare const DataTable: DataTableComponent;
 //#endregion
 export { DataTable, DataTableProps };

package/dist/DataTable/DataTable.js

@@ -1,13 +1,14 @@
 import { c } from "../utils/react-compiler-runtime.js";
 import { useTable } from "./useTable.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableSortHeader } from "./Table.js";
+import { TableGroup } from "./TableGroup.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/DataTable/DataTable.tsx
 function defaultGetRowId(row) {
 	return row.id;
 }
-function DataTable(t0) {
-	const $ = c(27);
+function DataTableImplementation(t0) {
+	const $ = c(28);
 	const { "aria-labelledby": labelledby, "aria-describedby": describedby, cellPadding, columns, data, initialSortColumn, initialSortDirection, externalSorting, getRowId: t1, onToggleSort } = t0;
 	const getRowId = t1 === void 0 ? defaultGetRowId : t1;
 	let t2;
@@ -28,13 +29,15 @@ function DataTable(t0) {
 		$[5] = initialSortDirection;
 		$[6] = t2;
 	} else t2 = $[6];
-	const { headers, rows, actions, gridTemplateColumns } = useTable(t2);
+	const { headers, bodies, actions, gridTemplateColumns } = useTable(t2);
+	const renderRow = _temp;
 	let t3;
 	if ($[7] !== actions || $[8] !== headers || $[9] !== onToggleSort) {
 		let t4;
 		if ($[11] !== actions || $[12] !== onToggleSort) {
 			t4 = (header) => {
 				if (header.isSortable()) return /*#__PURE__*/ jsx(TableSortHeader, {
+					id: header.domId,
 					align: header.column.align,
 					direction: header.getSortDirection(),
 					onToggleSort: () => {
@@ -45,6 +48,7 @@ function DataTable(t0) {
 					children: typeof header.column.header === "string" ? header.column.header : header.column.header()
 				}, header.id);
 				return /*#__PURE__*/ jsx(TableHeader, {
+					id: header.domId,
 					align: header.column.align,
 					children: typeof header.column.header === "string" ? header.column.header : header.column.header()
 				}, header.id);
@@ -66,43 +70,54 @@ function DataTable(t0) {
 		$[15] = t4;
 	} else t4 = $[15];
 	let t5;
-	if ($[16] !== rows) {
-		t5 = rows.map(_temp);
-		$[16] = rows;
-		$[17] = t5;
-	} else t5 = $[17];
-	let t6;
-	if ($[18] !== t5) {
-		t6 = /*#__PURE__*/ jsx(TableBody, { children: t5 });
+	if ($[16] !== bodies || $[17] !== headers.length) {
+		let t6;
+		if ($[19] !== headers.length) {
+			t6 = (body) => body.type === "row-group" ? /*#__PURE__*/ jsx(TableGroup, {
+				id: body.id,
+				label: body.label,
+				rowCount: body.rows.length,
+				colSpan: headers.length,
+				"aria-label": body["aria-label"],
+				children: body.rows.map(renderRow)
+			}, body.key) : /*#__PURE__*/ jsx(TableBody, { children: body.rows.map(renderRow) }, body.key);
+			$[19] = headers.length;
+			$[20] = t6;
+		} else t6 = $[20];
+		t5 = bodies.map(t6);
+		$[16] = bodies;
+		$[17] = headers.length;
 		$[18] = t5;
-		$[19] = t6;
-	} else t6 = $[19];
-	let t7;
-	if ($[20] !== cellPadding || $[21] !== describedby || $[22] !== gridTemplateColumns || $[23] !== labelledby || $[24] !== t4 || $[25] !== t6) {
-		t7 = /*#__PURE__*/ jsxs(Table, {
+	} else t5 = $[18];
+	let t6;
+	if ($[21] !== cellPadding || $[22] !== describedby || $[23] !== gridTemplateColumns || $[24] !== labelledby || $[25] !== t4 || $[26] !== t5) {
+		t6 = /*#__PURE__*/ jsxs(Table, {
 			"aria-labelledby": labelledby,
 			"aria-describedby": describedby,
 			cellPadding,
 			gridTemplateColumns,
-			children: [t4, t6]
+			children: [t4, t5]
 		});
-		$[20] = cellPadding;
-		$[21] = describedby;
-		$[22] = gridTemplateColumns;
-		$[23] = labelledby;
-		$[24] = t4;
-		$[25] = t6;
-		$[26] = t7;
-	} else t7 = $[26];
-	return t7;
+		$[21] = cellPadding;
+		$[22] = describedby;
+		$[23] = gridTemplateColumns;
+		$[24] = labelledby;
+		$[25] = t4;
+		$[26] = t5;
+		$[27] = t6;
+	} else t6 = $[27];
+	return t6;
 }
 function _temp(row) {
 	return /*#__PURE__*/ jsx(TableRow, { children: row.getCells().map((cell) => /*#__PURE__*/ jsx(TableCell, {
+		id: cell.domId,
 		scope: cell.rowHeader ? "row" : void 0,
 		align: cell.column.align,
+		headers: cell.headers,
 		children: cell.column.renderCell ? cell.column.renderCell(row.getValue()) : cell.getValue()
 	}, cell.id)) }, row.id);
 }
 _temp.displayName = "_temp";
+const DataTable = DataTableImplementation;
 //#endregion
 export { DataTable };