import _extends from "@babel/runtime/helpers/extends";
import React from '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.
 */
export default (function (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.createElement(Button, _extends({}, props, {
      onMouseEnter: setBorderStyle,
      onMouseLeave: removeBorderStyle
    }));
  };
});