@atlaskit/breadcrumbs
Version:
Breadcrumbs are a navigation system used to show a user's location in a site or app.
160 lines (158 loc) • 12.9 kB
JavaScript
/* step.tsx generated by @compiled/babel-plugin v3.0.2 */
"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("./step.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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
var _css = require("@atlaskit/css");
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _compiled = require("@atlaskit/primitives/compiled");
var _useBreadcrumbsSize = require("./use-breadcrumbs-size");
var _excluded = ["analyticsContext", "elemBefore", "href", "iconAfter", "iconBefore", "onClick", "target", "testId", "children", "title", "truncationWidth", "triggerProps", "aria-label", "aria-labelledby", "aria-current", "aria-describedby", "onBlur", "onFocus", "onMouseDown", "onMouseMove", "onMouseOut", "onMouseOver"];
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); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var analyticsAttributes = {
componentName: 'breadcrumbsItem',
packageName: "@atlaskit/breadcrumbs",
packageVersion: "17.8.3"
};
var noop = _noop.default;
var styles = {
root: "_11c8fhey _19itglyw _zulp1b66 _2rkolb4i _4bfu1r31 _1hmsglyw _ajmmnqa1 _18zrze3t _bfhksm61 _syaz1rpy _1e0c116y _4cvr1h6o _1a3b1r31 _4fprglyw _5goinqa1 _f8pj1rpy _9oik1r31 _1bnx8stv _jf4cnqa1 _30l31rpy _9h8hi7uo",
rootSmall: "_11c8wadc",
rootRefresh: "_zulpze3t _vchhusvi _4t3i1k8s",
interactiveMotion: "_v564hxmd _1hms8stv _4bfu1j28 _o7kshxmd _9oik1rpy _1ggl87vo _1nrmi7uo",
withoutTruncation: "_1ul9idpf _1o9zkb7n",
withTruncation: "_1ul9idpf",
iconWrapper: "_1reo15vq _18m915vq _1e0c116y _1o9zidpf _1bsb1tcg _4t3i1tcg _4cvr1h6o _1bah1h6o",
iconWrapperSpacing: "_12l2v77o",
iconWrapperSmallSpacing: "_12l2ze3t",
text: "_1reo15vq _18m915vq _1bto1l2s _o5721q9c",
textWithIconAfter: "_12l21b66",
textWithTruncation: "_1ul9idpf _p12f1osq _1o9zkb7n"
};
var unboundedStyles = {
iconWrapperRefresh: "_1bsb1ejb _4t3i1ejb",
iconWrapperSmall: "_w8l57vkz _17527vkz",
iconWrapperSmallRefresh: "_w8l5pxbi _1752pxbi",
iconWrapper: "_syaz1cv2"
};
/**
* __Step__
*
* A button that represents a single step in a breadcrumbs component.
*/
var Step = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
var _triggerProps$onMouse5, _triggerProps$onMouse6, _triggerProps$onMouse7, _triggerProps$onMouse8, _triggerProps$onFocus2, _triggerProps$onBlur2, _triggerProps$ariaDe2;
var analyticsContext = _ref.analyticsContext,
elemBefore = _ref.elemBefore,
href = _ref.href,
iconAfter = _ref.iconAfter,
iconBefore = _ref.iconBefore,
_ref$onClick = _ref.onClick,
onClickProvided = _ref$onClick === void 0 ? noop : _ref$onClick,
target = _ref.target,
testId = _ref.testId,
children = _ref.children,
title = _ref.title,
truncationWidth = _ref.truncationWidth,
triggerProps = _ref.triggerProps,
ariaLabel = _ref['aria-label'],
ariaLabelledBy = _ref['aria-labelledby'],
ariaCurrent = _ref['aria-current'],
ariaDescribedBy = _ref['aria-describedby'],
onBlur = _ref.onBlur,
onFocus = _ref.onFocus,
onMouseDown = _ref.onMouseDown,
onMouseMove = _ref.onMouseMove,
onMouseOut = _ref.onMouseOut,
onMouseOver = _ref.onMouseOver,
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
var resolvedElemBefore = elemBefore !== null && elemBefore !== void 0 ? elemBefore : iconBefore;
var breadcrumbsSize = (0, _useBreadcrumbsSize.useBreadcrumbsSize)();
var isSmall = breadcrumbsSize === 'small';
// Preserve the text/trailing-icon width budget now that the leading icon is inside the control.
var leadingIconWidth = resolvedElemBefore ? "var(--ds-space-300, 24px)".concat(" + ", isSmall ? "var(--ds-space-0, 0px)" : "var(--ds-space-025, 2px)") : '0px';
var maxWidth = (0, _fg.fg)('platform_dst_breadcrumbs-refresh') && truncationWidth != null ? "calc(".concat(truncationWidth, "px + ").concat(leadingIconWidth, ")") : truncationWidth;
var handleClick = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)(_objectSpread({
fn: onClickProvided,
action: 'clicked',
analyticsData: analyticsContext
}, analyticsAttributes));
var handleTriggerClick = function handleTriggerClick(event) {
var _triggerProps$onClick;
triggerProps === null || triggerProps === void 0 || (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 || _triggerProps$onClick.call(triggerProps, event);
handleClick(event);
};
var controlRef = (0, _fg.fg)('platform_dst_breadcrumbs-refresh') ? ref : undefined;
var textRef = (0, _fg.fg)('platform_dst_breadcrumbs-refresh') ? undefined : ref;
var iconElement = resolvedElemBefore && /*#__PURE__*/React.createElement("span", {
"data-testid": testId && "".concat(testId, "--icon-before"),
className: (0, _runtime.ax)([styles.iconWrapper, (0, _fg.fg)('platform_dst_breadcrumbs-refresh') && unboundedStyles.iconWrapperRefresh, unboundedStyles.iconWrapper, (0, _fg.fg)('platform_dst_breadcrumbs-refresh') && styles.iconWrapperSpacing, isSmall && styles.iconWrapperSmallSpacing, !(0, _fg.fg)('platform_dst_breadcrumbs-refresh') && isSmall && unboundedStyles.iconWrapperSmall, (0, _fg.fg)('platform_dst_breadcrumbs-refresh') && isSmall && unboundedStyles.iconWrapperSmallRefresh])
}, resolvedElemBefore);
var content = /*#__PURE__*/React.createElement(_react.Fragment, null, !(0, _fg.fg)('platform_dst_breadcrumbs-refresh') && !isSmall && resolvedElemBefore, ((0, _fg.fg)('platform_dst_breadcrumbs-refresh') || isSmall) && iconElement, /*#__PURE__*/React.createElement("span", {
ref: textRef,
className: (0, _runtime.ax)([styles.text, (0, _fg.fg)('platform_dst_breadcrumbs-refresh') && Boolean(iconAfter) && styles.textWithIconAfter, truncationWidth != null && (0, _fg.fg)('platform_dst_breadcrumbs-refresh') && styles.textWithTruncation])
}, children), iconAfter);
if (href) {
var _triggerProps$onMouse, _triggerProps$onMouse2, _triggerProps$onMouse3, _triggerProps$onMouse4, _triggerProps$onFocus, _triggerProps$onBlur, _triggerProps$ariaDe;
return /*#__PURE__*/React.createElement(_compiled.Anchor, (0, _extends2.default)({}, rest, {
ref: controlRef,
"aria-current": ariaCurrent,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
href: href,
onClick: handleTriggerClick,
onMouseOver: (_triggerProps$onMouse = triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onMouseOver) !== null && _triggerProps$onMouse !== void 0 ? _triggerProps$onMouse : onMouseOver,
onMouseOut: (_triggerProps$onMouse2 = triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onMouseOut) !== null && _triggerProps$onMouse2 !== void 0 ? _triggerProps$onMouse2 : onMouseOut,
onMouseMove: (_triggerProps$onMouse3 = triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onMouseMove) !== null && _triggerProps$onMouse3 !== void 0 ? _triggerProps$onMouse3 : onMouseMove,
onMouseDown: (_triggerProps$onMouse4 = triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onMouseDown) !== null && _triggerProps$onMouse4 !== void 0 ? _triggerProps$onMouse4 : onMouseDown,
onFocus: (_triggerProps$onFocus = triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onFocus) !== null && _triggerProps$onFocus !== void 0 ? _triggerProps$onFocus : onFocus,
onBlur: (_triggerProps$onBlur = triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onBlur) !== null && _triggerProps$onBlur !== void 0 ? _triggerProps$onBlur : onBlur,
"aria-describedby": (_triggerProps$ariaDe = triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps['aria-describedby']) !== null && _triggerProps$ariaDe !== void 0 ? _triggerProps$ariaDe : ariaDescribedBy,
target: target,
rel: target === '_blank' ? 'noopener noreferrer' : undefined,
testId: testId,
title: title,
xcss: (0, _css.cx)(styles.root, isSmall && styles.rootSmall, (0, _fg.fg)('platform_dst_breadcrumbs-refresh') && styles.rootRefresh, truncationWidth != null && (0, _fg.fg)('platform_dst_breadcrumbs-refresh') && styles.withTruncation, truncationWidth == null && styles.withoutTruncation, (0, _fg.fg)('platform-dst-motion-uplift-list-item') && styles.interactiveMotion),
style: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Width depends on the consumer truncationWidth and leading icon.
maxWidth: maxWidth
}
}), content);
}
return /*#__PURE__*/React.createElement(_compiled.Pressable, (0, _extends2.default)({}, rest, {
ref: controlRef,
"aria-current": ariaCurrent,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
onClick: handleTriggerClick,
onMouseOver: (_triggerProps$onMouse5 = triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onMouseOver) !== null && _triggerProps$onMouse5 !== void 0 ? _triggerProps$onMouse5 : onMouseOver,
onMouseOut: (_triggerProps$onMouse6 = triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onMouseOut) !== null && _triggerProps$onMouse6 !== void 0 ? _triggerProps$onMouse6 : onMouseOut,
onMouseMove: (_triggerProps$onMouse7 = triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onMouseMove) !== null && _triggerProps$onMouse7 !== void 0 ? _triggerProps$onMouse7 : onMouseMove,
onMouseDown: (_triggerProps$onMouse8 = triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onMouseDown) !== null && _triggerProps$onMouse8 !== void 0 ? _triggerProps$onMouse8 : onMouseDown,
onFocus: (_triggerProps$onFocus2 = triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onFocus) !== null && _triggerProps$onFocus2 !== void 0 ? _triggerProps$onFocus2 : onFocus,
onBlur: (_triggerProps$onBlur2 = triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onBlur) !== null && _triggerProps$onBlur2 !== void 0 ? _triggerProps$onBlur2 : onBlur,
"aria-describedby": (_triggerProps$ariaDe2 = triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps['aria-describedby']) !== null && _triggerProps$ariaDe2 !== void 0 ? _triggerProps$ariaDe2 : ariaDescribedBy,
testId: testId,
title: title,
xcss: (0, _css.cx)(styles.root, isSmall && styles.rootSmall, (0, _fg.fg)('platform_dst_breadcrumbs-refresh') && styles.rootRefresh, truncationWidth != null && (0, _fg.fg)('platform_dst_breadcrumbs-refresh') && styles.withTruncation, truncationWidth == null && styles.withoutTruncation, (0, _fg.fg)('platform-dst-motion-uplift-list-item') && styles.interactiveMotion),
style: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Width depends on the consumer truncationWidth and leading icon.
maxWidth: maxWidth
}
}), content);
});
var _default = exports.default = Step;