@primer/react/lib/Link/Link.js

An implementation of GitHub's Primer Design System using React

'use strict';

var clsx = require('clsx');
var React = require('react');
var Link_module = require('./Link.module.css.js');
var jsxRuntime = require('react/jsx-runtime');
var useRefObjectAsForwardedRef = require('../hooks/useRefObjectAsForwardedRef.js');
var Box = require('../Box/Box.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

const Link = /*#__PURE__*/React.forwardRef(({
  as: Component = 'a',
  className,
  inline,
  underline,
  hoverColor,
  ...props
}, forwardedRef) => {
  const innerRef = React__default.default.useRef(null);
  useRefObjectAsForwardedRef.useRefObjectAsForwardedRef(forwardedRef, innerRef);
  if (process.env.NODE_ENV !== "production") {
    /**
     * The Linter yells because it thinks this conditionally calls an effect,
     * but since this is a compile-time flag and not a runtime conditional
     * this is safe, and ensures the entire effect is kept out of prod builds
     * shaving precious bytes from the output, and avoiding mounting a noop effect
     */
    // eslint-disable-next-line react-compiler/react-compiler
    // eslint-disable-next-line react-hooks/rules-of-hooks
    React.useEffect(() => {
      if (innerRef.current && !(innerRef.current instanceof HTMLButtonElement) && !(innerRef.current instanceof HTMLAnchorElement)) {
        // eslint-disable-next-line no-console
        console.error('Error: Found `Link` component that renders an inaccessible element', innerRef.current, 'Please ensure `Link` always renders as <a> or <button>');
      }
    }, [innerRef]);
  }
  if (props.sx) {
    return /*#__PURE__*/jsxRuntime.jsx(Box, {
      as: Component,
      className: clsx.clsx(className, Link_module.Link),
      "data-muted": props.muted,
      "data-inline": inline,
      "data-underline": underline,
      "data-hover-color": hoverColor,
      ...props,
      // @ts-ignore shh
      ref: innerRef
    });
  }
  return /*#__PURE__*/jsxRuntime.jsx(Component, {
    className: clsx.clsx(className, Link_module.Link),
    "data-muted": props.muted,
    "data-inline": inline,
    "data-underline": underline,
    "data-hover-color": hoverColor,
    ...props,
    // @ts-ignore shh
    ref: innerRef
  });
});
Link.displayName = 'Link';

module.exports = Link;