refactor: apply refobjects-default codemod

.changeset/wicked-buttons-wink.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add support for `ref` types from React 19 by annotating `React.RefObject` types as `React.RefObject<T | null>`

package.json

@@ -27,6 +27,7 @@
     "lint:css:fix": "npm run lint:css -- --fix",
     "lint:fix": "npm run lint -- --fix",
     "lint:md": "markdownlint-cli2 \"**/*.{md,mdx}\" \"!.github\" \"!.changeset\" \"!**/node_modules/**\" \"!**/CHANGELOG.md\"",
+    "postinstall": "patch-package",
     "test": "vitest",
     "test:type-check": "tsc --noEmit",
     "test:update": "npm run test -- -u",
@@ -81,6 +82,7 @@
     "globals": "^16.2.0",
     "markdownlint-cli2": "^0.17.2",
     "markdownlint-cli2-formatter-pretty": "^0.0.8",
+    "patch-package": "^8.0.1",
     "prettier": "3.4.2",
     "rimraf": "5.0.5",
     "size-limit": "11.2.0",

packages/react/src/ActionBar/ActionBar.tsx

@@ -320,16 +320,19 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
   const moreMenuBtnRef = useRef<HTMLButtonElement>(null)
   const containerRef = React.useRef<HTMLUListElement>(null)
 
-  useResizeObserver((resizeObserverEntries: ResizeObserverEntry[]) => {
-    const navWidth = resizeObserverEntries[0].contentRect.width
-    const moreMenuWidth = moreMenuRef.current?.getBoundingClientRect().width ?? 0
-    const hasActiveMenu = menuItemIds.size > 0
-
-    if (navWidth > 0) {
-      const newMenuItemIds = getMenuItems(navWidth, moreMenuWidth, childRegistry, hasActiveMenu, computedGap)
-      if (newMenuItemIds) setMenuItemIds(newMenuItemIds)
-    }
-  }, navRef as RefObject<HTMLElement>)
+  useResizeObserver(
+    (resizeObserverEntries: ResizeObserverEntry[]) => {
+      const navWidth = resizeObserverEntries[0].contentRect.width
+      const moreMenuWidth = moreMenuRef.current?.getBoundingClientRect().width ?? 0
+      const hasActiveMenu = menuItemIds.size > 0
+
+      if (navWidth > 0) {
+        const newMenuItemIds = getMenuItems(navWidth, moreMenuWidth, childRegistry, hasActiveMenu, computedGap)
+        if (newMenuItemIds) setMenuItemIds(newMenuItemIds)
+      }
+    },
+    navRef as RefObject<HTMLElement | null>,
+  )
 
   const isVisibleChild = useCallback(
     (id: string) => {
@@ -554,7 +557,7 @@ const ActionBarGroupContext = React.createContext<{
 
 export const ActionBarGroup = forwardRef(({children}: React.PropsWithChildren, forwardedRef) => {
   const backupRef = useRef<HTMLDivElement>(null)
-  const ref = (forwardedRef ?? backupRef) as RefObject<HTMLDivElement>
+  const ref = (forwardedRef ?? backupRef) as RefObject<HTMLDivElement | null>
   const id = useId()
   const {registerChild, unregisterChild} = React.useContext(ActionBarContext)
 
@@ -586,7 +589,7 @@ export const ActionBarGroup = forwardRef(({children}: React.PropsWithChildren, f
 export const ActionBarMenu = forwardRef(
   ({'aria-label': ariaLabel, icon, overflowIcon, items, ...props}: ActionBarMenuProps, forwardedRef) => {
     const backupRef = useRef<HTMLButtonElement>(null)
-    const ref = (forwardedRef ?? backupRef) as RefObject<HTMLButtonElement>
+    const ref = (forwardedRef ?? backupRef) as RefObject<HTMLButtonElement | null>
     const id = useId()
     const {registerChild, unregisterChild, isVisibleChild} = React.useContext(ActionBarContext)
 

packages/react/src/ActionList/List.tsx

@@ -41,7 +41,7 @@ const UnwrappedList = <As extends React.ElementType = 'ul'>(
 
   const ariaLabelledBy = slots.heading ? (slots.heading.props.id ?? headingId) : listLabelledBy
   const listRole = role || listRoleFromContainer
-  const listRef = useProvidedRefOrCreate(forwardedRef as React.RefObject<HTMLUListElement>)
+  const listRef = useProvidedRefOrCreate(forwardedRef as React.RefObject<HTMLUListElement | null>)
 
   let enableFocusZone = false
   if (enableFocusZoneFromContainer !== undefined) enableFocusZone = enableFocusZoneFromContainer

packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -27,7 +27,7 @@ interface AnchoredOverlayPropsWithAnchor {
   /**
    * An override to the internal ref that will be spread on to the renderAnchor
    */
-  anchorRef?: React.RefObject<HTMLElement>
+  anchorRef?: React.RefObject<HTMLElement | null>
 
   /**
    * An override to the internal id that will be spread on to the renderAnchor
@@ -46,7 +46,7 @@ interface AnchoredOverlayPropsWithoutAnchor {
    * An override to the internal renderAnchor ref that will be used to position the overlay.
    * When renderAnchor is null this can be used to make an anchor that is detached from ActionMenu.
    */
-  anchorRef: React.RefObject<HTMLElement>
+  anchorRef: React.RefObject<HTMLElement | null>
   /**
    * An override to the internal id that will be spread on to the renderAnchor
    */

packages/react/src/Autocomplete/Autocomplete.features.stories.tsx

@@ -462,7 +462,7 @@ export const CustomOverlayMenuAnchor = () => {
         <FormControl.Label htmlFor="autocompleteInput" id="autocompleteLabel">
           Default label
         </FormControl.Label>
-        <div ref={menuAnchorRef as React.RefObject<HTMLDivElement>} className={classes.AnchorContainer}>
+        <div ref={menuAnchorRef as React.RefObject<HTMLDivElement | null>} className={classes.AnchorContainer}>
           <Autocomplete>
             <Autocomplete.Input
               id="autocompleteInput"
@@ -522,7 +522,7 @@ export const InOverlayWithCustomScrollContainerRef = () => {
             <div className={classes.OverlayInputBar}>
               <Autocomplete.Input ref={inputRef} className={classes.OverlayInput} block aria-label="Search" />
             </div>
-            <div ref={scrollContainerRef as RefObject<HTMLDivElement>} className={classes.OverlayScroll}>
+            <div ref={scrollContainerRef as RefObject<HTMLDivElement | null>} className={classes.OverlayScroll}>
               <Autocomplete.Menu
                 items={items}
                 selectedItemIds={[]}