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

.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}})}