replace createRef with useRef (#3124)

* replace createRef with useRef

* changeset

* missed null

Author: mattcosta7

.changeset/bright-stingrays-accept.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+replace createRef with useRef

docs/content/ActionMenu.mdx

@@ -222,7 +222,7 @@ To create an anchor outside of the menu, you need to switch to controlled mode f
 ```javascript live noinline
 const Example = () => {
   const [open, setOpen] = React.useState(false)
-  const anchorRef = React.createRef()
+  const anchorRef = React.useRef(null)
 
   return (
     <>

docs/package-lock.json

@@ -102,7 +102,7 @@ const Overlay: React.FC<React.PropsWithChildren<MenuOverlayProps>> = ({
     'anchorRef'
   >
 
-  const containerRef = React.createRef<HTMLDivElement>()
+  const containerRef = React.useRef<HTMLDivElement>(null)
   useMenuKeyboardNavigation(open, onClose, containerRef, anchorRef)
 
   return (

examples/nextjs/package-lock.json

@@ -111,7 +111,7 @@ export const ControlledMenu = () => {
   const onSelect = (name: string) => fireAction(name)
 
   const [open, setOpen] = React.useState(false)
-  const triggerRef = React.createRef<HTMLButtonElement>()
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
 
   return (
     <>

src/ActionMenu.tsx

@@ -97,7 +97,7 @@ const Overlay: React.FC<React.PropsWithChildren<MenuOverlayProps>> = ({children,
     'anchorRef'
   >
 
-  const containerRef = React.createRef<HTMLDivElement>()
+  const containerRef = React.useRef<HTMLDivElement>(null)
   useMenuKeyboardNavigation(open, onClose, containerRef, anchorRef)
 
   return (

src/ActionMenu/ActionMenu.examples.stories.tsx

@@ -6,8 +6,8 @@ const Component = () => {
   const [open, setOpen] = React.useState(false)
   const onOpen = () => setOpen(!open)
 
-  const containerRef = React.createRef<HTMLDivElement>()
-  const anchorRef = React.createRef<HTMLButtonElement>()
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const anchorRef = React.useRef<HTMLButtonElement>(null)
   useMenuInitialFocus(open, containerRef, anchorRef)
 
   return (

src/ActionMenu/ActionMenu.tsx

@@ -13,7 +13,7 @@ const Fixture = ({
   hasTextarea?: boolean
   refNotAttached?: boolean
 }) => {
-  const containerRef = React.createRef<HTMLDivElement>()
+  const containerRef = React.useRef<HTMLDivElement>(null)
   useMnemonics(true, containerRef) // hard coding open=true for test
 
   return (