chore: add missing slot checks (#6996)

Author: francinelucca

.changeset/quick-queens-rescue.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+chore: add missing slot checks to CheckboxOrRadioGroup, SelectPanel, ActionMenu, Treeview, SegmentedControl and PageHeader

packages/react/src/ActionMenu/ActionMenu.tsx

@@ -101,7 +101,9 @@ const Menu: FCWithSlotMarker<React.PropsWithChildren<ActionMenuProps>> = ({
   )
 
   const menuButtonChild = React.Children.toArray(children).find(
-    child => React.isValidElement<ActionMenuButtonProps>(child) && (child.type === MenuButton || child.type === Anchor),
+    child =>
+      React.isValidElement<ActionMenuButtonProps>(child) &&
+      (child.type === MenuButton || child.type === Anchor || isSlot(child, Anchor) || isSlot(child, MenuButton)),
   )
   const menuButtonChildId = React.isValidElement(menuButtonChild) ? menuButtonChild.props.id : undefined
 
@@ -117,7 +119,7 @@ const Menu: FCWithSlotMarker<React.PropsWithChildren<ActionMenuProps>> = ({
     if (child.type === Tooltip || isSlot(child, Tooltip)) {
       // tooltip trigger
       const anchorChildren = child.props.children
-      if (anchorChildren.type === MenuButton) {
+      if (anchorChildren.type === MenuButton || isSlot(anchorChildren, MenuButton)) {
         // eslint-disable-next-line react-compiler/react-compiler
         renderAnchor = anchorProps => {
           // We need to attach the anchor props to the tooltip trigger (ActionMenu.Button's grandchild) not the tooltip itself.
@@ -129,7 +131,7 @@ const Menu: FCWithSlotMarker<React.PropsWithChildren<ActionMenuProps>> = ({
         }
       }
       return null
-    } else if (child.type === Anchor) {
+    } else if (child.type === Anchor || isSlot(child, Anchor)) {
       const anchorChildren = child.props.children
       const isWrappedWithTooltip =
         anchorChildren !== undefined ? anchorChildren.type === Tooltip || isSlot(anchorChildren, Tooltip) : false
@@ -151,7 +153,7 @@ const Menu: FCWithSlotMarker<React.PropsWithChildren<ActionMenuProps>> = ({
         renderAnchor = anchorProps => React.cloneElement(child, anchorProps)
       }
       return null
-    } else if (child.type === MenuButton) {
+    } else if (child.type === MenuButton || isSlot(child, MenuButton)) {
       renderAnchor = anchorProps => React.cloneElement(child, mergeAnchorHandlers(anchorProps, child.props))
       return null
     } else {

packages/react/src/PageHeader/PageHeader.tsx

@@ -10,10 +10,11 @@ import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../uti
 import {areAllValuesTheSame, haveRegularAndWideSameValue} from '../utils/getBreakpointDeclarations'
 import {warning} from '../utils/warning'
 import {useProvidedRefOrCreate} from '../hooks'
-import type {AriaRole} from '../utils/types'
+import type {AriaRole, FCWithSlotMarker} from '../utils/types'
 import {clsx} from 'clsx'
 
 import classes from './PageHeader.module.css'
+import {isSlot} from '../utils/is-slot'
 
 // Types that are shared between PageHeader children components
 export type ChildrenPropTypes = {
@@ -74,10 +75,10 @@ const Root = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageHeader
         if (!titleArea) return
 
         for (const child of React.Children.toArray(children)) {
-          if (React.isValidElement(child) && child.type === ContextArea) {
+          if (React.isValidElement(child) && (child.type === ContextArea || isSlot(child, ContextArea))) {
             hasContextArea = true
           }
-          if (React.isValidElement(child) && child.type === LeadingAction) {
+          if (React.isValidElement(child) && (child.type === LeadingAction || isSlot(child, LeadingAction))) {
             hasLeadingAction = true
           }
         }
@@ -119,7 +120,7 @@ const Root = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageHeader
 // to manage their custom visibility but consumers should be careful if they choose to hide this on narrow viewports.
 // PageHeader.ContextArea Sub Components: PageHeader.ParentLink, PageHeader.ContextBar, PageHeader.ContextAreaActions
 // ---------------------------------------------------------------------
-const ContextArea: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
+const ContextArea: FCWithSlotMarker<React.PropsWithChildren<ChildrenPropTypes>> = ({
   children,
   className,
   hidden = hiddenOnRegularAndWide,
@@ -130,6 +131,9 @@ const ContextArea: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
     </div>
   )
 }
+
+ContextArea.__SLOT__ = Symbol('PageHeader.ContextArea')
+
 type LinkProps = Pick<
   React.AnchorHTMLAttributes<HTMLAnchorElement> & BaseLinkProps,
   'download' | 'href' | 'hrefLang' | 'media' | 'ping' | 'rel' | 'target' | 'type' | 'referrerPolicy' | 'as'
@@ -219,7 +223,7 @@ TitleArea.displayName = 'TitleArea'
 
 // PageHeader.LeadingAction and PageHeader.TrailingAction should only be visible on regular viewports.
 // So they come as hidden on narrow viewports by default and their visibility can be managed by their `hidden` prop.
-const LeadingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
+const LeadingAction: FCWithSlotMarker<React.PropsWithChildren<ChildrenPropTypes>> = ({
   children,
   className,
   hidden = hiddenOnNarrow,
@@ -235,6 +239,8 @@ const LeadingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
   )
 }
 
+LeadingAction.__SLOT__ = Symbol('PageHeader.LeadingAction')
+
 // This is reserved for only breadcrumbs.
 const Breadcrumbs: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, className, hidden = false}) => {
   return (

packages/react/src/SegmentedControl/SegmentedControl.tsx

@@ -90,7 +90,10 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
     return null
   }
   const getChildText = (childArg: React.ReactNode) => {
-    if (React.isValidElement<SegmentedControlButtonProps>(childArg) && childArg.type === Button) {
+    if (
+      React.isValidElement<SegmentedControlButtonProps>(childArg) &&
+      (childArg.type === Button || isSlot(childArg, Button))
+    ) {
       return childArg.props.children
     }
 

packages/react/src/TreeView/TreeView.tsx

@@ -27,6 +27,8 @@ import {ActionList} from '../ActionList'
 import {getAccessibleKeybindingHintString} from '../KeybindingHint'
 import {useIsMacOS} from '../hooks'
 import {Tooltip} from '../TooltipV2'
+import {isSlot} from '../utils/is-slot'
+import type {FCWithSlotMarker} from '../utils/types'
 
 // ----------------------------------------------------------------------------
 // Context
@@ -457,7 +459,7 @@ export type TreeViewSubTreeProps = {
   'aria-label'?: string
 }
 
-const SubTree: React.FC<TreeViewSubTreeProps> = ({count, state, children, 'aria-label': ariaLabel}) => {
+const SubTree: FCWithSlotMarker<TreeViewSubTreeProps> = ({count, state, children, 'aria-label': ariaLabel}) => {
   const {announceUpdate} = React.useContext(RootContext)
   const {itemId, isExpanded, isSubTreeEmpty, setIsSubTreeEmpty} = React.useContext(ItemContext)
   const loadingItemRef = React.useRef<HTMLElement>(null)
@@ -573,6 +575,7 @@ const SubTree: React.FC<TreeViewSubTreeProps> = ({count, state, children, 'aria-
 }
 
 SubTree.displayName = 'TreeView.SubTree'
+SubTree.__SLOT__ = Symbol('TreeView.SubTree')
 
 function usePreviousValue<T>(value: T): T {
   const ref = React.useRef(value)
@@ -638,11 +641,11 @@ const EmptyItem = React.forwardRef<HTMLElement>((props, ref) => {
 function useSubTree(children: React.ReactNode) {
   return React.useMemo(() => {
     const subTree = React.Children.toArray(children).find(
-      child => React.isValidElement(child) && child.type === SubTree,
+      child => React.isValidElement(child) && (child.type === SubTree || isSlot(child, SubTree)),
     )
 
     const childrenWithoutSubTree = React.Children.toArray(children).filter(
-      child => !(React.isValidElement(child) && child.type === SubTree),
+      child => !(React.isValidElement(child) && (child.type === SubTree || isSlot(child, SubTree))),
     )
 
     return {

packages/react/src/experimental/SelectPanel2/SelectPanel.tsx

@@ -27,7 +27,8 @@ import {clsx} from 'clsx'
 
 import classes from './SelectPanel.module.css'
 import type {PositionSettings} from '@primer/behaviors'
-import type {FCWithSlotMarker} from '../../utils/types'
+import type {FCWithSlotMarker, WithSlotMarker} from '../../utils/types'
+import {isSlot} from '../../utils/is-slot'
 
 const SelectPanelContext = React.createContext<{
   title: string
@@ -124,7 +125,7 @@ const Panel: React.FC<SelectPanelProps> = ({
   }
 
   const contents = React.Children.map(props.children, child => {
-    if (React.isValidElement(child) && child.type === SelectPanelButton) {
+    if (React.isValidElement(child) && (child.type === SelectPanelButton || isSlot(child, SelectPanelButton))) {
       // eslint-disable-next-line react-compiler/react-compiler
       Anchor = React.cloneElement(child, {
         // @ts-ignore TODO
@@ -339,7 +340,9 @@ const SelectPanelButton = React.forwardRef<HTMLButtonElement, ButtonProps>((prop
   } else {
     return <Button ref={anchorRef} {...props} />
   }
-})
+}) as WithSlotMarker<React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>>
+
+SelectPanelButton.__SLOT__ = Symbol('SelectPanel.Button')
 
 const SelectPanelHeader: FCWithSlotMarker<React.ComponentPropsWithoutRef<'div'> & {onBack?: () => void}> = ({
   children,

packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx

@@ -9,6 +9,7 @@ import VisuallyHidden from '../../../_VisuallyHidden'
 import {useSlots} from '../../../hooks/useSlots'
 import classes from './CheckboxOrRadioGroup.module.css'
 import {clsx} from 'clsx'
+import {isSlot} from '../../../utils/is-slot'
 
 export type CheckboxOrRadioGroupProps = {
   /** Class name for custom styling */
@@ -46,13 +47,21 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
     validation: CheckboxOrRadioGroupValidation,
   })
   const labelChild = React.Children.toArray(children).find(
-    child => React.isValidElement(child) && child.type === CheckboxOrRadioGroupLabel,
+    child =>
+      React.isValidElement(child) &&
+      (child.type === CheckboxOrRadioGroupLabel || isSlot(child, CheckboxOrRadioGroupLabel)),
   )
   const validationChild = React.Children.toArray(children).find(child =>
-    React.isValidElement(child) && child.type === CheckboxOrRadioGroupValidation ? child : null,
+    React.isValidElement(child) &&
+    (child.type === CheckboxOrRadioGroupValidation || isSlot(child, CheckboxOrRadioGroupValidation))
+      ? child
+      : null,
   )
   const captionChild = React.Children.toArray(children).find(child =>
-    React.isValidElement(child) && child.type === CheckboxOrRadioGroupCaption ? child : null,
+    React.isValidElement(child) &&
+    (child.type === CheckboxOrRadioGroupCaption || isSlot(child, CheckboxOrRadioGroupCaption))
+      ? child
+      : null,
   )
   const id = useId(idProp)
   const validationMessageId = validationChild ? `${id}-validationMessage` : undefined