refactor: apply refobjects-defaults codemod

packages/react/src/ActionBar/ActionBar.tsx

@@ -214,16 +214,16 @@
   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>)
+  }, navRef as RefObject<HTMLElement | null>)
 
   const isVisibleChild = useCallback(
     (id: string) => {
@@ -426,7 +426,7 @@
 
 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)
 

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

@@ -457,12 +457,12 @@
   const menuAnchorRef = useRef<HTMLElement>(null)
 
   return (
-    <form className={classes.FormPadding}>
+    (<form className={classes.FormPadding}>
       <FormControl>
         <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"
@@ -478,8 +478,8 @@
           The overlay menu position is anchored to the div with the black border instead of to the text input
         </FormControl.Caption>
       </FormControl>
-    </form>
-  )
+    </form>)
+  );
 }
 
 export const InOverlayWithCustomScrollContainerRef = () => {
@@ -504,8 +504,7 @@
   }
 
   return (
-    <form className={classes.FormPadding}>
-      Selected item: {selectedItem ? selectedItem.text : 'none'}
+    (<form className={classes.FormPadding}>Selected item: {selectedItem ? selectedItem.text : 'none'}
       <AnchoredOverlay
         open={isOpen}
         onOpen={handleOpen}
@@ -522,7 +521,7 @@
             <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={[]}
@@ -534,8 +533,8 @@
           </div>
         </Autocomplete>
       </AnchoredOverlay>
-    </form>
-  )
+    </form>)
+  );
 }
 
 export const InADialog = () => {

packages/react/src/Autocomplete/AutocompleteOverlay.tsx

@@ -14,7 +14,7 @@ type AutocompleteOverlayInternalProps = {
   /**
    * The ref of the element that the position of the menu is based on. By default, the menu is positioned based on the text input
    */
-  menuAnchorRef?: React.RefObject<HTMLElement>
+  menuAnchorRef?: React.RefObject<HTMLElement | null>
   /**
    * Props to be spread on the internal `Overlay` component.
    */
@@ -60,7 +60,7 @@ function AutocompleteOverlay({
       preventFocusOnOpen={true}
       onClickOutside={closeOptionList}
       onEscape={closeOptionList}
-      ref={floatingElementRef as React.RefObject<HTMLDivElement>}
+      ref={floatingElementRef as React.RefObject<HTMLDivElement | null>}
       top={position?.top}
       left={position?.left}
       className={classes.Overlay}
@@ -71,8 +71,8 @@ function AutocompleteOverlay({
   ) : (
     // HACK: This ensures AutocompleteMenu is still mounted when closing the menu and all of the hooks inside of it are still called.
     // A better way to do this would be to move the hooks to AutocompleteOverlay or somewhere that won't get unmounted.
-    <VisuallyHidden aria-hidden="true">{children}</VisuallyHidden>
-  )
+    (<VisuallyHidden aria-hidden="true">{children}</VisuallyHidden>)
+  );
 }
 
 AutocompleteOverlay.displayName = 'AutocompleteOverlay'

packages/react/src/AvatarStack/AvatarStack.tsx

@@ -38,7 +38,7 @@ const AvatarStackBody = ({
 }: {
   disableExpand: boolean | undefined
   hasInteractiveChildren: boolean | undefined
-  stackContainer: React.RefObject<HTMLDivElement>
+  stackContainer: React.RefObject<HTMLDivElement | null>
 } & React.ComponentPropsWithoutRef<'div'>) => {
   return (
     <div

packages/react/src/ButtonGroup/ButtonGroup.tsx

@@ -17,7 +17,7 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(
   forwardRef,
 ) {
   const buttons = React.Children.map(children, (child, index) => <div key={index}>{child}</div>)
-  const buttonRef = useProvidedRefOrCreate(forwardRef as React.RefObject<HTMLDivElement>)
+  const buttonRef = useProvidedRefOrCreate(forwardRef as React.RefObject<HTMLDivElement | null>)
 
   useFocusZone({
     containerRef: buttonRef,

packages/react/src/Checkbox/Checkbox.tsx

@@ -20,7 +20,7 @@ export type CheckboxProps = {
   /**
    * Forward a ref to the underlying input element
    */
-  ref?: React.RefObject<HTMLInputElement>
+  ref?: React.RefObject<HTMLInputElement | null>
   /**
    * Indicates whether the checkbox must be checked
    */
@@ -44,7 +44,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     {checked, className, defaultChecked, indeterminate, disabled, onChange, required, validationStatus, value, ...rest},
     ref,
   ): ReactElement => {
-    const checkboxRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLInputElement>)
+    const checkboxRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLInputElement | null>)
     const checkboxGroupContext = useContext(CheckboxGroupContext)
     const handleOnChange: ChangeEventHandler<HTMLInputElement> = e => {
       checkboxGroupContext.onChange && checkboxGroupContext.onChange(e)

packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx

@@ -108,10 +108,10 @@ const ConfirmationFooter: React.FC<React.PropsWithChildren<DialogProps>> = ({foo
 
   // Must have exactly 2 buttons!
   return (
-    <div ref={footerRef as React.RefObject<HTMLDivElement>} className={classes.ConfirmationFooter}>
+    (<div ref={footerRef as React.RefObject<HTMLDivElement | null>} className={classes.ConfirmationFooter}>
       <Dialog.Buttons buttons={footerButtons ?? []} />
-    </div>
-  )
+    </div>)
+  );
 }
 
 /**

packages/react/src/Dialog/Dialog.tsx

@@ -44,7 +44,7 @@ export type DialogButtonProps = Omit<ButtonProps, 'content'> & {
    * A reference to the rendered Button’s DOM node, used together with
    * `autoFocus` for `focusTrap`’s `initialFocus`.
    */
-  ref?: React.RefObject<HTMLButtonElement>
+  ref?: React.RefObject<HTMLButtonElement | null>
 }
 
 /**
@@ -136,12 +136,12 @@ export interface DialogProps {
    * Return focus to this element when the Dialog closes,
    * instead of the element that had focus immediately before the Dialog opened
    */
-  returnFocusRef?: React.RefObject<HTMLElement>
+  returnFocusRef?: React.RefObject<HTMLElement | null>
 
   /**
    * The element to focus when the Dialog opens
    */
-  initialFocusRef?: React.RefObject<HTMLElement>
+  initialFocusRef?: React.RefObject<HTMLElement | null>
 
   /**
    * Additional class names to apply to the dialog
@@ -215,10 +215,10 @@ const DefaultFooter: React.FC<React.PropsWithChildren<DialogProps>> = ({footerBu
     focusInStrategy: 'closest',
   })
   return footerButtons ? (
-    <Dialog.Footer ref={footerRef as React.RefObject<HTMLDivElement>}>
+    <Dialog.Footer ref={footerRef as React.RefObject<HTMLDivElement | null>}>
       <Dialog.Buttons buttons={footerButtons} />
     </Dialog.Footer>
-  ) : null
+  ) : null;
 }
 
 const defaultPosition = {

packages/react/src/FilteredActionList/FilteredActionList.tsx

@@ -33,9 +33,9 @@ export interface FilteredActionListProps extends Partial<Omit<GroupedListProps,
   filterValue?: string
   onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement> | null) => void
   onListContainerRefChanged?: (ref: HTMLElement | null) => void
-  onInputRefChanged?: (ref: React.RefObject<HTMLInputElement>) => void
+  onInputRefChanged?: (ref: React.RefObject<HTMLInputElement | null>) => void
   textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>
-  inputRef?: React.RefObject<HTMLInputElement>
+  inputRef?: React.RefObject<HTMLInputElement | null>
   message?: React.ReactNode
   messageText?: {
     title: string

packages/react/src/FilteredActionList/useAnnouncements.tsx

@@ -20,7 +20,7 @@ const useFirstRender = () => {
 
 //TODO remove this when we remove usingRemoveActiveDescendant
 const getItemWithActiveDescendant = (
-  listRef: React.RefObject<HTMLUListElement>,
+  listRef: React.RefObject<HTMLUListElement | null>,
   items: FilteredActionListProps['items'],
 ) => {
   const listElement = listRef.current
@@ -42,8 +42,8 @@ const getItemWithActiveDescendant = (
 
 export const useAnnouncements = (
   items: FilteredActionListProps['items'],
-  listContainerRef: React.RefObject<HTMLUListElement>,
-  inputRef: React.RefObject<HTMLInputElement>,
+  listContainerRef: React.RefObject<HTMLUListElement | null>,
+  inputRef: React.RefObject<HTMLInputElement | null>,
   enabled: boolean = true,
   loading: boolean = false,
   message?: {title: string; description: string},

packages/react/src/LabelGroup/LabelGroup.tsx

@@ -19,12 +19,12 @@ export type LabelGroupProps = {
 // Calculates the width of the overlay to cover the labels/tokens and the expand button.
 const getOverlayWidth = (
   buttonClientRect: DOMRect,
-  containerRef: React.RefObject<HTMLElement>,
+  containerRef: React.RefObject<HTMLElement | null>,
   overlayPaddingPx: number,
 ) => overlayPaddingPx + buttonClientRect.right - (containerRef.current?.getBoundingClientRect().left || 0)
 
 const InlineToggle: React.FC<{
-  collapseButtonRef: React.RefObject<HTMLButtonElement>
+  collapseButtonRef: React.RefObject<HTMLButtonElement | null>
   collapseInlineExpandedChildren: () => void
   expandButtonRef: React.RefCallback<HTMLButtonElement>
   hiddenItemIds: string[]
@@ -81,7 +81,7 @@ const OverlayToggle: React.FC<
       align="start"
       side="inside-right"
       // expandButtonRef satisfies React.RefObject<HTMLButtonElement> because we manually set `.current` in the `useCallback` above
-      anchorRef={expandButtonRef as unknown as React.RefObject<HTMLButtonElement>}
+      anchorRef={expandButtonRef as unknown as React.RefObject<HTMLButtonElement | null>}
       anchorOffset={overlayPaddingPx * -1}
       alignmentOffset={overlayPaddingPx * -1}
       renderAnchor={props => (

packages/react/src/Overlay/Overlay.tsx

@@ -137,14 +137,14 @@ export const BaseOverlay = React.forwardRef(
 
 type ContainerProps = {
   anchorSide?: AnchorSide
-  ignoreClickRefs?: React.RefObject<HTMLElement>[]
-  initialFocusRef?: React.RefObject<HTMLElement>
+  ignoreClickRefs?: React.RefObject<HTMLElement | null>[]
+  initialFocusRef?: React.RefObject<HTMLElement | null>
   onClickOutside: (e: TouchOrMouseEvent) => void
   onEscape: (e: KeyboardEvent) => void
   portalContainerName?: string
   preventOverflow?: boolean
   preventFocusOnOpen?: boolean
-  returnFocusRef: React.RefObject<HTMLElement>
+  returnFocusRef: React.RefObject<HTMLElement | null>
 }
 
 type internalOverlayProps = Merge<OwnOverlayProps, ContainerProps>

packages/react/src/Overlay/Overlay.types.test.tsx

@@ -1,26 +1,26 @@
 import type React from 'react'
 import Overlay from './Overlay'
 
-export function shouldAcceptCallWithNoProps(ref: React.RefObject<HTMLElement>) {
+export function shouldAcceptCallWithNoProps(ref: React.RefObject<HTMLElement | null>) {
   return <Overlay returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} />
 }
 
-export function shouldAcceptCallWithDOMProps(ref: React.RefObject<HTMLElement>) {
+export function shouldAcceptCallWithDOMProps(ref: React.RefObject<HTMLElement | null>) {
   return <Overlay returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} onMouseDown={() => null} />
 }
 
-export function shouldNotAcceptCallWithDOMPropsThatDontMatchElement(ref: React.RefObject<HTMLElement>) {
+export function shouldNotAcceptCallWithDOMPropsThatDontMatchElement(ref: React.RefObject<HTMLElement | null>) {
   // @ts-expect-error href should not be allowed on a <div>
   return <Overlay returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} href="//primer.style/" />
 }
 
-export function shouldAcceptCallWithAsAndDOMProps(ref: React.RefObject<HTMLElement>) {
+export function shouldAcceptCallWithAsAndDOMProps(ref: React.RefObject<HTMLElement | null>) {
   return (
     <Overlay as="a" returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} href="//primer.style/" />
   )
 }
 
-export function shouldNotAcceptSystemProps(ref: React.RefObject<HTMLElement>) {
+export function shouldNotAcceptSystemProps(ref: React.RefObject<HTMLElement | null>) {
   return (
     <Overlay
       returnFocusRef={ref}

packages/react/src/PageHeader/PageHeader.tsx

@@ -48,7 +48,7 @@ export type PageHeaderProps = {
 
 const Root = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageHeaderProps>>(
   ({children, className, as: BaseComponent = 'div', 'aria-label': ariaLabel, role, hasBorder}, forwardedRef) => {
-    const rootRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement>)
+    const rootRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement | null>)
 
     const isInteractive = (element: HTMLElement) => {
       return (
@@ -204,7 +204,7 @@ export type TitleAreaProps = {
 
 const TitleArea = React.forwardRef<HTMLDivElement, React.PropsWithChildren<TitleAreaProps>>(
   ({children, className, hidden = false, variant = 'medium'}, forwardedRef) => {
-    const titleAreaRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement>)
+    const titleAreaRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement | null>)
     const currentVariant = useResponsiveValue(variant, 'medium')
     return (
       <div

packages/react/src/PageLayout/PageLayout.tsx

@@ -31,7 +31,7 @@ const PageLayoutContext = React.createContext<{
   padding: keyof typeof SPACING_MAP
   rowGap: keyof typeof SPACING_MAP
   columnGap: keyof typeof SPACING_MAP
-  paneRef: React.RefObject<HTMLDivElement>
+  paneRef: React.RefObject<HTMLDivElement | null>
 }>({
   padding: 'normal',
   rowGap: 'normal',
@@ -261,15 +261,15 @@ const VerticalDivider: React.FC<React.PropsWithChildren<DividerProps & Draggable
   }, [isDragging, isKeyboardDrag, currentWidth, minWidth, maxWidth])
 
   return (
-    <div
+    (<div
       className={clsx(classes.VerticalDivider, className)}
       data-variant={responsiveVariant}
       data-position={position}
       style={style}
     >
       {draggable ? (
         // Drag handle
-        <div
+        (<div
           className={classes.DraggableHandle}
           data-dragging={isDragging || isKeyboardDrag}
           role="slider"
@@ -297,10 +297,10 @@ const VerticalDivider: React.FC<React.PropsWithChildren<DividerProps & Draggable
             }
           }}
           onDoubleClick={onDoubleClick}
-        />
+        />)
       ) : null}
-    </div>
-  )
+    </div>)
+  );
 }
 
 // ----------------------------------------------------------------------------

packages/react/src/Popover/Popover.tsx

@@ -5,7 +5,7 @@ import React, {useRef} from 'react'
 import {useOnOutsideClick} from '../hooks'
 
 // Stable empty array reference to avoid unnecessary re-renders
-const EMPTY_IGNORE_CLICK_REFS: React.RefObject<HTMLElement>[] = []
+const EMPTY_IGNORE_CLICK_REFS: React.RefObject<HTMLElement | null>[] = []
 
 type CaretPosition =
   | 'top'
@@ -62,7 +62,7 @@ export type PopoverContentProps = {
   /*
    * Refs to elements that should be ignored when detecting outside clicks
    */
-  ignoreClickRefs?: React.RefObject<HTMLElement>[]
+  ignoreClickRefs?: React.RefObject<HTMLElement | null>[]
 } & HTMLProps<HTMLDivElement>
 
 const PopoverContent: React.FC<React.PropsWithChildren<PopoverContentProps>> = ({