fix(MenuHeading): Hide shadow initially (#2326)

Author: mdodgelooker

.github/workflows/ci.yml

@@ -41,9 +41,6 @@ jobs:
       - uses: c-hive/gha-yarn-cache@v1
       - run : yarn --silent
       - run: yarn test
-      - uses: paambaati/[email protected]
-        env:
-          CC_TEST_REPORTER_ID: ${{ secrets.CC_TEST_REPORTER_ID }}
     env:
       CI: true
   build:

packages/components/src/Menu/MenuHeading.hooks.test.tsx

@@ -25,37 +25,18 @@
  */
 
 import { renderWithTheme } from '@looker/components-test-utils'
-import { act } from '@testing-library/react'
-import React, { RefObject } from 'react'
+import { screen } from '@testing-library/react'
+import React from 'react'
 import { useElementVisibility } from './MenuHeading.hooks'
 
-interface TestProps {
-  callback: (...args: any[]) => void
-  testRef: RefObject<any>
-}
-
-const TestHook = ({ callback, testRef }: TestProps) => {
-  callback(testRef)
-  return null
+const TestHook = () => {
+  const [isVisible, ref] = useElementVisibility()
+  return <div ref={ref}>{isVisible.toString()}</div>
 }
 
 describe('MenuHeading Hooks', () => {
-  let isVisible: boolean
-
-  const testRef = {
-    current: <div />,
-  }
-
-  /* eslint-disable react-hooks/rules-of-hooks */
-  const cb = (ref: RefObject<any>) => {
-    isVisible = useElementVisibility(ref)
-  }
-  /* eslint-enable react-hooks/rules-of-hooks */
-
   it('it returns true as the default visibility state', () => {
-    act(() => {
-      renderWithTheme(<TestHook callback={cb} testRef={testRef} />)
-    })
-    expect(isVisible).toEqual(true)
+    renderWithTheme(<TestHook />)
+    expect(screen.getByText('true')).toBeVisible()
   })
 })

packages/components/src/Menu/MenuHeading.hooks.ts

@@ -24,9 +24,14 @@
 
  */
 
-import { RefObject, useEffect, useState } from 'react'
-
-export const useElementVisibility = (ref: RefObject<HTMLElement>): boolean => {
+import { useEffect, useState } from 'react'
+import { useCallbackRef } from '../utils'
+
+export const useElementVisibility = (): [
+  boolean,
+  (node: HTMLElement | null) => void
+] => {
+  const [element, ref] = useCallbackRef()
   const [isVisible, setIsVisible] = useState(true)
 
   useEffect(() => {
@@ -42,16 +47,15 @@ export const useElementVisibility = (ref: RefObject<HTMLElement>): boolean => {
             }
           )
 
-    const refCurrent = ref.current
-    if (refCurrent && observer) {
-      observer.observe && observer.observe(refCurrent)
+    if (element && observer) {
+      observer.observe && observer.observe(element)
     }
     return () => {
-      if (refCurrent && observer) {
-        observer.unobserve && observer.unobserve(refCurrent)
+      if (element && observer) {
+        observer.unobserve && observer.unobserve(element)
       }
     }
-  }, [setIsVisible, ref])
+  }, [element])
 
-  return isVisible
+  return [isVisible, ref]
 }

packages/components/src/Menu/MenuHeading.tsx

@@ -24,7 +24,7 @@
 
  */
 
-import React, { FC, useContext, useRef, ReactNode, RefObject } from 'react'
+import React, { FC, useContext, ReactNode } from 'react'
 import styled from 'styled-components'
 import {
   TextColorProps,
@@ -50,8 +50,7 @@ const MenuHeadingInternal: FC<MenuHeadingProps> = ({
   className,
   ...restProps
 }) => {
-  const labelShimRef: RefObject<any> = useRef()
-  const isLabelShimVisible = useElementVisibility(labelShimRef)
+  const [isLabelShimVisible, ref] = useElementVisibility()
 
   const { density } = useContext(ListItemContext)
   const { px } = listItemDimensions(density)
@@ -67,7 +66,7 @@ const MenuHeadingInternal: FC<MenuHeadingProps> = ({
         we detect when this 0-height element disappears from the page and then
         render the shadow.
       */}
-      <div ref={labelShimRef} style={{ height: '0' }} />
+      <div ref={ref} style={{ height: '0' }} />
       <Heading
         as="h2"
         color="text5"