@atlaskit/primitives/dist/esm/components/link.js

Primitives are token-backed low-level building blocks.

import _extends from "@babel/runtime/helpers/extends";
import _typeof from "@babel/runtime/helpers/typeof";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "rel"];
import React, { forwardRef } from 'react';
import invariant from 'tiny-invariant';
import { useRouterLink } from '@atlaskit/app-provider';
import { xcss } from '../xcss/xcss';
import Box from './box';
// TODO: Duplicated FocusRing styles due to lack of `xcss` support
// and to prevent additional dependency
var baseFocusRingStyles = {
  outlineColor: 'color.border.focused',
  outlineWidth: 'border.width.outline',
  outlineStyle: 'solid',
  outlineOffset: 'space.025'
};
var focusRingStyles = xcss({
  ':focus-visible': baseFocusRingStyles,
  '@supports not selector(*:focus-visible)': {
    ':focus': baseFocusRingStyles
  },
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
    ':focus-visible': {
      outline: '1px solid'
    }
  }
});
var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
var Link = function Link(_ref, ref) {
  var href = _ref.href,
    children = _ref.children,
    backgroundColor = _ref.backgroundColor,
    padding = _ref.padding,
    paddingBlock = _ref.paddingBlock,
    paddingBlockStart = _ref.paddingBlockStart,
    paddingBlockEnd = _ref.paddingBlockEnd,
    paddingInline = _ref.paddingInline,
    paddingInlineStart = _ref.paddingInlineStart,
    paddingInlineEnd = _ref.paddingInlineEnd,
    testId = _ref.testId,
    xcssStyles = _ref.xcss,
    target = _ref.target,
    rel = _ref.rel,
    htmlAttributes = _objectWithoutProperties(_ref, _excluded);
  var RouterLink = useRouterLink();

  // Combine default styles with supplied styles. XCSS does not support deep nested arrays
  var styles = Array.isArray(xcssStyles) ? [focusRingStyles].concat(_toConsumableArray(xcssStyles)) : [focusRingStyles, xcssStyles];
  var isExternal = typeof href === 'string' && IS_EXTERNAL_LINK_REGEX.test(href);
  var isNonHttpBased = typeof href === 'string' && IS_NON_HTTP_BASED.test(href);

  /**
   * Renders a router link if:
   * - a link component is set in the app provider
   * - it's not an external link (starting with http:// or https://)
   * - it's not a non-HTTP-based link (e.g. emails, phone numbers, hash links etc.)
   */
  var isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
  var hrefObjectUsedWithoutRouterLink = RouterLink === undefined && _typeof(href) === 'object';
  invariant(!hrefObjectUsedWithoutRouterLink, "@atlaskit/primitives: Link primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider");
  return /*#__PURE__*/React.createElement(Box
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
  , _extends({}, htmlAttributes, {
    // @ts-expect-error (TODO: Box doesn't allow `as` components)
    as: isRouterLink ? RouterLink : 'a',
    ref: ref,
    testId: testId,
    "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined,
    href: !isRouterLink && typeof href !== 'string' ? undefined : href,
    target: isExternal && target === undefined ? '_blank' : target,
    rel: isExternal && rel === undefined ? 'noopener noreferrer' : rel,
    backgroundColor: backgroundColor,
    padding: padding,
    paddingBlock: paddingBlock,
    paddingBlockStart: paddingBlockStart,
    paddingBlockEnd: paddingBlockEnd,
    paddingInline: paddingInline,
    paddingInlineStart: paddingInlineStart,
    paddingInlineEnd: paddingInlineEnd
    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
    ,
    xcss: styles
  }), children);
};

// Workarounds to support generic types with forwardRef
/**
 * __UNSAFE_LINK__
 *
 * @internal Still under development. Do not use.
 *
 * A Link is a primitive component that renders an `<a>` anchor. It utilizes
 * the configured router link component in the AppProvider if set.
 *
 * - [Examples](https://atlassian.design/components/primitives/link/examples)
 * - [Code](https://atlassian.design/components/primitives/link/code)
 * - [Usage](https://atlassian.design/components/primitives/link/usage)
 */
var UNSAFE_LINK = /*#__PURE__*/forwardRef(Link);
export default UNSAFE_LINK;