Codemod for react 18 children types

.changeset/cyan-frogs-pump.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+update types to allow children for react 18

src/ActionList/Description.tsx

@@ -14,7 +14,11 @@ export type ActionListDescriptionProps = {
   variant?: 'inline' | 'block'
 } & SxProp
 
-export const Description: React.FC<ActionListDescriptionProps> = ({variant = 'inline', sx = {}, ...props}) => {
+export const Description: React.FC<React.PropsWithChildren<ActionListDescriptionProps>> = ({
+  variant = 'inline',
+  sx = {},
+  ...props
+}) => {
   const styles = {
     fontSize: 0,
     lineHeight: '16px',

src/ActionList/Divider.tsx

@@ -9,7 +9,7 @@ export type ActionListDividerProps = SxProp
 /**
  * Visually separates `Item`s or `Group`s in an `ActionList`.
  */
-export const Divider: React.FC<ActionListDividerProps> = ({sx = {}}) => {
+export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>> = ({sx = {}}) => {
   return (
     <Box
       as="li"

src/ActionList/Group.tsx

@@ -35,7 +35,7 @@ export type ActionListGroupProps = {
 type ContextProps = Pick<ActionListGroupProps, 'selectionVariant'>
 export const GroupContext = React.createContext<ContextProps>({})
 
-export const Group: React.FC<ActionListGroupProps> = ({
+export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({
   title,
   variant = 'subtle',
   auxiliaryText,
@@ -82,7 +82,7 @@ export type HeaderProps = Pick<ActionListGroupProps, 'variant' | 'title' | 'auxi
  *
  * For visual presentation only. It's hidden from screen readers.
  */
-const Header: React.FC<HeaderProps> = ({variant, title, auxiliaryText, labelId, ...props}) => {
+const Header: React.FC<React.PropsWithChildren<HeaderProps>> = ({variant, title, auxiliaryText, labelId, ...props}) => {
   const {variant: listVariant} = React.useContext(ListContext)
 
   const styles = {

src/ActionList/Item.tsx

@@ -81,7 +81,7 @@ export type ActionListItemProps = {
   /**
    * Private API for use internally only. Used by LinkItem to wrap contents in an anchor
    */
-  _PrivateItemWrapper?: React.FC
+  _PrivateItemWrapper?: React.FC<React.PropsWithChildren<unknown>>
 } & SxProp
 
 const {Slots, Slot} = createSlots(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual'])
@@ -302,7 +302,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
 
 Item.displayName = 'ActionList.Item'
 
-const ConditionalBox: React.FC<{if: boolean} & BoxProps> = props => {
+const ConditionalBox: React.FC<React.PropsWithChildren<{if: boolean} & BoxProps>> = props => {
   const {if: condition, ...rest} = props
 
   if (condition) return <Box {...rest}>{props.children}</Box>

src/ActionList/Selection.tsx

@@ -6,7 +6,7 @@ import {ActionListItemProps} from './Item'
 import {LeadingVisualContainer} from './Visuals'
 
 type SelectionProps = Pick<ActionListItemProps, 'selected'>
-export const Selection: React.FC<SelectionProps> = ({selected}) => {
+export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({selected}) => {
   const {selectionVariant: listSelectionVariant} = React.useContext(ListContext)
   const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
 

src/ActionList/Visuals.tsx

@@ -6,7 +6,7 @@ import {getVariantStyles, Slot, ItemContext, TEXT_ROW_HEIGHT} from './Item'
 
 type VisualProps = SxProp & React.HTMLAttributes<HTMLSpanElement>
 
-export const LeadingVisualContainer: React.FC<VisualProps> = ({sx = {}, ...props}) => {
+export const LeadingVisualContainer: React.FC<React.PropsWithChildren<VisualProps>> = ({sx = {}, ...props}) => {
   return (
     <Box
       as="span"
@@ -29,7 +29,7 @@ export const LeadingVisualContainer: React.FC<VisualProps> = ({sx = {}, ...props
 }
 
 export type ActionListLeadingVisualProps = VisualProps
-export const LeadingVisual: React.FC<VisualProps> = ({sx = {}, ...props}) => {
+export const LeadingVisual: React.FC<React.PropsWithChildren<VisualProps>> = ({sx = {}, ...props}) => {
   return (
     <Slot name="LeadingVisual">
       {({variant, disabled}: ItemContext) => (
@@ -51,7 +51,7 @@ export const LeadingVisual: React.FC<VisualProps> = ({sx = {}, ...props}) => {
 }
 
 export type ActionListTrailingVisualProps = VisualProps
-export const TrailingVisual: React.FC<VisualProps> = ({sx = {}, ...props}) => {
+export const TrailingVisual: React.FC<React.PropsWithChildren<VisualProps>> = ({sx = {}, ...props}) => {
   return (
     <Slot name="TrailingVisual">
       {({variant, disabled}: ItemContext) => (

src/ActionMenu.tsx

@@ -33,7 +33,7 @@ export type ActionMenuProps = {
   onOpenChange?: (s: boolean) => void
 } & Pick<AnchoredOverlayProps, 'anchorRef'>
 
-const Menu: React.FC<ActionMenuProps> = ({
+const Menu: React.FC<React.PropsWithChildren<ActionMenuProps>> = ({
   anchorRef: externalAnchorRef,
   open,
   onOpenChange,
@@ -102,7 +102,7 @@ type MenuOverlayProps = Partial<OverlayProps> &
      */
     children: React.ReactElement[] | React.ReactElement
   }
-const Overlay: React.FC<MenuOverlayProps> = ({children, align = 'start', ...overlayProps}) => {
+const Overlay: React.FC<React.PropsWithChildren<MenuOverlayProps>> = ({children, align = 'start', ...overlayProps}) => {
   // we typecast anchorRef as required instead of optional
   // because we know that we're setting it in context in Menu
   const {anchorRef, renderAnchor, anchorId, open, onOpen, onClose} = React.useContext(MenuContext) as MandateProps<

src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -86,7 +86,7 @@ export type AnchoredOverlayProps = AnchoredOverlayBaseProps &
  * An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor.
  * The overlay can be opened and navigated using keyboard or mouse.
  */
-export const AnchoredOverlay: React.FC<AnchoredOverlayProps> = ({
+export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayProps>> = ({
   renderAnchor,
   anchorRef: externalAnchorRef,
   anchorId: externalAnchorId,

src/Autocomplete/Autocomplete.tsx

@@ -45,7 +45,7 @@ const reducer = (state: State, action: Action) => {
   }
 }
 
-const Autocomplete: React.FC<{id?: string}> = ({children, id: idProp}) => {
+const Autocomplete: React.FC<React.PropsWithChildren<{id?: string}>> = ({children, id: idProp}) => {
   const activeDescendantRef = useRef<HTMLElement>(null)
   const scrollContainerRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)

src/Autocomplete/AutocompleteInput.tsx

@@ -16,7 +16,7 @@ import {ComponentProps} from '../utils/types'
 
 type InternalAutocompleteInputProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  as?: React.ComponentType<any>
+  as?: React.ComponentType<React.PropsWithChildren<any>>
 }
 
 const AutocompleteInput = React.forwardRef(

src/Button/types.ts

@@ -41,16 +41,16 @@ export type ButtonProps = {
   /**
    * The leading icon comes before button content
    */
-  leadingIcon?: React.FunctionComponent<IconProps>
+  leadingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
   /**
    * The trailing icon comes after button content
    */
-  trailingIcon?: React.FunctionComponent<IconProps>
+  trailingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
   children: React.ReactNode
 } & ButtonBaseProps
 
 export type IconButtonProps = ButtonA11yProps & {
-  icon: React.FunctionComponent<IconProps>
+  icon: React.FunctionComponent<React.PropsWithChildren<IconProps>>
 } & ButtonBaseProps
 
 // adopted from React.AnchorHTMLAttributes

src/CheckboxGroup.tsx

@@ -20,7 +20,7 @@ export const CheckboxGroupContext = createContext<{
   onChange?: ChangeEventHandler<HTMLInputElement>
 }>({})
 
-const CheckboxGroup: FC<CheckboxGroupProps> = ({children, disabled, onChange, ...rest}) => {
+const CheckboxGroup: FC<React.PropsWithChildren<CheckboxGroupProps>> = ({children, disabled, onChange, ...rest}) => {
   const formControlComponentChildren = React.Children.toArray(children)
     .filter(child => React.isValidElement(child) && child.type === FormControl)
     .map(formControlComponent =>

src/CircleOcticon.tsx

@@ -5,7 +5,7 @@ import Box, {BoxProps} from './Box'
 export type CircleOcticonProps = {
   as?: React.ElementType
   size?: number
-  icon: React.ComponentType<{size?: IconProps['size']}>
+  icon: React.ComponentType<React.PropsWithChildren<{size?: IconProps['size']}>>
 } & BoxProps
 
 function CircleOcticon(props: CircleOcticonProps) {

src/Dialog/ConfirmationDialog.tsx

@@ -52,7 +52,7 @@ const StyledTitle = styled(Box).attrs({as: 'h1'})`
   flex-grow: 1;
   margin: 0; /* override default margin */
 `
-const ConfirmationHeader: React.FC<DialogHeaderProps> = ({title, onClose, dialogLabelId}) => {
+const ConfirmationHeader: React.FC<React.PropsWithChildren<DialogHeaderProps>> = ({title, onClose, dialogLabelId}) => {
   const onCloseClick = useCallback(() => {
     onClose('close-button')
   }, [onClose])
@@ -69,7 +69,7 @@ const StyledConfirmationBody = styled(Box)`
   color: ${get('colors.fg.muted')};
   flex-grow: 1;
 `
-const ConfirmationBody: React.FC<DialogProps> = ({children}) => {
+const ConfirmationBody: React.FC<React.PropsWithChildren<DialogProps>> = ({children}) => {
   return <StyledConfirmationBody>{children}</StyledConfirmationBody>
 }
 const StyledConfirmationFooter = styled(Box)`
@@ -81,7 +81,7 @@ const StyledConfirmationFooter = styled(Box)`
   justify-content: end;
   padding: ${get('space.1')} ${get('space.3')} ${get('space.3')};
 `
-const ConfirmationFooter: React.FC<DialogProps> = ({footerButtons}) => {
+const ConfirmationFooter: React.FC<React.PropsWithChildren<DialogProps>> = ({footerButtons}) => {
   const {containerRef: footerRef} = useFocusZone({
     bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.Tab,
     focusInStrategy: 'closest'
@@ -100,7 +100,7 @@ const ConfirmationFooter: React.FC<DialogProps> = ({footerButtons}) => {
  * two buttons: one to cancel the action and one to confirm it. No custom
  * rendering capabilities are provided for ConfirmationDialog.
  */
-export const ConfirmationDialog: React.FC<ConfirmationDialogProps> = props => {
+export const ConfirmationDialog: React.FC<React.PropsWithChildren<ConfirmationDialogProps>> = props => {
   const {
     onClose,
     title,

src/Dialog/Dialog.tsx

@@ -67,7 +67,7 @@ export interface DialogProps {
    *
    * Warning: using a custom renderer may violate Primer UX principles.
    */
-  renderHeader?: React.FunctionComponent<DialogHeaderProps>
+  renderHeader?: React.FunctionComponent<React.PropsWithChildren<DialogHeaderProps>>
 
   /**
    * Provide a custom render function for the dialog body. This content is
@@ -76,7 +76,7 @@ export interface DialogProps {
    *
    * Warning: using a custom renderer may violate Primer UX principles.
    */
-  renderBody?: React.FunctionComponent<DialogProps>
+  renderBody?: React.FunctionComponent<React.PropsWithChildren<DialogProps>>
 
   /**
    * Provide a custom render function for the dialog footer. This content is
@@ -85,7 +85,7 @@ export interface DialogProps {
    *
    * Warning: using a custom renderer may violate Primer UX principles.
    */
-  renderFooter?: React.FunctionComponent<DialogProps>
+  renderFooter?: React.FunctionComponent<React.PropsWithChildren<DialogProps>>
 
   /**
    * Specifies the buttons to be rendered in the Dialog footer.
@@ -213,7 +213,13 @@ const StyledDialog = styled.div<StyledDialogProps>`
   ${sx};
 `
 
-const DefaultHeader: React.FC<DialogHeaderProps> = ({dialogLabelId, title, subtitle, dialogDescriptionId, onClose}) => {
+const DefaultHeader: React.FC<React.PropsWithChildren<DialogHeaderProps>> = ({
+  dialogLabelId,
+  title,
+  subtitle,
+  dialogDescriptionId,
+  onClose
+}) => {
   const onCloseClick = useCallback(() => {
     onClose('close-button')
   }, [onClose])
@@ -229,10 +235,10 @@ const DefaultHeader: React.FC<DialogHeaderProps> = ({dialogLabelId, title, subti
     </Dialog.Header>
   )
 }
-const DefaultBody: React.FC<DialogProps> = ({children}) => {
+const DefaultBody: React.FC<React.PropsWithChildren<DialogProps>> = ({children}) => {
   return <Dialog.Body>{children}</Dialog.Body>
 }
-const DefaultFooter: React.FC<DialogProps> = ({footerButtons}) => {
+const DefaultFooter: React.FC<React.PropsWithChildren<DialogProps>> = ({footerButtons}) => {
   const {containerRef: footerRef} = useFocusZone({
     bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.Tab,
     focusInStrategy: 'closest'
@@ -362,7 +368,7 @@ const buttonTypes = {
   primary: ButtonPrimary,
   danger: ButtonDanger
 }
-const Buttons: React.FC<{buttons: DialogButtonProps[]}> = ({buttons}) => {
+const Buttons: React.FC<React.PropsWithChildren<{buttons: DialogButtonProps[]}>> = ({buttons}) => {
   const autoFocusRef = useProvidedRefOrCreate<HTMLButtonElement>(buttons.find(button => button.autoFocus)?.ref)
   let autoFocusCount = 0
   const [hasRendered, setHasRendered] = useState(0)
@@ -405,7 +411,7 @@ const DialogCloseButton = styled(Button)`
   line-height: normal;
   box-shadow: none;
 `
-const CloseButton: React.FC<{onClose: () => void}> = ({onClose}) => {
+const CloseButton: React.FC<React.PropsWithChildren<{onClose: () => void}>> = ({onClose}) => {
   return (
     <DialogCloseButton aria-label="Close" onClick={onClose}>
       <StyledOcticon icon={XIcon} />

src/FilteredActionList/FilteredActionList.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta = {
   title: 'Composite components/FilteredActionList',
   component: FilteredActionList,
   decorators: [
-    (Story: React.ComponentType): JSX.Element => (
+    (Story: React.ComponentType<React.PropsWithChildren<unknown>>): JSX.Element => (
       <ThemeProvider>
         <BaseStyles>
           <Story />

src/FormControl/_FormControlCaption.tsx

@@ -4,7 +4,7 @@ import InputCaption from '../_InputCaption'
 import {FormControlContext} from './FormControl'
 import {Slot} from './slots'
 
-const FormControlCaption: React.FC<{id?: string} & SxProp> = ({children, sx, id}) => (
+const FormControlCaption: React.FC<React.PropsWithChildren<{id?: string} & SxProp>> = ({children, sx, id}) => (
   <Slot name="Caption">
     {({captionId, disabled}: FormControlContext) => (
       <InputCaption id={id || captionId} disabled={disabled} sx={sx}>

src/FormControl/_FormControlLabel.tsx

@@ -11,7 +11,7 @@ export type Props = {
   visuallyHidden?: boolean
 } & SxProp
 
-const FormControlLabel: React.FC<{htmlFor?: string; id?: string} & Props> = ({
+const FormControlLabel: React.FC<React.PropsWithChildren<{htmlFor?: string; id?: string} & Props>> = ({
   children,
   htmlFor,
   id,

src/FormControl/_FormControlLeadingVisual.tsx

@@ -5,7 +5,7 @@ import {SxProp} from '../sx'
 import {FormControlContext} from './FormControl'
 import {Slot} from './slots'
 
-const FormControlLeadingVisual: React.FC<SxProp> = ({children, sx}) => (
+const FormControlLeadingVisual: React.FC<React.PropsWithChildren<SxProp>> = ({children, sx}) => (
   <Slot name="LeadingVisual">
     {({disabled, captionId}: FormControlContext) => (
       <Box

src/FormControl/_FormControlValidation.tsx

@@ -10,7 +10,12 @@ export type FormControlValidationProps = {
   id?: string
 } & SxProp
 
-const FormControlValidation: React.FC<FormControlValidationProps> = ({children, variant, sx, id}) => (
+const FormControlValidation: React.FC<React.PropsWithChildren<FormControlValidationProps>> = ({
+  children,
+  variant,
+  sx,
+  id
+}) => (
   <Slot name="Validation">
     {({validationMessageId}: FormControlContext) => (
       <InputValidation validationStatus={variant} id={id || validationMessageId} sx={sx}>