@atlaskit/tag/dist/esm/tag-new/use-button-interaction.js

A tag labels UI objects for quick recognition and navigation.

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { useMemo, useRef, useState } from 'react';

/**
 * Hook for tracking link/button hover/focus state (replaces CSS :has() selectors in this component)
 */
export function useButtonInteraction() {
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isLinkHovered = _useState2[0],
    setIsLinkHovered = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    isOverButton = _useState4[0],
    setIsOverButton = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    isButtonFocused = _useState6[0],
    setIsButtonFocused = _useState6[1];
  var _useState7 = useState(false),
    _useState8 = _slicedToArray(_useState7, 2),
    isLinkFocused = _useState8[0],
    setIsLinkFocused = _useState8[1];
  // Track if last interaction was via mouse (to determine keyboard vs mouse focus)
  var hadMouseDownRef = useRef(false);

  // Button handlers
  var buttonHandlers = useMemo(function () {
    return {
      onMouseEnter: function onMouseEnter() {
        return setIsOverButton(true);
      },
      onMouseLeave: function onMouseLeave() {
        return setIsOverButton(false);
      },
      onMouseDown: function onMouseDown(e) {
        // Prevent the browser from moving focus to the remove button on mousedown.
        // Without this, parent composite widgets (e.g. Select) lose input focus when
        // the user clicks remove, triggering unwanted blur side-effects.
        e === null || e === void 0 || e.preventDefault();
        hadMouseDownRef.current = true;
      },
      onFocus: function onFocus() {
        // Only track keyboard focus for focus ring styles
        // If mousedown happened just before focus, it's mouse focus (not keyboard)
        if (!hadMouseDownRef.current) {
          setIsButtonFocused(true);
        }
        hadMouseDownRef.current = false;
      },
      onBlur: function onBlur() {
        return setIsButtonFocused(false);
      }
    };
  }, []);

  // Link handlers - includes hover tracking
  var linkHandlers = useMemo(function () {
    return {
      onMouseEnter: function onMouseEnter() {
        return setIsLinkHovered(true);
      },
      onMouseLeave: function onMouseLeave() {
        return setIsLinkHovered(false);
      },
      onMouseDown: function onMouseDown() {
        hadMouseDownRef.current = true;
      },
      onFocus: function onFocus() {
        // Only track keyboard focus for focus ring styles
        // If mousedown happened just before focus, it's mouse focus (not keyboard)
        if (!hadMouseDownRef.current) {
          setIsLinkFocused(true);
        }
        hadMouseDownRef.current = false;
      },
      onBlur: function onBlur() {
        return setIsLinkFocused(false);
      }
    };
  }, []);
  return {
    isLinkHovered: isLinkHovered,
    isOverButton: isOverButton,
    isButtonFocused: isButtonFocused,
    isLinkFocused: isLinkFocused,
    buttonHandlers: buttonHandlers,
    linkHandlers: linkHandlers
  };
}