@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
80 lines • 4.63 kB
JavaScript
/* themed-icon-button.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import "./themed-icon-button.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { forwardRef } from 'react';
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
import Tooltip from '@atlaskit/tooltip/Tooltip';
import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
import IconRenderer from '../icon-renderer';
import { ThemedPressable } from './themed-pressable';
const styles = {
label: "_k48p1wq8"
};
export const ThemedIconButton = /*#__PURE__*/forwardRef(function ThemedIconButton({
icon: Icon,
label,
tooltip,
isTooltipDisabled,
shouldShowLabel = false,
...props
}, ref) {
var _tooltip$content;
return (
/*#__PURE__*/
// Keep the trigger mounted when tooltip availability changes so focus is preserved.
React.createElement(Tooltip, _extends({}, tooltip, {
content: isTooltipDisabled || shouldShowLabel ? null : (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label
}), triggerProps =>
/*#__PURE__*/
/**
* The `aria-describedby` from `triggerProps` is intentionally not passed down,
* because it would cause double announcements with the `VisuallyHidden` label.
*
* The `@atlaskit/button` IconButton uses the same approach.
*/
React.createElement(ThemedPressable, _extends({}, props, {
shape: shouldShowLabel ? 'default' : 'square',
ref: mergeRefs([ref, triggerProps.ref]),
onClick: (event, analyticsEvent) => {
var _props$onClick, _triggerProps$onClick;
(_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props, 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);
},
onMouseOver: e => {
var _triggerProps$onMouse, _props$onMouseOver;
(_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 ? void 0 : _triggerProps$onMouse.call(triggerProps, e);
(_props$onMouseOver = props.onMouseOver) === null || _props$onMouseOver === void 0 ? void 0 : _props$onMouseOver.call(props, e);
},
onMouseOut: e => {
var _triggerProps$onMouse2, _props$onMouseOut;
(_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 ? void 0 : _triggerProps$onMouse2.call(triggerProps, e);
(_props$onMouseOut = props.onMouseOut) === null || _props$onMouseOut === void 0 ? void 0 : _props$onMouseOut.call(props, e);
},
onMouseMove: e => {
var _triggerProps$onMouse3, _props$onMouseMove;
(_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 ? void 0 : _triggerProps$onMouse3.call(triggerProps, e);
(_props$onMouseMove = props.onMouseMove) === null || _props$onMouseMove === void 0 ? void 0 : _props$onMouseMove.call(props, e);
},
onMouseDown: e => {
var _triggerProps$onMouse4, _props$onMouseDown;
(_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 ? void 0 : _triggerProps$onMouse4.call(triggerProps, e);
(_props$onMouseDown = props.onMouseDown) === null || _props$onMouseDown === void 0 ? void 0 : _props$onMouseDown.call(props, e);
},
onFocus: e => {
var _triggerProps$onFocus, _props$onFocus;
(_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 ? void 0 : _triggerProps$onFocus.call(triggerProps, e);
(_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 ? void 0 : _props$onFocus.call(props, e);
},
onBlur: e => {
var _triggerProps$onBlur, _props$onBlur;
(_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 ? void 0 : _triggerProps$onBlur.call(triggerProps, e);
(_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 ? void 0 : _props$onBlur.call(props, e);
}
}), /*#__PURE__*/React.createElement(IconRenderer, {
icon: Icon
}), shouldShowLabel ? /*#__PURE__*/React.createElement("span", {
className: ax([styles.label])
}, label) : /*#__PURE__*/React.createElement(VisuallyHidden, null, label)))
);
});