fix(SidebarE): Use explicit refs with Transition

Stops a deprecation warning for `findDOMNode` usage being throwin in React strict mode.

packages/react-component-library/jest/setupTests.js

@@ -6,7 +6,7 @@ import { format } from 'util'
 const originalConsoleError = global.console.error
 
 global.console.error = (...args) => {
-  const reactFailures = [/Failed prop type/, /Warning: /]
+  const reactFailures = [/Failed prop type/, /Warning: /, /StrictMode/]
 
   if (reactFailures.some((p) => p.test(args[0]))) {
     originalConsoleError(...args)

packages/react-component-library/src/components/TopLevelNavigation/SidebarE/SidebarE.test.tsx

@@ -53,6 +53,20 @@ const notifications = (
 describe('SidebarE', () => {
   let wrapper: RenderResult
 
+  describe('when rendered in React strict mode', () => {
+    it('should not throw deprecation warning about findDOMNode', () => {
+      expect(() => {
+        wrapper = render(
+          <React.StrictMode>
+            <SidebarE />
+          </React.StrictMode>
+        )
+
+        fireEvent.mouseOver(wrapper.getByTestId('sidebar'))
+      }).not.toThrowError(/findDOMNode is deprecated in StrictMode/)
+    })
+  })
+
   describe('when composed with minimal props', () => {
     beforeEach(() => {
       wrapper = render(<SidebarE />)

packages/react-component-library/src/components/TopLevelNavigation/SidebarE/SidebarE.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import { Transition } from 'react-transition-group'
 
 import { SidebarHandle } from './SidebarHandle'
@@ -45,6 +45,8 @@ export const SidebarE: React.FC<SidebarEProps> = ({
   notifications,
   ...rest
 }) => {
+  const nodeRef = useRef(null)
+
   return (
     <SidebarProvider>
       <SidebarContext.Consumer>
@@ -56,9 +58,17 @@ export const SidebarE: React.FC<SidebarEProps> = ({
             onMouseLeave={(_) => setHasMouseOver(false)}
             {...rest}
           >
-            <Transition in={hasMouseOver} timeout={0} unmountOnExit>
+            <Transition
+              nodeRef={nodeRef}
+              in={hasMouseOver}
+              timeout={0}
+              unmountOnExit
+            >
               {(state) => (
-                <SidebarHandle style={{ ...TRANSITION_STYLES[state] }} />
+                <SidebarHandle
+                  ref={nodeRef}
+                  style={{ ...TRANSITION_STYLES[state] }}
+                />
               )}
             </Transition>
             {title && (

packages/react-component-library/src/components/TopLevelNavigation/SidebarE/SidebarHandle.tsx

@@ -1,32 +1,35 @@
-import React, { useContext } from 'react'
+import React, { useContext, forwardRef } from 'react'
 import { IconChevronLeft, IconChevronRight } from '@royalnavy/icon-library'
 
 import { ComponentWithClass } from '../../../common/ComponentWithClass'
 import { SidebarContext } from './context'
 import { StyledHandle } from './partials/StyledHandle'
 
 interface SidebarHandleProps extends ComponentWithClass {
-  style?: React.CSSProperties
+  style: React.CSSProperties
 }
 
-export const SidebarHandle: React.FC<SidebarHandleProps> = (props) => {
-  const { isOpen, setIsOpen } = useContext(SidebarContext)
+export const SidebarHandle = forwardRef(
+  (props: SidebarHandleProps, ref?: React.Ref<HTMLButtonElement>) => {
+    const { isOpen, setIsOpen } = useContext(SidebarContext)
 
-  function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
-    e.preventDefault()
-    setIsOpen(!isOpen)
-  }
+    function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
+      e.preventDefault()
+      setIsOpen(!isOpen)
+    }
 
-  return (
-    <StyledHandle
-      onClick={handleClick}
-      aria-label={`${isOpen ? 'Collapse' : 'Expand'} sidebar`}
-      data-testid="sidebar-handle"
-      {...props}
-    >
-      {isOpen ? <IconChevronLeft /> : <IconChevronRight />}
-    </StyledHandle>
-  )
-}
+    return (
+      <StyledHandle
+        ref={ref}
+        onClick={handleClick}
+        aria-label={`${isOpen ? 'Collapse' : 'Expand'} sidebar`}
+        data-testid="sidebar-handle"
+        {...props}
+      >
+        {isOpen ? <IconChevronLeft /> : <IconChevronRight />}
+      </StyledHandle>
+    )
+  }
+)
 
 SidebarHandle.displayName = 'SidebarHandle'

packages/react-component-library/src/components/TopLevelNavigation/SidebarE/SidebarNavItemE.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react'
+import React, { useState, useContext, useRef } from 'react'
 import { Transition } from 'react-transition-group'
 
 import { SidebarSubNav } from './SidebarSubNav'
@@ -34,15 +34,22 @@ export const SidebarNavItemE: React.FC<SidebarNavItemEProps> = ({
   const [hasMouseOver, setHasMouseOver] = useState(false)
   const { isOpen } = useContext(SidebarContext)
   const linkElement = link as React.ReactElement
+  const nodeRef = useRef(null)
 
   const item = React.cloneElement(linkElement, {
     ...link.props,
     children: (
       <>
         {icon && <StyledNavItemIcon isOpen={isOpen}>{icon}</StyledNavItemIcon>}
-        <Transition in={isOpen} timeout={TRANSITION_TIMEOUT} unmountOnExit>
+        <Transition
+          nodeRef={nodeRef}
+          in={isOpen}
+          timeout={TRANSITION_TIMEOUT}
+          unmountOnExit
+        >
           {(state) => (
             <StyledNavItemText
+              ref={nodeRef}
               style={{ ...TRANSITION_STYLES[state] }}
               isOpen={isOpen}
               data-testid="sidebar-nav-item-text"