import PropTypes from "prop-types";
import React, { useContext } from "react";
import { RicosContext } from "./../../ricos-context/index.js";
import { NEW_PAIR_BUTTON } from "../data-hooks.js";
import styles from "../statics/styles/new-pair-button-scss.js";
function NewPairButton({
  label,
  onClick
}) {
  const { tabIndex } = useContext(RicosContext);
  return (
    //using 'div' element instead of 'button' to fix a bug of focus on element in Firefox in OSX
    // further reading, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus#Clicking_and_focus
    /* @__PURE__ */ React.createElement(
      "div",
      {
        role: "button",
        tabIndex,
        className: styles.new_pair_container,
        onClick,
        onKeyPress: (e) => {
          if (e.key === "Enter" || e.key === " ") {
            onClick(e);
          }
        },
        onMouseDown: (e) => {
          e.preventDefault();
          e.stopPropagation();
        },
        "data-hook": NEW_PAIR_BUTTON
      },
      /* @__PURE__ */ React.createElement("div", { className: styles.new_pair_button }, /* @__PURE__ */ React.createElement("label", { className: styles.new_pair_label }, label))
    )
  );
}
NewPairButton.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired
};
export {
  NewPairButton
};
//# sourceMappingURL=new-pair-button.js.map
