@primer/react 38.35.1-rc.c9c0769e5 → 38.35.1

package/CHANGELOG.md

@@ -6,6 +6,8 @@
 
 - [#8258](https://github.com/primer/react/pull/8258) [`edbcd94`](https://github.com/primer/react/commit/edbcd942354ff45148c2623be8b543ef8789a20f) Thanks [@llastflowers](https://github.com/llastflowers)! - Update `AvatarStack` to not reserve space when collapsed
 
+- [#8273](https://github.com/primer/react/pull/8273) [`0c1e401`](https://github.com/primer/react/commit/0c1e401b6b0d57f95f8115ea90af78281751a766) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - NavList: Exclude group headings from navigation list item counts
+
 ## 38.35.0
 
 ### Minor Changes

package/dist/ActionList/Group-d89306a8.css

@@ -0,0 +1,2 @@
+.prc-ActionList-Group-lMIPQ{list-style:none}.prc-ActionList-Group-lMIPQ:not(:first-child){margin-block-start:var(--base-size-8,.5rem)}.prc-ActionList-GroupList-V5B3-{padding-inline-start:0}.prc-ActionList-GroupHeadingWrap-laXcX{color:var(--fgColor-muted,#59636e);display:flex;flex-direction:column;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);line-height:18px;padding-block:var(--base-size-6,.375rem);padding-inline:var(--base-size-16,1rem)}.prc-ActionList-GroupHeadingWrap-laXcX:where([data-variant=filled]){background:var(--bgColor-muted,#f6f8fa);border-bottom:var(--borderWidth-thin,.0625rem) solid var(--borderColor-muted,#d1d9e0b3);border-top:var(--borderWidth-thin,.0625rem) solid var(--borderColor-muted,#d1d9e0b3);margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,.0625rem));padding-inline:var(--base-size-16,1rem)}.prc-ActionList-GroupHeadingWrap-laXcX:where([data-variant=filled]):first-child{margin-block-start:0}.prc-ActionList-GroupHeading-STzxi{align-self:flex-start;color:var(--fgColor-muted,#59636e);font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);margin:0}.prc-ActionList-GroupHeadingWrap-laXcX[data-has-trailing-action]{align-items:center;flex-direction:row;gap:var(--base-size-8,.5rem);justify-content:space-between}.prc-ActionList-GroupHeadingWrap-laXcX[data-has-trailing-action]>.prc-ActionList-GroupHeading-STzxi{align-self:center}.prc-ActionList-GroupHeadingTrailingAction-jnb64{align-items:center;display:inline-flex;margin-inline-start:auto}
+/*# sourceMappingURL=Group-d89306a8.css.map */

package/dist/ActionList/Group-d89306a8.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ActionList/Group.module.css.js"],"names":[],"mappings":"AAAA,4BACE,eAKF,CAHE,8CACE,2CACF,CAGF,gCACE,sBACF,CAEA,uCAQE,kCAA2B,CAP3B,YAAa,CAQb,qBAAsB,CAPtB,4CAAsC,CACtC,gDAA6C,CAI7C,gBAAiB,CAIjB,wCAAiC,CADjC,uCAoBF,CAjBE,oEAIE,uCAAgC,CAEhC,uFAAqE,CADrE,oFAAkE,CAFlE,yCAAoC,CADpC,oFAAsE,CAKtE,uCAKF,CAHE,gFACE,oBACF,CAQJ,mCAKE,qBAAsB,CADtB,kCAA2B,CAF3B,4CAAsC,CACtC,gDAA6C,CAF7C,QAKF,CAEA,iEAEE,kBAAmB,CADnB,kBAAmB,CAGnB,4BAAuB,CADvB,6BAMF,CAHE,oGACE,iBACF,CAGF,iDAEE,kBAAmB,CADnB,mBAAoB,CAEpB,wBACF","file":"Group-d89306a8.css","sourcesContent":[".Group {\n  list-style: none;\n\n  &:not(:first-child) {\n    margin-block-start: var(--base-size-8);\n  }\n}\n\n.GroupList {\n  padding-inline-start: 0;\n}\n\n.GroupHeadingWrap {\n  display: flex;\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-semibold);\n\n  /* line-height: var(--text-body-lineHeight-small); use when FF rolls out */\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 18px;\n  color: var(--fgColor-muted);\n  flex-direction: column;\n  padding-inline: var(--base-size-16);\n  padding-block: var(--base-size-6);\n\n  &:where([data-variant='filled']) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n    margin-block-end: var(--base-size-8);\n    background: var(--bgColor-muted);\n    border-top: solid var(--borderWidth-thin) var(--borderColor-muted);\n    border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted);\n    padding-inline: var(--base-size-16);\n\n    &:first-child {\n      margin-block-start: 0;\n    }\n  }\n\n  /* & + ul:has(.GroupHeadingWrap) {\n    outline: solid 1px red;\n  } */\n}\n\n.GroupHeading {\n  margin: 0;\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-muted);\n  align-self: flex-start;\n}\n\n.GroupHeadingWrap[data-has-trailing-action] {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--base-size-8);\n\n  & > .GroupHeading {\n    align-self: center;\n  }\n}\n\n.GroupHeadingTrailingAction {\n  display: inline-flex;\n  align-items: center;\n  margin-inline-start: auto;\n}\n"]}

package/dist/ActionList/Group.module.css.js

@@ -1,9 +1,9 @@
-import "./Group-efcb39da.css";
+import "./Group-d89306a8.css";
 //#region src/ActionList/Group.module.css.js
 var Group_module_css_default = {
 	"Group": "prc-ActionList-Group-lMIPQ",
-	"GroupHeadingWrap": "prc-ActionList-GroupHeadingWrap-laXcX",
 	"GroupList": "prc-ActionList-GroupList-V5B3-",
+	"GroupHeadingWrap": "prc-ActionList-GroupHeadingWrap-laXcX",
 	"GroupHeading": "prc-ActionList-GroupHeading-STzxi",
 	"GroupHeadingTrailingAction": "prc-ActionList-GroupHeadingTrailingAction-jnb64"
 };

package/dist/NavList/NavList.d.ts

@@ -1,4 +1,4 @@
-import { FCWithSlotMarker } from "../utils/types/Slots.js";
+import { FCWithSlotMarker, WithSlotMarker } from "../utils/types/Slots.js";
 import { ForwardRefComponent } from "../utils/polymorphic.js";
 import { DistributiveOmit, PolymorphicProps } from "../utils/modern-polymorphic.js";
 import { ActionListTrailingActionProps } from "../ActionList/TrailingAction.js";
@@ -71,7 +71,7 @@ declare const NavList: React.ForwardRefExoticComponent<Omit<NavListProps, "ref">
   Divider: FCWithSlotMarker<React.PropsWithChildren<ActionListDividerProps>>;
   Group: React.FC<NavListGroupProps>;
   GroupExpand: React.ForwardRefExoticComponent<NavListGroupExpandProps & React.RefAttributes<HTMLButtonElement>>;
-  GroupHeading: React.FC<ActionListGroupHeadingProps>;
+  GroupHeading: WithSlotMarker<React.FC<ActionListGroupHeadingProps>>;
 };
 //#endregion
 export { NavList, NavListDividerProps, NavListGroupExpandProps, NavListGroupHeadingProps, NavListGroupProps, NavListHeadingProps, NavListItemProps, NavListLeadingVisualProps, NavListProps, NavListSubNavProps, NavListTrailingVisualProps };

package/dist/NavList/NavList.js

@@ -3,6 +3,7 @@ import { useId as useId$1 } from "../hooks/useId.js";
 import { useSlots } from "../hooks/useSlots.js";
 import { fixedForwardRef } from "../utils/modern-polymorphic.js";
 import _VisuallyHidden_module_css_default from "../_VisuallyHidden.module.css.js";
+import { asSlot } from "../utils/as-slot.js";
 import { ActionListContainerContext } from "../ActionList/ActionListContainerContext.js";
 import Heading$1 from "../Heading/Heading.js";
 import ActionList_module_css_default from "../ActionList/ActionList.module.css.js";
@@ -374,8 +375,23 @@ const Divider = ActionList.Divider;
 Divider.displayName = "NavList.Divider";
 const TrailingAction = ActionList.TrailingAction;
 TrailingAction.displayName = "NavList.TrailingAction";
+function flattenFragmentChildren(children) {
+	const flattenedChildren = [];
+	React.Children.forEach(children, (child) => {
+		if (/*#__PURE__*/ React.isValidElement(child) && child.type === React.Fragment) flattenedChildren.push(...flattenFragmentChildren(child.props.children));
+		else flattenedChildren.push(child);
+	});
+	return flattenedChildren;
+}
+function removeChildFromFragments(children, childToRemove) {
+	return React.Children.map(children, (child) => {
+		if (child === childToRemove) return null;
+		if (/*#__PURE__*/ React.isValidElement(child) && child.type === React.Fragment) return /*#__PURE__*/ React.cloneElement(child, void 0, removeChildFromFragments(child.props.children, childToRemove));
+		return child;
+	});
+}
 const Group = (t0) => {
-	const $ = c(19);
+	const $ = c(26);
 	let children;
 	let hideDivider;
 	let props;
@@ -395,48 +411,69 @@ const Group = (t0) => {
 	}
 	const headingLevel = React.useContext(NavListHeadingLevelContext);
 	let t1;
-	if ($[5] !== headingLevel) {
-		t1 = headingLevel ? levelToHeadingTag(headingLevel + 1) : "h3";
-		$[5] = headingLevel;
+	if ($[5] !== children) {
+		t1 = flattenFragmentChildren(children);
+		$[5] = children;
 		$[6] = t1;
 	} else t1 = $[6];
-	const groupHeadingAs = t1;
 	let t2;
-	if ($[7] !== hideDivider) {
-		t2 = !hideDivider && /*#__PURE__*/ jsx(ActionList.Divider, {});
-		$[7] = hideDivider;
-		$[8] = t2;
-	} else t2 = $[8];
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { groupHeading: GroupHeading };
+		$[7] = t2;
+	} else t2 = $[7];
+	const [slots] = useSlots(t1, t2);
 	let t3;
-	if ($[9] !== groupHeadingAs || $[10] !== title) {
-		t3 = title ? /*#__PURE__*/ jsx(ActionList.GroupHeading, {
+	if ($[8] !== children || $[9] !== slots.groupHeading) {
+		t3 = slots.groupHeading ? removeChildFromFragments(children, slots.groupHeading) : children;
+		$[8] = children;
+		$[9] = slots.groupHeading;
+		$[10] = t3;
+	} else t3 = $[10];
+	const childrenWithoutHeading = t3;
+	let t4;
+	if ($[11] !== headingLevel) {
+		t4 = headingLevel ? levelToHeadingTag(headingLevel + 1) : "h3";
+		$[11] = headingLevel;
+		$[12] = t4;
+	} else t4 = $[12];
+	const groupHeadingAs = t4;
+	let t5;
+	if ($[13] !== hideDivider) {
+		t5 = !hideDivider && /*#__PURE__*/ jsx(ActionList.Divider, {});
+		$[13] = hideDivider;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== groupHeadingAs || $[16] !== slots.groupHeading || $[17] !== title) {
+		t6 = slots.groupHeading ? /*#__PURE__*/ React.cloneElement(slots.groupHeading, { headingWrapElement: "div" }) : title ? /*#__PURE__*/ jsx(ActionList.GroupHeading, {
 			as: groupHeadingAs,
 			"data-component": "ActionList.GroupHeading",
 			children: title
 		}) : null;
-		$[9] = groupHeadingAs;
-		$[10] = title;
-		$[11] = t3;
-	} else t3 = $[11];
-	let t4;
-	if ($[12] !== children || $[13] !== props || $[14] !== t3) {
-		t4 = /*#__PURE__*/ jsxs(ActionList.Group, {
+		$[15] = groupHeadingAs;
+		$[16] = slots.groupHeading;
+		$[17] = title;
+		$[18] = t6;
+	} else t6 = $[18];
+	let t7;
+	if ($[19] !== childrenWithoutHeading || $[20] !== props || $[21] !== t6) {
+		t7 = /*#__PURE__*/ jsxs(ActionList.Group, {
 			...props,
-			children: [t3, children]
+			children: [t6, childrenWithoutHeading]
 		});
-		$[12] = children;
-		$[13] = props;
-		$[14] = t3;
-		$[15] = t4;
-	} else t4 = $[15];
-	let t5;
-	if ($[16] !== t2 || $[17] !== t4) {
-		t5 = /*#__PURE__*/ jsxs(Fragment, { children: [t2, t4] });
-		$[16] = t2;
-		$[17] = t4;
-		$[18] = t5;
-	} else t5 = $[18];
-	return t5;
+		$[19] = childrenWithoutHeading;
+		$[20] = props;
+		$[21] = t6;
+		$[22] = t7;
+	} else t7 = $[22];
+	let t8;
+	if ($[23] !== t5 || $[24] !== t7) {
+		t8 = /*#__PURE__*/ jsxs(Fragment, { children: [t5, t7] });
+		$[23] = t5;
+		$[24] = t7;
+		$[25] = t8;
+	} else t8 = $[25];
+	return t8;
 };
 const GroupExpand = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
 	const $ = c(23);
@@ -534,7 +571,7 @@ const GroupExpand = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
 * This is an alternative to the `title` prop on `NavList.Group`.
 * It was primarily added to allow links in group headings.
 */
-const GroupHeading = (t0) => {
+const GroupHeadingImpl = (t0) => {
 	const $ = c(13);
 	let as;
 	let className;
@@ -582,6 +619,7 @@ const GroupHeading = (t0) => {
 	} else t3 = $[12];
 	return t3;
 };
+const GroupHeading = asSlot(GroupHeadingImpl, ActionList.GroupHeading);
 const NavList = Object.assign(Root, {
 	Description: ActionList.Description,
 	Heading,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.35.1-rc.c9c0769e5",
+  "version": "38.35.1",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -110,12 +110,12 @@
     "@primer/doc-gen": "^0.0.1",
     "@primer/react-compiler-check": "^0.0.0",
     "@rolldown/plugin-babel": "^0.2.3",
-    "@storybook/addon-a11y": "10.5.3",
-    "@storybook/addon-docs": "10.5.3",
-    "@storybook/addon-links": "10.5.3",
+    "@storybook/addon-a11y": "10.5.5",
+    "@storybook/addon-docs": "10.5.5",
+    "@storybook/addon-links": "10.5.5",
     "@storybook/addon-mcp": "^0.7.0",
     "@storybook/icons": "^2.1.0",
-    "@storybook/react-vite": "10.5.3",
+    "@storybook/react-vite": "10.5.5",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^16.3.0",
@@ -172,7 +172,7 @@
     "rolldown-plugin-dts": "^0.26.0",
     "rolldown-plugin-import-css": "^0.0.0",
     "rolldown-plugin-preserve-directives": "^0.0.0",
-    "storybook": "10.5.3",
+    "storybook": "10.5.5",
     "terser": "5.36.0",
     "ts-toolbelt": "9.6.0",
     "tsx": "4.20.3",

package/dist/ActionList/Group-efcb39da.css

@@ -1,2 +0,0 @@
-.prc-ActionList-Group-lMIPQ{list-style:none}.prc-ActionList-Group-lMIPQ:not(:first-child){margin-block-start:var(--base-size-8,.5rem)}.prc-ActionList-Group-lMIPQ:not(:first-child):has(.prc-ActionList-GroupHeadingWrap-laXcX+ul>.prc-ActionList-GroupHeadingWrap-laXcX)>.prc-ActionList-GroupHeadingWrap-laXcX{display:none}.prc-ActionList-GroupList-V5B3-{padding-inline-start:0}.prc-ActionList-GroupHeadingWrap-laXcX{color:var(--fgColor-muted,#59636e);display:flex;flex-direction:column;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);line-height:18px;padding-block:var(--base-size-6,.375rem);padding-inline:var(--base-size-16,1rem)}.prc-ActionList-GroupHeadingWrap-laXcX:where([data-variant=filled]){background:var(--bgColor-muted,#f6f8fa);border-bottom:var(--borderWidth-thin,.0625rem) solid var(--borderColor-muted,#d1d9e0b3);border-top:var(--borderWidth-thin,.0625rem) solid var(--borderColor-muted,#d1d9e0b3);margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,.0625rem));padding-inline:var(--base-size-16,1rem)}.prc-ActionList-GroupHeadingWrap-laXcX:where([data-variant=filled]):first-child{margin-block-start:0}.prc-ActionList-GroupHeading-STzxi{align-self:flex-start;color:var(--fgColor-muted,#59636e);font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);margin:0}.prc-ActionList-GroupHeadingWrap-laXcX[data-has-trailing-action]{align-items:center;flex-direction:row;gap:var(--base-size-8,.5rem);justify-content:space-between}.prc-ActionList-GroupHeadingWrap-laXcX[data-has-trailing-action]>.prc-ActionList-GroupHeading-STzxi{align-self:center}.prc-ActionList-GroupHeadingTrailingAction-jnb64{align-items:center;display:inline-flex;margin-inline-start:auto}
-/*# sourceMappingURL=Group-efcb39da.css.map */

package/dist/ActionList/Group-efcb39da.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/ActionList/Group.module.css.js"],"names":[],"mappings":"AAAA,4BACE,eAcF,CAZE,8CACE,2CAUF,CAJI,2KACE,YACF,CAKN,gCACE,sBACF,CAEA,uCAQE,kCAA2B,CAP3B,YAAa,CAQb,qBAAsB,CAPtB,4CAAsC,CACtC,gDAA6C,CAI7C,gBAAiB,CAIjB,wCAAiC,CADjC,uCAoBF,CAjBE,oEAIE,uCAAgC,CAEhC,uFAAqE,CADrE,oFAAkE,CAFlE,yCAAoC,CADpC,oFAAsE,CAKtE,uCAKF,CAHE,gFACE,oBACF,CAQJ,mCAKE,qBAAsB,CADtB,kCAA2B,CAF3B,4CAAsC,CACtC,gDAA6C,CAF7C,QAKF,CAEA,iEAEE,kBAAmB,CADnB,kBAAmB,CAGnB,4BAAuB,CADvB,6BAMF,CAHE,oGACE,iBACF,CAGF,iDAEE,kBAAmB,CADnB,mBAAoB,CAEpB,wBACF","file":"Group-efcb39da.css","sourcesContent":[".Group {\n  list-style: none;\n\n  &:not(:first-child) {\n    margin-block-start: var(--base-size-8);\n\n    /* If somebody tries to pass the `title` prop AND a `NavList.GroupHeading` as a child, hide the `ActionList.GroupHeading */\n    /* stylelint-disable-next-line selector-max-specificity, selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n    &:has(.GroupHeadingWrap + ul > .GroupHeadingWrap) {\n      /* stylelint-disable-next-line selector-max-specificity */\n      & > .GroupHeadingWrap {\n        display: none;\n      }\n    }\n  }\n}\n\n.GroupList {\n  padding-inline-start: 0;\n}\n\n.GroupHeadingWrap {\n  display: flex;\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-semibold);\n\n  /* line-height: var(--text-body-lineHeight-small); use when FF rolls out */\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 18px;\n  color: var(--fgColor-muted);\n  flex-direction: column;\n  padding-inline: var(--base-size-16);\n  padding-block: var(--base-size-6);\n\n  &:where([data-variant='filled']) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n    margin-block-end: var(--base-size-8);\n    background: var(--bgColor-muted);\n    border-top: solid var(--borderWidth-thin) var(--borderColor-muted);\n    border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted);\n    padding-inline: var(--base-size-16);\n\n    &:first-child {\n      margin-block-start: 0;\n    }\n  }\n\n  /* & + ul:has(.GroupHeadingWrap) {\n    outline: solid 1px red;\n  } */\n}\n\n.GroupHeading {\n  margin: 0;\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-muted);\n  align-self: flex-start;\n}\n\n.GroupHeadingWrap[data-has-trailing-action] {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--base-size-8);\n\n  & > .GroupHeading {\n    align-self: center;\n  }\n}\n\n.GroupHeadingTrailingAction {\n  display: inline-flex;\n  align-items: center;\n  margin-inline-start: auto;\n}\n"]}