@atlaskit/button/dist/cjs/new-button/variants/icon/link.js

A button triggers an event or action. They let users know what will happen next.

/* link.tsx generated by @compiled/babel-plugin v0.39.1 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("./link.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _css2 = require("@atlaskit/css");
var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _compiled = require("@atlaskit/primitives/compiled");
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
var _content = _interopRequireDefault(require("../shared/content"));
var _iconRenderer = _interopRequireDefault(require("../shared/icon-renderer"));
var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shape", "spacing", "testId", "tooltip"],
  _excluded2 = ["className", "css", "as", "style"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var styles = {
  base: "_2rkofajl _11c8fhey _v5649dqc _189eidpf _1rjc12x7 _1e0c116y _vchhusvi _1bsb1wug _p12f1osq _kqswh2mm _4cvr1q9y _1bah1h6o _gy1p1b66 _1o9zidpf _4t3iviql _k48p1wq8 _y4tiutpp _bozgutpp _y3gn1h6o _s7n4nkob _14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _11fnglyw _18postnw",
  baseT26Shape: "_2rko1qi0",
  linkDecorationUnset: "_4bfu1snc _1hmsagmp _ajmmvv82 _1a3b1r31 _4fprglyw _5goinqa1 _9oik1r31 _1bnxglyw _jf4cnqa1 _1nrm1r31 _c2waglyw _1iohnqa1",
  disabled: "_80om13gf _bfhkby5v _syaz1gmx _aetrglyw _irr3by5v _30l31gmx _1di6by5v _9h8h1gmx",
  spacingCompact: "_1rjcv77o _gy1p1b66 _y4tiutpp _bozgutpp _s7n4nkob _4t3i1k8s _1bsb1k8s",
  iconButton: "_4t3iviql _1bsbviql _y4tize3t _bozgze3t",
  circle: "_2rko1rr0"
};
var defaultStyles = {
  root: "_bfhksm61 _syazazsu _8l3m1l7x _aetrb3bt _1053azsu _f8pjazsu _irr31dpa _30l3azsu _1di6fcek _9h8hazsu"
};
var primaryStyles = {
  root: "_bfhk1856 _syaz15cr _105315cr _30l315cr _irr3hf2y _9h8h15cr _1di6g6ey"
};
var discoveryStyles = {
  root: "_bfhku5tj _syaz15cr _105315cr _30l315cr _irr3fqeg _9h8h15cr _1di61f1m"
};
var subtleStyles = {
  root: "_bfhksm61 _syazazsu _1053azsu _f8pj1mjl _irr31dpa _30l3azsu _1di6fcek _9h8hazsu"
};
var selectedStyles = {
  root: "_bfhk15s3 _syaz6x5g _8l3mq98m _aetrb3bt _10536x5g _f8pj6x5g _30l36x5g _9h8h6x5g",
  discovery: "_bfhk15s3 _syaz6x5g _30l36x5g _irr315s3 _9h8h6x5g _1di615s3"
};
var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
  var preventedAriaLabel = _ref['aria-label'],
    ariaLabelledBy = _ref['aria-labelledby'],
    analyticsContext = _ref.analyticsContext,
    _ref$appearance = _ref.appearance,
    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
    _ref$autoFocus = _ref.autoFocus,
    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
    href = _ref.href,
    icon = _ref.icon,
    interactionName = _ref.interactionName,
    isDisabled = _ref.isDisabled,
    isSelected = _ref.isSelected,
    _ref$isTooltipDisable = _ref.isTooltipDisabled,
    isTooltipDisabled = _ref$isTooltipDisable === void 0 ? true : _ref$isTooltipDisable,
    label = _ref.label,
    _onClick = _ref.onClick,
    onClickCapture = _ref.onClickCapture,
    onKeyDownCapture = _ref.onKeyDownCapture,
    onKeyUpCapture = _ref.onKeyUpCapture,
    onMouseDownCapture = _ref.onMouseDownCapture,
    onMouseUpCapture = _ref.onMouseUpCapture,
    onPointerDownCapture = _ref.onPointerDownCapture,
    onPointerUpCapture = _ref.onPointerUpCapture,
    onTouchEndCapture = _ref.onTouchEndCapture,
    onTouchStartCapture = _ref.onTouchStartCapture,
    shape = _ref.shape,
    spacing = _ref.spacing,
    testId = _ref.testId,
    tooltip = _ref.tooltip,
    unsafeRest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  // @ts-expect-error
  var _className = unsafeRest.className,
    _css = unsafeRest.css,
    _as = unsafeRest.as,
    _style = unsafeRest.style,
    saferRest = (0, _objectWithoutProperties2.default)(unsafeRest, _excluded2);
  var localRef = (0, _react.useRef)(null);
  (0, _useAutoFocus.default)(localRef, autoFocus);
  if (!isTooltipDisabled) {
    var _tooltip$content;
    return /*#__PURE__*/React.createElement(_tooltip.default, {
      content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label,
      testId: tooltip === null || tooltip === void 0 ? void 0 : tooltip.testId,
      position: tooltip === null || tooltip === void 0 ? void 0 : tooltip.position,
      delay: tooltip === null || tooltip === void 0 ? void 0 : tooltip.delay,
      onShow: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onShow,
      onHide: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onHide,
      mousePosition: tooltip === null || tooltip === void 0 ? void 0 : tooltip.mousePosition,
      analyticsContext: tooltip === null || tooltip === void 0 ? void 0 : tooltip.analyticsContext,
      strategy: tooltip === null || tooltip === void 0 ? void 0 : tooltip.strategy,
      tag: tooltip === null || tooltip === void 0 ? void 0 : tooltip.tag,
      truncate: tooltip === null || tooltip === void 0 ? void 0 : tooltip.truncate,
      component: tooltip === null || tooltip === void 0 ? void 0 : tooltip.component,
      hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
      hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown,
      ignoreTooltipPointerEvents: tooltip === null || tooltip === void 0 ? void 0 : tooltip.ignoreTooltipPointerEvents
    }, function (triggerProps) {
      return /*#__PURE__*/React.createElement(_compiled.Anchor, (0, _extends2.default)({}, saferRest, {
        "aria-labelledby": ariaLabelledBy,
        testId: testId,
        componentName: "LinkIconButton",
        analyticsContext: analyticsContext,
        interactionName: interactionName
        // Shared between tooltip and native props
        ,
        onMouseOver: function onMouseOver(e) {
          var _triggerProps$onMouse, _saferRest$onMouseOve;
          (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 || _triggerProps$onMouse.call(triggerProps, e);
          (_saferRest$onMouseOve = saferRest.onMouseOver) === null || _saferRest$onMouseOve === void 0 || _saferRest$onMouseOve.call(saferRest, e);
        },
        onMouseOut: function onMouseOut(e) {
          var _triggerProps$onMouse2, _saferRest$onMouseOut;
          (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 || _triggerProps$onMouse2.call(triggerProps, e);
          (_saferRest$onMouseOut = saferRest.onMouseOut) === null || _saferRest$onMouseOut === void 0 || _saferRest$onMouseOut.call(saferRest, e);
        },
        onMouseMove: function onMouseMove(e) {
          var _triggerProps$onMouse3, _saferRest$onMouseMov;
          (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 || _triggerProps$onMouse3.call(triggerProps, e);
          (_saferRest$onMouseMov = saferRest.onMouseMove) === null || _saferRest$onMouseMov === void 0 || _saferRest$onMouseMov.call(saferRest, e);
        },
        onMouseDown: function onMouseDown(e) {
          var _triggerProps$onMouse4, _saferRest$onMouseDow;
          (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 || _triggerProps$onMouse4.call(triggerProps, e);
          (_saferRest$onMouseDow = saferRest.onMouseDown) === null || _saferRest$onMouseDow === void 0 || _saferRest$onMouseDow.call(saferRest, e);
        },
        onFocus: function onFocus(e) {
          var _triggerProps$onFocus, _saferRest$onFocus;
          (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 || _triggerProps$onFocus.call(triggerProps, e);
          (_saferRest$onFocus = saferRest.onFocus) === null || _saferRest$onFocus === void 0 || _saferRest$onFocus.call(saferRest, e);
        },
        onBlur: function onBlur(e) {
          var _triggerProps$onBlur, _saferRest$onBlur;
          (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
          (_saferRest$onBlur = saferRest.onBlur) === null || _saferRest$onBlur === void 0 || _saferRest$onBlur.call(saferRest, e);
        }
        // Shared between tooltip and base props
        ,
        onClick: function onClick(event, analyticsEvent) {
          var _triggerProps$onClick;
          _onClick === null || _onClick === void 0 || _onClick(event, analyticsEvent);
          triggerProps === null || triggerProps === void 0 || (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 || _triggerProps$onClick.call(triggerProps, event);
        },
        ref: (0, _mergeRefs.default)([localRef, ref, triggerProps.ref].filter(Boolean))
        // Base props only
        ,
        xcss: (0, _css2.cx)(styles.base, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact, shape === 'circle' && styles.circle),
        onMouseDownCapture: onMouseDownCapture,
        onMouseUpCapture: onMouseUpCapture,
        onKeyDownCapture: onKeyDownCapture,
        onKeyUpCapture: onKeyUpCapture,
        onTouchStartCapture: onTouchStartCapture,
        onTouchEndCapture: onTouchEndCapture,
        onPointerDownCapture: onPointerDownCapture,
        onPointerUpCapture: onPointerUpCapture,
        onClickCapture: onClickCapture
        /**
         * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
         * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
         */
        // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
        ,
        href: isDisabled ? undefined : href,
        role: isDisabled ? 'link' : undefined,
        "aria-disabled": isDisabled === true ? true : undefined
      }), /*#__PURE__*/React.createElement(_content.default, {
        type: "icon",
        isLoading: false
      }, /*#__PURE__*/React.createElement(_iconRenderer.default, {
        icon: icon
      }), /*#__PURE__*/React.createElement(_visuallyHidden.default, null, label)));
    });
  }
  return /*#__PURE__*/React.createElement(_compiled.Anchor
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
  , (0, _extends2.default)({}, saferRest, {
    // aria-label={preventedAriaLabel}
    "aria-labelledby": ariaLabelledBy,
    ref: (0, _mergeRefs.default)([localRef, ref]),
    xcss: (0, _css2.cx)(styles.base, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && styles.baseT26Shape, appearance === 'default' && defaultStyles.root, appearance === 'primary' && primaryStyles.root, appearance === 'discovery' && discoveryStyles.root, appearance === 'subtle' && subtleStyles.root, styles.linkDecorationUnset, isSelected && selectedStyles.root, isSelected && appearance === 'discovery' && selectedStyles.discovery, isDisabled && styles.disabled, styles.iconButton, spacing === 'compact' && styles.spacingCompact, shape === 'circle' && styles.circle),
    onClick: _onClick,
    onMouseDownCapture: onMouseDownCapture,
    onMouseUpCapture: onMouseUpCapture,
    onKeyDownCapture: onKeyDownCapture,
    onKeyUpCapture: onKeyUpCapture,
    onTouchStartCapture: onTouchStartCapture,
    onTouchEndCapture: onTouchEndCapture,
    onPointerDownCapture: onPointerDownCapture,
    onPointerUpCapture: onPointerUpCapture,
    onClickCapture: onClickCapture,
    testId: testId
    /**
     * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
     * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
     */
    // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
    ,
    href: isDisabled ? undefined : href,
    role: isDisabled ? 'link' : undefined,
    "aria-disabled": isDisabled === true ? true : undefined,
    componentName: "LinkIconButton",
    analyticsContext: analyticsContext,
    interactionName: interactionName
  }), /*#__PURE__*/React.createElement(_content.default, {
    type: "icon",
    isLoading: false
  }, /*#__PURE__*/React.createElement(_iconRenderer.default, {
    icon: icon
  }), /*#__PURE__*/React.createElement(_visuallyHidden.default, null, label)));
};

// Workarounds to support generic types with forwardRef + memo
var WithRef = /*#__PURE__*/(0, _react.forwardRef)(LinkIconButtonBase);

/**
 * __Link Icon Button__
 *
 * Renders a link in the style of an icon button.
 *
 * - [Examples](https://atlassian.design/components/button/link-icon-button/examples)
 * - [Code](https://atlassian.design/components/button/link-icon-button/code)
 * - [Usage](https://atlassian.design/components/button/link-icon-button/usage)
 */
var LinkIconButton = /*#__PURE__*/(0, _react.memo)(WithRef);
var _default = exports.default = LinkIconButton;