use react-is for checking valid element type, update primer/octicons-…

…react (#3437)

* use react-is for checking valid element type

* update primer

* update primer

* update octicon

* changeset

* loosen react-is types

* update some types

* test(vrt): update snapshots

---------

Co-authored-by: broccolinisoup <broccolinisoup@users.noreply.github.com>

.changeset/lovely-planes-pull.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+update icon types and primer octicons

package.json

@@ -100,12 +100,13 @@
     "@github/relative-time-element": "^4.1.2",
     "@lit-labs/react": "1.1.1",
     "@primer/behaviors": "1.3.4",
-    "@primer/octicons-react": "18.3.0",
+    "@primer/octicons-react": "^19.3.0",
     "@primer/primitives": "7.11.11",
     "@react-aria/ssr": "^3.1.0",
     "@styled-system/css": "^5.1.5",
     "@styled-system/props": "^5.1.5",
     "@styled-system/theme-get": "^5.1.2",
+    "@types/react-is": "^18.2.1",
     "@types/styled-components": "^5.1.11",
     "@types/styled-system": "^5.1.12",
     "@types/styled-system__css": "^5.0.16",
@@ -119,6 +120,7 @@
     "lodash.isempty": "4.4.0",
     "lodash.isobject": "3.0.2",
     "react-intersection-observer": "9.4.3",
+    "react-is": "^18.2.0",
     "styled-system": "^5.1.5"
   },
   "devDependencies": {

src/Button/types.ts

@@ -42,19 +42,19 @@ export type ButtonProps = {
   /**
    * The icon for the IconButton
    */
-  icon?: React.ComponentType | null | undefined
+  icon?: React.ElementType | null | undefined
   /**
    * The leading icon comes before button content
    */
-  leadingIcon?: React.ComponentType | null | undefined
+  leadingIcon?: React.ElementType | null | undefined
   /**
    * The trailing icon comes after button content
    */
-  trailingIcon?: React.ComponentType | null | undefined
+  trailingIcon?: React.ElementType | null | undefined
   /**
    * Trailing action appears to the right of the trailing visual and is always locked to the end
    */
-  trailingAction?: React.ComponentType | null | undefined
+  trailingAction?: React.ElementType | null | undefined
   children: React.ReactNode
   /**
    * Content alignment for when visuals are present
@@ -63,7 +63,7 @@ export type ButtonProps = {
 } & ButtonBaseProps
 
 export type IconButtonProps = ButtonA11yProps & {
-  icon: React.ComponentType
+  icon: React.ElementType
 } & Omit<ButtonBaseProps, 'aria-label' | 'aria-labelledby'>
 
 // adopted from React.AnchorHTMLAttributes

src/Octicon/Octicon.tsx

@@ -6,9 +6,10 @@ import {ComponentProps} from '../utils/types'
 
 type StyledOcticonProps = {icon: React.ElementType; color?: string} & IconProps
 
-function Icon({icon: IconComponent, ...rest}: StyledOcticonProps) {
-  return <IconComponent {...rest} />
-}
+const Icon = React.forwardRef((props: StyledOcticonProps, ref: React.Ref<SVGSVGElement>) => {
+  const {icon: IconComponent, ...rest} = props
+  return <IconComponent {...rest} ref={ref} />
+})
 
 const Octicon = styled(Icon)<SxProp>`
   ${({color, sx: sxProp}) => sx({sx: {color, ...sxProp}})}