@atlaskit/breadcrumbs
Version:
Breadcrumbs are a navigation system used to show a user's location in a site or app.
164 lines (161 loc) • 9.01 kB
JavaScript
/* breadcrumbs-item.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("./breadcrumbs-item.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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
var _breadcrumbsItemBase = _interopRequireDefault(require("./internal/breadcrumbs-item-base"));
var _step = _interopRequireDefault(require("./internal/step"));
var _stepOld = _interopRequireDefault(require("./internal/step-old"));
var _useBreadcrumbsSize = require("./internal/use-breadcrumbs-size");
var _useOverflowable3 = _interopRequireDefault(require("./internal/use-overflowable"));
var _excluded = ["analyticsContext", "component", "createAnalyticsEvent", "href", "elemBefore", "iconAfter", "iconBefore", "onClick", "onTooltipShown", "ref", "target", "testId", "text", "title", "truncationWidth", "aria-label", "aria-labelledby", "aria-current", "_overflowRef"];
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 itemWrapperStyles = null;
var VAR_STEP_TRUNCATION_WIDTH = '--max-width';
var ICON_WIDTH_ESTIMATE = 24;
var staticItemStyles = null;
var staticItemWithTruncationStyles = null;
var staticItemWithoutTruncationStyles = null;
var motionItemStyles = null;
var BreadcrumbsItem = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
var analyticsContext = _ref2.analyticsContext,
component = _ref2.component,
_createAnalyticsEvent = _ref2.createAnalyticsEvent,
href = _ref2.href,
elemBefore = _ref2.elemBefore,
iconAfter = _ref2.iconAfter,
iconBefore = _ref2.iconBefore,
onClick = _ref2.onClick,
onTooltipShown = _ref2.onTooltipShown,
_ref = _ref2.ref,
target = _ref2.target,
testId = _ref2.testId,
text = _ref2.text,
title = _ref2.title,
truncationWidth = _ref2.truncationWidth,
ariaLabel = _ref2['aria-label'],
ariaLabelledBy = _ref2['aria-labelledby'],
ariaCurrent = _ref2['aria-current'],
_overflowRef = _ref2._overflowRef,
rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
var _useState = (0, _react.useState)(null),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
stepElement = _useState2[0],
setStepElement = _useState2[1];
var setStepRef = (0, _react.useCallback)(function (element) {
setStepElement(element);
}, []);
var resolvedElemBefore = elemBefore !== null && elemBefore !== void 0 ? elemBefore : iconBefore;
var breadcrumbsSize = (0, _useBreadcrumbsSize.useBreadcrumbsSize)();
var leadingIconWidth = resolvedElemBefore ? ICON_WIDTH_ESTIMATE + (breadcrumbsSize === 'small' ? 0 : 2) : 0;
var iconWidthAllowance = 0;
if (resolvedElemBefore) {
iconWidthAllowance += ICON_WIDTH_ESTIMATE;
}
if (iconAfter) {
iconWidthAllowance += ICON_WIDTH_ESTIMATE;
}
var _useOverflowable = (0, _useOverflowable3.default)(truncationWidth, stepElement,
// The refresh control now includes the leading icon; exclude it from the truncation check.
(0, _fg.fg)('platform_dst_breadcrumbs-refresh') ? -leadingIconWidth : iconWidthAllowance),
_useOverflowable2 = (0, _slicedToArray2.default)(_useOverflowable, 2),
hasOverflow = _useOverflowable2[0],
shouldShowTooltip = _useOverflowable2[1];
if (!component && (0, _fg.fg)('platform_dst_breadcrumbs-refresh')) {
return /*#__PURE__*/React.createElement(_breadcrumbsItemBase.default, {
ref: _overflowRef,
analyticsContext: analyticsContext,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
elemBefore: resolvedElemBefore,
href: href
// TODO(CAT-2913): Remove `iconAfter` from the refresh path once Jira stops depending on deprecated
// `BreadcrumbsItem.iconAfter` in `src/packages/polaris/component-ideas-idea-view/tests/IssueKey.test.tsx`
// and `src/packages/polaris/component-ideas-idea-view/tests/IssueBreadcrumbs.test.tsx`.
// Those consumers need to move the copy-link affordance out of `BreadcrumbsItem` first.
,
iconAfter: iconAfter,
iconBefore: iconBefore,
onClick: onClick,
onTooltipShown: onTooltipShown,
shouldShowTooltip: shouldShowTooltip,
stepRef: setStepRef,
target: target,
testId: testId,
text: text,
title: title,
truncationWidth: truncationWidth,
"aria-current": ariaCurrent
});
}
var buttonOverrideStyles = {
paddingBlock: "var(--ds-space-025, 2px)",
fontWeight: "var(--ds-font-weight-regular, 400)"
};
// Note: cast to `any` is required to type verification - see https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
var dynamicItemStyles = (0, _defineProperty2.default)({}, VAR_STEP_TRUNCATION_WIDTH, typeof truncationWidth !== 'undefined' && "".concat(truncationWidth, "px"));
var step = !component ? /*#__PURE__*/React.createElement(_step.default, (0, _extends2.default)({
analyticsContext: analyticsContext,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-current": ariaCurrent,
elemBefore: resolvedElemBefore,
href: href,
iconAfter: iconAfter,
iconBefore: iconBefore,
onClick: onClick,
ref: setStepRef,
target: target,
testId: testId,
title: title,
truncationWidth: truncationWidth
}, rest), text) : /*#__PURE__*/React.createElement(_stepOld.default, (0, _extends2.default)({
analyticsContext: analyticsContext,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-current": ariaCurrent,
component: component,
hasOverflow: hasOverflow,
href: href,
iconAfter: iconAfter,
iconBefore: resolvedElemBefore,
onClick: onClick,
ref: setStepRef,
target: target,
testId: testId,
title: title
}, rest, {
className: (0, _runtime.ax)(["_vwz41txs", truncationWidth ? "_p12f1pis" : "_1ul9grf3 _1o9zzg3v", (0, _fg.fg)('platform-dst-motion-uplift-list-item') && "_v564hxmd _4bfu1j28 _1hms8stv _o7kshxmd _9oik1rpy _1ggl87vo _1nrmi7uo"]),
style: _objectSpread(_objectSpread({}, truncationWidth ? _objectSpread(_objectSpread({}, dynamicItemStyles), buttonOverrideStyles) : buttonOverrideStyles), {}, {
"--_1fteikb": (0, _runtime.ix)("var(".concat(VAR_STEP_TRUNCATION_WIDTH, ") !important"))
})
}), text);
return /*#__PURE__*/React.createElement("li", {
ref: _overflowRef,
className: (0, _runtime.ax)(["_1e0c1txw _vchhusvi _p12f1osq _4t3i59ms _4cvr1h6o _2lx2vrvc _ect4ttxp _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t _5nddv77o _1j1pu2gc _1dsoftgi _toskidpf _z4qy1rpy _15621n76 _191d1h6o"]),
style: {
"--_1fdrbou": (0, _runtime.ix)("".concat(24 / 14, "em"))
}
}, shouldShowTooltip ? /*#__PURE__*/React.createElement(_Tooltip.default, {
content: text,
position: "bottom",
onShow: onTooltipShown
}, step) : step);
});
// eslint-disable-next-line @repo/internal/react/require-jsdoc
var _default = exports.default = BreadcrumbsItem;