@shopify/polaris/dist/esm/components/Tooltip/Tooltip.js

Shopify’s product component library

import { Key } from '../../types.js';
import React$1, { useState, useRef, useEffect, useCallback } from 'react';
import { useUniqueId } from '../../utilities/unique-id/hooks.js';
import { findFirstFocusableNode } from '../../utilities/focus.js';
import { Portal as Portal$1 } from '../Portal/Portal.js';
import { useToggle as useToggle$1 } from '../../utilities/use-toggle.js';
import styles from './Tooltip.scss.js';
import { TooltipOverlay as TooltipOverlay$1 } from './components/TooltipOverlay/TooltipOverlay.js';

function Tooltip({
  children,
  content,
  light,
  dismissOnMouseOut,
  active: originalActive,
  preferredPosition = 'below',
  activatorWrapper = 'span',
  accessibilityLabel
}) {
  const WrapperComponent = activatorWrapper;
  const {
    value: active,
    setTrue: handleFocus,
    setFalse: handleBlur
  } = useToggle$1(Boolean(originalActive));
  const [activatorNode, setActivatorNode] = useState(null);
  const id = useUniqueId('TooltipContent');
  const activatorContainer = useRef(null);
  const mouseEntered = useRef(false);
  useEffect(() => {
    const firstFocusable = activatorContainer.current ? findFirstFocusableNode(activatorContainer.current) : null;
    const accessibilityNode = firstFocusable || activatorContainer.current;
    if (!accessibilityNode) return;
    accessibilityNode.tabIndex = 0;
    accessibilityNode.setAttribute('aria-describedby', id);
  }, [id, children]);
  const handleKeyUp = useCallback(event => {
    if (event.keyCode !== Key.Escape) return;
    handleBlur();
  }, [handleBlur]);
  const portal = activatorNode ? /*#__PURE__*/React$1.createElement(Portal$1, {
    idPrefix: "tooltip"
  }, /*#__PURE__*/React$1.createElement(TooltipOverlay$1, {
    id: id,
    preferredPosition: preferredPosition,
    activator: activatorNode,
    active: active,
    accessibilityLabel: accessibilityLabel,
    onClose: noop,
    light: light,
    preventInteraction: dismissOnMouseOut
  }, /*#__PURE__*/React$1.createElement("div", {
    className: styles.Label
  }, content))) : null;
  return /*#__PURE__*/React$1.createElement(WrapperComponent, {
    onFocus: handleFocus,
    onBlur: handleBlur,
    onMouseLeave: handleMouseLeave,
    onMouseOver: handleMouseEnterFix,
    ref: setActivator,
    onKeyUp: handleKeyUp
  }, children, portal);

  function setActivator(node) {
    const activatorContainerRef = activatorContainer;

    if (node == null) {
      activatorContainerRef.current = null;
      setActivatorNode(null);
      return;
    }

    node.firstElementChild instanceof HTMLElement && setActivatorNode(node.firstElementChild);
    activatorContainerRef.current = node;
  }

  function handleMouseEnter() {
    mouseEntered.current = true;
    handleFocus();
  }

  function handleMouseLeave() {
    mouseEntered.current = false;
    handleBlur();
  } // https://github.com/facebook/react/issues/10109
  // Mouseenter event not triggered when cursor moves from disabled button


  function handleMouseEnterFix() {
    !mouseEntered.current && handleMouseEnter();
  }
}

function noop() {}

export { Tooltip };