feat: border typing/validation/compute position

Author: gabrieljablonski

src/components/Tooltip/TooltipTypes.d.ts

@@ -77,5 +77,5 @@ export interface ITooltip {
   afterHide?: () => void
   activeAnchor: HTMLElement | null
   setActiveAnchor: (anchor: HTMLElement | null) => void
-  border?: string | null
+  border?: CSSProperties['border']
 }

src/components/TooltipController/TooltipController.tsx

@@ -12,6 +12,7 @@ import type {
 } from 'components/Tooltip/TooltipTypes'
 import { useTooltip } from 'components/TooltipProvider'
 import { TooltipContent } from 'components/TooltipContent'
+import { cssAttrIsValid } from 'utils/css-attr-is-valid'
 import type { ITooltipController } from './TooltipControllerTypes'
 
 const TooltipController = ({
@@ -236,6 +237,24 @@ const TooltipController = ({
     }
   }, [anchorRefs, providerActiveAnchor, activeAnchor, anchorId, anchorSelect])
 
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production') {
+      return
+    }
+    if (style?.border) {
+      // eslint-disable-next-line no-console
+      console.warn('[react-tooltip] Do not set `style.border`. Use `border` prop instead.')
+    }
+    if (border) {
+      if (!cssAttrIsValid('border', border)) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          `[react-tooltip] "${border}" is not a valid \`border\`. See https://developer.mozilla.org/en-US/docs/Web/CSS/border`,
+        )
+      }
+    }
+  }, [])
+
   /**
    * content priority: children < render or content < html
    * children should be lower priority so that it can be used as the "default" content

src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -60,7 +60,13 @@ export interface ITooltipController {
   style?: CSSProperties
   position?: IPosition
   isOpen?: boolean
-  border?: string | null
+  /**
+   * @description see https://developer.mozilla.org/en-US/docs/Web/CSS/border.
+   *
+   * Adding a border with width > 3px, or with `em/cm/rem/...` instead of `px`
+   * might break the tooltip arrow positioning.
+   */
+  border?: CSSProperties['border']
   setIsOpen?: (value: boolean) => void
   afterShow?: () => void
   afterHide?: () => void

src/utils/compute-positions-types.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react'
 import type { Middleware } from '../components/Tooltip/TooltipTypes'
 
 export interface IComputePositions {
@@ -8,5 +9,5 @@ export interface IComputePositions {
   offset?: number
   strategy?: 'absolute' | 'fixed'
   middlewares?: Middleware[]
-  border?: string | null
+  border?: CSSProperties['border']
 }

src/utils/compute-positions.ts

@@ -9,7 +9,7 @@ export const computeTooltipPosition = async ({
   offset: offsetValue = 10,
   strategy = 'absolute',
   middlewares = [offset(Number(offsetValue)), flip(), shift({ padding: 5 })],
-  border = null,
+  border,
 }: IComputePositions) => {
   if (!elementReference) {
     // elementReference can be null or undefined and we will not compute the position
@@ -53,13 +53,26 @@ export const computeTooltipPosition = async ({
           left: { borderTop: border, borderRight: border },
         }[placement.split('-')[0]]
 
+      let borderWidth = 0
+      if (border) {
+        const match = `${border}`.match(/(\d+)px/)
+        if (match?.[1]) {
+          borderWidth = Number(match[1])
+        } else {
+          /**
+           * this means `border` was set without `width`, or non-px value
+           */
+          borderWidth = 1
+        }
+      }
+
       const arrowStyle = {
         left: arrowX != null ? `${arrowX}px` : '',
         top: arrowY != null ? `${arrowY}px` : '',
         right: '',
         bottom: '',
-        ...{ ...borderSide },
-        [staticSide]: border ? '-5px' : '-4px',
+        ...borderSide,
+        [staticSide]: `-${4 + borderWidth}px`,
       }
 
       return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle, place: placement }

src/utils/css-attr-is-valid.ts

@@ -0,0 +1,25 @@
+export const cssAttrIsValid = (attr: string, value: unknown) => {
+  const iframe = document.createElement('iframe')
+  Object.apply(iframe.style, {
+    display: 'none',
+    // in case `display: none` not supported
+    width: '0px',
+    height: '0px',
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } as any)
+  document.body.appendChild(iframe)
+  if (!iframe.contentDocument) {
+    return true
+  }
+  const style = iframe.contentDocument.createElement('style')
+  style.innerHTML = `.test-css { ${attr}: ${value}; }`
+  iframe.contentDocument.head.appendChild(style)
+  const { sheet } = style
+  if (!sheet) {
+    return true
+  }
+  const result = sheet.cssRules[0].cssText
+  iframe.remove()
+  const match = result.match(new RegExp(`${attr}:`))
+  return !!match
+}