@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
85 lines • 5.26 kB
JavaScript
/* themed-icon-button.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["icon", "label", "tooltip", "isTooltipDisabled", "shouldShowLabel"];
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';
var styles = {
label: "_k48p1wq8"
};
export var ThemedIconButton = /*#__PURE__*/forwardRef(function ThemedIconButton(_ref, ref) {
var _tooltip$content;
var Icon = _ref.icon,
label = _ref.label,
tooltip = _ref.tooltip,
isTooltipDisabled = _ref.isTooltipDisabled,
_ref$shouldShowLabel = _ref.shouldShowLabel,
shouldShowLabel = _ref$shouldShowLabel === void 0 ? false : _ref$shouldShowLabel,
props = _objectWithoutProperties(_ref, _excluded);
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
}), function (triggerProps) {
return (
/*#__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: function onClick(event, analyticsEvent) {
var _props$onClick, _triggerProps$onClick;
(_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, event, analyticsEvent);
triggerProps === null || triggerProps === void 0 || (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 || _triggerProps$onClick.call(triggerProps, event);
},
onMouseOver: function onMouseOver(e) {
var _triggerProps$onMouse, _props$onMouseOver;
(_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 || _triggerProps$onMouse.call(triggerProps, e);
(_props$onMouseOver = props.onMouseOver) === null || _props$onMouseOver === void 0 || _props$onMouseOver.call(props, e);
},
onMouseOut: function onMouseOut(e) {
var _triggerProps$onMouse2, _props$onMouseOut;
(_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 || _triggerProps$onMouse2.call(triggerProps, e);
(_props$onMouseOut = props.onMouseOut) === null || _props$onMouseOut === void 0 || _props$onMouseOut.call(props, e);
},
onMouseMove: function onMouseMove(e) {
var _triggerProps$onMouse3, _props$onMouseMove;
(_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 || _triggerProps$onMouse3.call(triggerProps, e);
(_props$onMouseMove = props.onMouseMove) === null || _props$onMouseMove === void 0 || _props$onMouseMove.call(props, e);
},
onMouseDown: function onMouseDown(e) {
var _triggerProps$onMouse4, _props$onMouseDown;
(_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 || _triggerProps$onMouse4.call(triggerProps, e);
(_props$onMouseDown = props.onMouseDown) === null || _props$onMouseDown === void 0 || _props$onMouseDown.call(props, e);
},
onFocus: function onFocus(e) {
var _triggerProps$onFocus, _props$onFocus;
(_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 || _triggerProps$onFocus.call(triggerProps, e);
(_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, e);
},
onBlur: function onBlur(e) {
var _triggerProps$onBlur, _props$onBlur;
(_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
(_props$onBlur = props.onBlur) === null || _props$onBlur === 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))
);
})
);
});