refactor: apply react 19 refobjects-defaults codemod

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)
 
@@ -576,7 +579,11 @@ export const ActionBarGroup = forwardRef(({children}: React.PropsWithChildren, f
 
   return (
     <ActionBarGroupContext.Provider value={{groupId: id}}>
-      <div className={styles.Group} ref={ref}>
+      <div
+        className={styles.Group}
+        // @ts-expect-error [react-19] [TS2322]
+        ref={ref}
+      >
         {children}
       </div>
     </ActionBarGroupContext.Provider>
@@ -586,7 +593,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
@@ -66,17 +66,19 @@ const UnwrappedList = <As extends React.ElementType = 'ul'>(
       }}
     >
       {slots.heading}
-      <Component
-        className={clsx(classes.ActionList, className)}
-        role={listRole}
-        aria-labelledby={ariaLabelledBy}
-        ref={listRef}
-        data-dividers={showDividers}
-        data-variant={variant}
-        {...restProps}
-      >
-        {childrenWithoutSlots}
-      </Component>
+      {React.createElement(
+        Component,
+        {
+          className: clsx(classes.ActionList, className),
+          role: listRole,
+          'aria-labelledby': ariaLabelledBy,
+          ref: listRef,
+          'data-dividers': showDividers,
+          'data-variant': variant,
+          ...restProps,
+        },
+        childrenWithoutSlots,
+      )}
     </ListContext.Provider>
   )
 }

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,11 @@ export const CustomOverlayMenuAnchor = () => {
         <FormControl.Label htmlFor="autocompleteInput" id="autocompleteLabel">
           Default label
         </FormControl.Label>
-        <div ref={menuAnchorRef as React.RefObject<HTMLDivElement>} className={classes.AnchorContainer}>
+        <div
+          // @ts-expect-error [react-19] [TS2322]
+          ref={menuAnchorRef as React.RefObject<HTMLDivElement | null>}
+          className={classes.AnchorContainer}
+        >
           <Autocomplete>
             <Autocomplete.Input
               id="autocompleteInput"
@@ -522,7 +526,11 @@ 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
+              // @ts-expect-error [react-19] [TS2322]
+              ref={scrollContainerRef as RefObject<HTMLDivElement | null>}
+              className={classes.OverlayScroll}
+            >
               <Autocomplete.Menu
                 items={items}
                 selectedItemIds={[]}

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,8 @@ function AutocompleteOverlay({
       preventFocusOnOpen={true}
       onClickOutside={closeOptionList}
       onEscape={closeOptionList}
-      ref={floatingElementRef as React.RefObject<HTMLDivElement>}
+      // @ts-expect-error [react-19] [TS2322]
+      ref={floatingElementRef as React.RefObject<HTMLDivElement | null>}
       top={position?.top}
       left={position?.left}
       className={classes.Overlay}

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
@@ -51,6 +51,7 @@ const AvatarStackBody = ({
         classes.AvatarStackBody,
       )}
       tabIndex={!hasInteractiveChildren && !disableExpand ? 0 : undefined}
+      // @ts-expect-error [react-19] [TS2322]
       ref={stackContainer}
     >
       {children}

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,
@@ -27,7 +27,13 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(
   })
 
   return (
-    <BaseComponent ref={buttonRef} className={clsx(className, classes.ButtonGroup)} role={role} {...rest}>
+    <BaseComponent
+      // @ts-expect-error [react-19] [TS2322]
+      ref={buttonRef}
+      className={clsx(className, classes.ButtonGroup)}
+      role={role}
+      {...rest}
+    >
       {buttons}
     </BaseComponent>
   )

packages/react/src/Checkbox/Checkbox.stories.tsx

@@ -19,7 +19,13 @@ export const Playground = ({value: _value, checked, ...args}: FormControlArgs<Ch
   return (
     <form>
       <FormControl {...parentArgs}>
-        <Checkbox value="default" checked={checked} {...args} />
+        <Checkbox
+          value="default"
+          checked={checked}
+          {...args}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={args.ref}
+        />
         <FormControl.Label {...labelArgs} />
         {captionArgs.children && <FormControl.Caption {...captionArgs} />}
       </FormControl>

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)
@@ -84,7 +84,14 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       }
     })
 
-    return <input {...inputProps} className={clsx(className, sharedClasses.Input, classes.Checkbox)} />
+    return (
+      <input
+        {...inputProps}
+        // @ts-expect-error [react-19] [TS2322]
+        ref={inputProps.ref}
+        className={clsx(className, sharedClasses.Input, classes.Checkbox)}
+      />
+    )
   },
 )
 

packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx

@@ -108,7 +108,11 @@ 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
+      // @ts-expect-error [react-19] [TS2322]
+      ref={footerRef as React.RefObject<HTMLDivElement | null>}
+      className={classes.ConfirmationFooter}
+    >
       <Dialog.Buttons buttons={footerButtons ?? []} />
     </div>
   )

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

@@ -9,8 +9,13 @@ export default {
 
 export const WithCustomSummary: StoryFn<typeof Details> = () => {
   const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
+  const {ref, ...detailsProps} = getDetailsProps()
   return (
-    <Details {...getDetailsProps()}>
+    <Details
+      {...detailsProps}
+      // @ts-expect-error [react-19] [TS2322]
+      ref={ref}
+    >
       <summary>Custom see Details</summary>
       This is some content
     </Details>

packages/react/src/Details/Details.stories.tsx

@@ -9,8 +9,13 @@ export default {
 } as Meta<typeof Details>
 export const Default: StoryFn<typeof Details> = () => {
   const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
+  const {ref, ...detailsProps} = getDetailsProps()
   return (
-    <Details {...getDetailsProps()}>
+    <Details
+      {...detailsProps}
+      // @ts-expect-error [react-19] [TS2322]
+      ref={ref}
+    >
       <Details.Summary as={Button}>See Details</Details.Summary>
       This is some content
     </Details>

packages/react/src/Details/__tests__/Details.test.tsx

@@ -8,8 +8,14 @@ describe('Details', () => {
   it('Toggles when you click outside', async () => {
     const Component = () => {
       const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
+      const {ref, ...detailsProps} = getDetailsProps()
       return (
-        <Details data-testid="details" {...getDetailsProps()}>
+        <Details
+          data-testid="details"
+          {...detailsProps}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={ref}
+        >
           <Details.Summary>hi</Details.Summary>
         </Details>
       )
@@ -25,8 +31,14 @@ describe('Details', () => {
   it('Accurately passes down open state', async () => {
     const Component = () => {
       const {getDetailsProps, open} = useDetails({closeOnOutsideClick: true})
+      const {ref, ...detailsProps} = getDetailsProps()
       return (
-        <Details {...getDetailsProps()} data-testid="details">
+        <Details
+          {...detailsProps}
+          data-testid="details"
+          // @ts-expect-error [react-19] [TS2322]
+          ref={ref}
+        >
           <summary data-testid="summary">{open ? 'Open' : 'Closed'}</summary>
         </Details>
       )
@@ -45,8 +57,14 @@ describe('Details', () => {
     const CloseButton = (props: ButtonProps) => <Button {...props} />
     const Component = () => {
       const {getDetailsProps, setOpen, open} = useDetails({closeOnOutsideClick: true, defaultOpen: true})
+      const {ref, ...detailsProps} = getDetailsProps()
       return (
-        <Details {...getDetailsProps()} data-testid="details">
+        <Details
+          {...detailsProps}
+          data-testid="details"
+          // @ts-expect-error [react-19] [TS2322]
+          ref={ref}
+        >
           <summary data-testid="summary">{open ? 'Open' : 'Closed'}</summary>
           <CloseButton onClick={() => setOpen(false)}>Close</CloseButton>
         </Details>
@@ -65,8 +83,13 @@ describe('Details', () => {
     const user = userEvent.setup()
     const Component = () => {
       const {getDetailsProps, open} = useDetails({closeOnOutsideClick: true, defaultOpen: true})
+      const {ref, ...detailsProps} = getDetailsProps()
       return (
-        <Details {...getDetailsProps()}>
+        <Details
+          {...detailsProps}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={ref}
+        >
           <summary data-testid="summary">{open ? 'Open' : 'Closed'}</summary>
           <div>
             <Button variant="primary">test</Button>