@atlaskit/breadcrumbs
Version:
Breadcrumbs are a navigation system used to show a user's location in a site or app.
155 lines (153 loc) • 7.56 kB
JavaScript
/* breadcrumbs-item.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["analyticsContext", "component", "createAnalyticsEvent", "href", "elemBefore", "iconAfter", "iconBefore", "onClick", "onTooltipShown", "ref", "target", "testId", "text", "title", "truncationWidth", "aria-label", "aria-labelledby", "aria-current", "_overflowRef"];
import "./breadcrumbs-item.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
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) { _defineProperty(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; }
import { memo, useCallback, useState } from 'react';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import Tooltip from '@atlaskit/tooltip/Tooltip';
import BreadcrumbsItemBase from './internal/breadcrumbs-item-base';
import Step from './internal/step';
import StepOld from './internal/step-old';
import { useBreadcrumbsSize } from './internal/use-breadcrumbs-size';
import useOverflowable from './internal/use-overflowable';
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__*/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 = _objectWithoutProperties(_ref2, _excluded);
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
stepElement = _useState2[0],
setStepElement = _useState2[1];
var setStepRef = useCallback(function (element) {
setStepElement(element);
}, []);
var resolvedElemBefore = elemBefore !== null && elemBefore !== void 0 ? elemBefore : iconBefore;
var breadcrumbsSize = 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 = useOverflowable(truncationWidth, stepElement,
// The refresh control now includes the leading icon; exclude it from the truncation check.
fg('platform_dst_breadcrumbs-refresh') ? -leadingIconWidth : iconWidthAllowance),
_useOverflowable2 = _slicedToArray(_useOverflowable, 2),
hasOverflow = _useOverflowable2[0],
shouldShowTooltip = _useOverflowable2[1];
if (!component && fg('platform_dst_breadcrumbs-refresh')) {
return /*#__PURE__*/React.createElement(BreadcrumbsItemBase, {
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 = _defineProperty({}, VAR_STEP_TRUNCATION_WIDTH, typeof truncationWidth !== 'undefined' && "".concat(truncationWidth, "px"));
var step = !component ? /*#__PURE__*/React.createElement(Step, _extends({
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, _extends({
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: ax(["_vwz41txs", truncationWidth ? "_p12f1pis" : "_1ul9grf3 _1o9zzg3v", fg('platform-dst-motion-uplift-list-item') && "_v564hxmd _4bfu1j28 _1hms8stv _o7kshxmd _9oik1rpy _1ggl87vo _1nrmi7uo"]),
style: _objectSpread(_objectSpread({}, truncationWidth ? _objectSpread(_objectSpread({}, dynamicItemStyles), buttonOverrideStyles) : buttonOverrideStyles), {}, {
"--_1fteikb": ix("var(".concat(VAR_STEP_TRUNCATION_WIDTH, ") !important"))
})
}), text);
return /*#__PURE__*/React.createElement("li", {
ref: _overflowRef,
className: 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": ix("".concat(24 / 14, "em"))
}
}, shouldShowTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
content: text,
position: "bottom",
onShow: onTooltipShown
}, step) : step);
});
// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default BreadcrumbsItem;