"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
/**
 * This HOC serves as a temporary workaround for controlling the style of a parent component.
 * We do not want the Frame to have a hover state when hovering over the action button.
 * TODO: When Firefox begins supporting the :has()pseudo-selector (e.g "frame:has(button:hover){...}"),
 * it should be used instead and the code should be cleaned up.
 */
var _default = exports.default = function _default(Button, frameRef) {
  return function (props) {
    var setBorderStyle = function setBorderStyle() {
      var frameNode = frameRef.current;
      if (frameNode) {
        frameNode.style.borderColor = "var(--ds-border, #0B120E24)";
      }
    };
    var removeBorderStyle = function removeBorderStyle() {
      var frameNode = frameRef.current;
      if (frameNode) {
        frameNode.removeAttribute('style');
      }
    };
    return /*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({}, props, {
      onMouseEnter: setBorderStyle,
      onMouseLeave: removeBorderStyle
    }));
  };
};