@planningcenter/tapestry-react 2.6.0-rc.9 → 2.6.0

package/src/Tooltip/Tooltip.js

@@ -5,7 +5,6 @@ import React, {
   forwardRef,
   useRef,
   useState,
-  useCallback,
   useImperativeHandle,
   useEffect,
 } from 'react'
@@ -122,19 +121,18 @@ function Tooltip(props: Props, ref) {
     ...childProps
   } = useThemeProps('tooltip', props)
 
-  let isPageInView = true
-  let isFocused = false
-  let isMouseDown = false
+  let isPageInView = useRef(true)
+  let isMouseDown = useRef(false)
   let openTimeoutId = useRef(null)
   let closeTimeoutId = useRef(null)
 
-  // prevents tooltips showing when focused and navigating back to a page after leaving
-  const cleanupPageViewChange = useCallback(
-    pageViewChange((inView) => setTimeout(() => (isPageInView = inView)))
-  )
   const [isPopoverOpen, setIsPopoverOpen] = useState(defaultOpen)
 
   useEffect(() => {
+    // prevents tooltips showing when focused and navigating back to a page after leaving
+    const cleanupPageViewChange = pageViewChange((inView) =>
+      setTimeout(() => (isPageInView.current = inView))
+    )
     emitter.on('CLOSE_OPEN_TOOLTIPS', close)
     return () => {
       emitter.off('CLOSE_OPEN_TOOLTIPS', close)
@@ -178,7 +176,7 @@ function Tooltip(props: Props, ref) {
     }
   }, [triggerOnHover])
 
-  const createOpenTimeout = useCallback(() => {
+  const createOpenTimeout = () => {
     clearGlobalTimeout()
     if (openTimeoutId.current === null) {
       clearTimeout(closeTimeoutId.current)
@@ -191,31 +189,31 @@ function Tooltip(props: Props, ref) {
         )
       }
     }
-  })
+  }
 
-  const createCloseTimeout = useCallback(() => {
+  const createCloseTimeout = () => {
     startGlobalTimeout()
     if (closeTimeoutId.current === null) {
       clearTimeout(openTimeoutId.current)
       openTimeoutId.current = null
       closeTimeoutId.current = setTimeout(() => close(), closeDelay)
     }
-  })
+  }
 
-  const handleFocus = useCallback(() => {
-    if (isPageInView && !isMouseDown) {
+  const handleFocus = () => {
+    if (isPageInView.current && !isMouseDown.current) {
       open()
     }
-  })
+  }
 
-  const handleMouseDown = useCallback(() => {
-    isMouseDown = true
+  const handleMouseDown = () => {
+    isMouseDown.current = true
     close()
-  })
+  }
 
-  const handleMouseUp = useCallback(() => {
-    isMouseDown = false
-  })
+  const handleMouseUp = () => {
+    isMouseDown.current = false
+  }
 
   const child = Children.only(children)
   const {

package/src/index.d.ts

@@ -350,7 +350,7 @@ export const Checkbox: HTMLInputWrapperComponent
 // Input
 // =====
 
-export const Input: CommonComponent & {
+export const Input: HTMLInputWrapperComponent & {
   Inline: HTMLInputWrapperComponent
   Input: HTMLInputWrapperComponent
   InputBox: CommonComponent

package/src/system/utils.js

@@ -1,7 +1,7 @@
 import { useContext, useCallback } from 'react'
 import { ThemeContext } from '@emotion/react'
 import { darken, getLuminance, lighten, parseToRgb } from 'polished'
-import { get } from 'lodash'
+import get from 'lodash/get'
 
 import { getColor } from './colors'
 import defaultTheme from './default-theme'

package/src/utils.js

@@ -1,6 +1,6 @@
 import { Children, cloneElement } from 'react'
 import { tabbable } from 'tabbable'
-import { kebabCase } from 'lodash'
+import kebabCase from 'lodash/kebabCase'
 
 /**
  * Returns true if user platform is an iOS device