Primer leading/trailingVisual and Icons cannot be lazy, memo, forwardRef

[mattcosta7]

Description

related potentially, but not exactly - #2457

This would not be necessary if we passed rendered elements as props instead of passing components (as the linked PR above suggests)

Primer defines some props that accept function components however they don't accept things like forwardRef components, memoized components or lazy components (at least)

Where does this show up?

Places like this one -

react/src/TextInput/TextInput.tsx

Line 137 in 21fa73c

{typeof LeadingVisual === 'function' ? <LeadingVisual /> : LeadingVisual}

this should render anything that's component-like, and not just function components, but it only handles function components.

something like this using react-is might be what we want here, with type updates to match

import {isValidElementType} from 'react-is'

 {isValidElementType(LeadingVisual) ? <LeadingVisual /> : LeadingVisual} 

When using primer/octicons-react version 19+, these components break because icons are all forwardRef components in that version

Attempting to use v19+ in github/github also trips these failures - https://github.com/github/github/pull/276931

Steps to reproduce

Attempt to pass a memoized, lazy or ref forwarding component to a leadingVisual

Version

latest

Browser

No response

[broccolinisoup]

Hello @mattcosta7!👋🏻 Thanks for raising this issue. Bumping the octicon version was one of the reverted PRs and I did a very poor job on updating these function type checkings on the bump PR 🙈 I already have a PR to re-introducing the bump and function type checks, #3428, now I am using the is-react library as you suggested. It is still wip but I probably will reach out again due to type updates, I am struggling a bit with them.

[mattcosta7]

@broccolinisoup something like this should do it? #3437