import classNames from "classnames";
import React, { useContext } from "react";
import { RicosContext } from "./../../ricos-context/index.js";
import { EXPAND_BUTTON } from "../data-hooks.js";
import { ArrowIcon } from "../icons/index.js";
import styles from "../statics/styles/collapsible-list-component-scss.js";
const ExpandCollapseButton = (props) => {
  const { tabIndex } = useContext(RicosContext);
  const { onClick, ariaLabel } = props;
  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.iconContainer} has-custom-focus`,
        onClick,
        onKeyUp: (e) => (e.key === " " || e.key === "Enter") && onClick(e),
        "data-hook": EXPAND_BUTTON,
        "aria-label": ariaLabel
      },
      /* @__PURE__ */ React.createElement(
        ArrowIcon,
        {
          className: classNames(styles.icon, {
            [styles.isExpanded]: props.isExpanded
          })
        }
      )
    )
  );
};
export {
  ExpandCollapseButton
};
//# sourceMappingURL=expand-collapse-button.js.map
