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

A tag labels UI objects for quick recognition and navigation.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useButtonInteraction = useButtonInteraction;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
/**
 * Hook for tracking link/button hover/focus state (replaces CSS :has() selectors in this component)
 */
function useButtonInteraction() {
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    isLinkHovered = _useState2[0],
    setIsLinkHovered = _useState2[1];
  var _useState3 = (0, _react.useState)(false),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
    isOverButton = _useState4[0],
    setIsOverButton = _useState4[1];
  var _useState5 = (0, _react.useState)(false),
    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
    isButtonFocused = _useState6[0],
    setIsButtonFocused = _useState6[1];
  var _useState7 = (0, _react.useState)(false),
    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
    isLinkFocused = _useState8[0],
    setIsLinkFocused = _useState8[1];
  // Track if last interaction was via mouse (to determine keyboard vs mouse focus)
  var hadMouseDownRef = (0, _react.useRef)(false);

  // Button handlers
  var buttonHandlers = (0, _react.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 = (0, _react.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
  };
}