@atlaskit/button
Version:
A button triggers an event or action. They let users know what will happen next.
224 lines (222 loc) • 12 kB
JavaScript
/* link.tsx generated by @compiled/babel-plugin v0.39.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./link.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { forwardRef, memo, useRef } from 'react';
import { cx } from '@atlaskit/css';
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
import { fg } from '@atlaskit/platform-feature-flags';
import { Anchor } from '@atlaskit/primitives/compiled';
import Tooltip from '@atlaskit/tooltip';
import VisuallyHidden from '@atlaskit/visually-hidden';
import Content from '../shared/content';
import IconRenderer from '../shared/icon-renderer';
const 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"
};
const defaultStyles = {
root: "_bfhksm61 _syazazsu _8l3m1l7x _aetrb3bt _1053azsu _f8pjazsu _irr31dpa _30l3azsu _1di6fcek _9h8hazsu"
};
const primaryStyles = {
root: "_bfhk1856 _syaz15cr _105315cr _30l315cr _irr3hf2y _9h8h15cr _1di6g6ey"
};
const discoveryStyles = {
root: "_bfhku5tj _syaz15cr _105315cr _30l315cr _irr3fqeg _9h8h15cr _1di61f1m"
};
const subtleStyles = {
root: "_bfhksm61 _syazazsu _1053azsu _f8pj1mjl _irr31dpa _30l3azsu _1di6fcek _9h8hazsu"
};
const selectedStyles = {
root: "_bfhk15s3 _syaz6x5g _8l3mq98m _aetrb3bt _10536x5g _f8pj6x5g _30l36x5g _9h8h6x5g",
discovery: "_bfhk15s3 _syaz6x5g _30l36x5g _irr315s3 _9h8h6x5g _1di615s3"
};
const LinkIconButtonBase = ({
// Prevent duplicate labels being added.
'aria-label': preventedAriaLabel,
'aria-labelledby': ariaLabelledBy,
analyticsContext,
appearance = 'default',
autoFocus = false,
href,
icon,
interactionName,
isDisabled,
isSelected,
isTooltipDisabled = true,
label,
onClick,
onClickCapture,
onKeyDownCapture,
onKeyUpCapture,
onMouseDownCapture,
onMouseUpCapture,
onPointerDownCapture,
onPointerUpCapture,
onTouchEndCapture,
onTouchStartCapture,
shape,
spacing,
testId,
tooltip,
...unsafeRest
}, ref) => {
// @ts-expect-error
const {
className: _className,
css: _css,
as: _as,
style: _style,
...saferRest
} = unsafeRest;
const localRef = useRef(null);
useAutoFocus(localRef, autoFocus);
if (!isTooltipDisabled) {
var _tooltip$content;
return /*#__PURE__*/React.createElement(Tooltip, {
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
}, triggerProps => /*#__PURE__*/React.createElement(Anchor, _extends({}, saferRest, {
"aria-labelledby": ariaLabelledBy,
testId: testId,
componentName: "LinkIconButton",
analyticsContext: analyticsContext,
interactionName: interactionName
// Shared between tooltip and native props
,
onMouseOver: e => {
var _triggerProps$onMouse, _saferRest$onMouseOve;
(_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 ? void 0 : _triggerProps$onMouse.call(triggerProps, e);
(_saferRest$onMouseOve = saferRest.onMouseOver) === null || _saferRest$onMouseOve === void 0 ? void 0 : _saferRest$onMouseOve.call(saferRest, e);
},
onMouseOut: e => {
var _triggerProps$onMouse2, _saferRest$onMouseOut;
(_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 ? void 0 : _triggerProps$onMouse2.call(triggerProps, e);
(_saferRest$onMouseOut = saferRest.onMouseOut) === null || _saferRest$onMouseOut === void 0 ? void 0 : _saferRest$onMouseOut.call(saferRest, e);
},
onMouseMove: e => {
var _triggerProps$onMouse3, _saferRest$onMouseMov;
(_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 ? void 0 : _triggerProps$onMouse3.call(triggerProps, e);
(_saferRest$onMouseMov = saferRest.onMouseMove) === null || _saferRest$onMouseMov === void 0 ? void 0 : _saferRest$onMouseMov.call(saferRest, e);
},
onMouseDown: e => {
var _triggerProps$onMouse4, _saferRest$onMouseDow;
(_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 ? void 0 : _triggerProps$onMouse4.call(triggerProps, e);
(_saferRest$onMouseDow = saferRest.onMouseDown) === null || _saferRest$onMouseDow === void 0 ? void 0 : _saferRest$onMouseDow.call(saferRest, e);
},
onFocus: e => {
var _triggerProps$onFocus, _saferRest$onFocus;
(_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 ? void 0 : _triggerProps$onFocus.call(triggerProps, e);
(_saferRest$onFocus = saferRest.onFocus) === null || _saferRest$onFocus === void 0 ? void 0 : _saferRest$onFocus.call(saferRest, e);
},
onBlur: e => {
var _triggerProps$onBlur, _saferRest$onBlur;
(_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 ? void 0 : _triggerProps$onBlur.call(triggerProps, e);
(_saferRest$onBlur = saferRest.onBlur) === null || _saferRest$onBlur === void 0 ? void 0 : _saferRest$onBlur.call(saferRest, e);
}
// Shared between tooltip and base props
,
onClick: (event, analyticsEvent) => {
var _triggerProps$onClick;
onClick === null || onClick === void 0 ? void 0 : onClick(event, analyticsEvent);
triggerProps === null || triggerProps === void 0 ? void 0 : (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 ? void 0 : _triggerProps$onClick.call(triggerProps, event);
},
ref: mergeRefs([localRef, ref, triggerProps.ref].filter(Boolean))
// Base props only
,
xcss: cx(styles.base, 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, {
type: "icon",
isLoading: false
}, /*#__PURE__*/React.createElement(IconRenderer, {
icon: icon
}), /*#__PURE__*/React.createElement(VisuallyHidden, null, label))));
}
return /*#__PURE__*/React.createElement(Anchor
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
, _extends({}, saferRest, {
// aria-label={preventedAriaLabel}
"aria-labelledby": ariaLabelledBy,
ref: mergeRefs([localRef, ref]),
xcss: cx(styles.base, 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, {
type: "icon",
isLoading: false
}, /*#__PURE__*/React.createElement(IconRenderer, {
icon: icon
}), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)));
};
// Workarounds to support generic types with forwardRef + memo
const WithRef = /*#__PURE__*/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)
*/
const LinkIconButton = /*#__PURE__*/memo(WithRef);
export default LinkIconButton;