@atlaskit/breadcrumbs
Version:
Breadcrumbs are a navigation system used to show a user's location in a site or app.
322 lines (319 loc) • 16.4 kB
JavaScript
/* breadcrumbs.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.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
var _browserApis = require("@atlaskit/browser-apis");
var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _breadcrumbsCurrentItem = _interopRequireDefault(require("./breadcrumbs-current-item"));
var _ellipsisItem = _interopRequireDefault(require("./ellipsis-item"));
var _breadcrumbsSizeProvider = require("./internal/breadcrumbs-size-provider");
var _ellipsisPopup = _interopRequireDefault(require("./internal/ellipsis-popup"));
var _useOnRevealed = require("./internal/use-on-revealed");
var _useOverflowCollapse2 = _interopRequireDefault(require("./internal/use-overflow-collapse"));
var _excluded = ["analyticsContext", "children", "createAnalyticsEvent", "defaultExpanded", "ellipsisLabel", "isExpanded", "itemsAfterCollapse", "itemsBeforeCollapse", "label", "maxItems", "onExpand", "size", "testId"];
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 defaultMaxItems = 8;
var defaultBreadcrumbsLabel = 'Breadcrumbs';
var defaultEllipsisLabel = 'Show more breadcrumbs';
var toArray = _react.default.Children.toArray;
var analyticsAttributes = {
componentName: 'breadcrumbs',
packageName: "@atlaskit/breadcrumbs",
packageVersion: "17.8.3"
};
var noop = _noop.default;
var interactiveElementSelector = 'a, button, [tabindex]:not([tabindex="-1"])';
var breadcrumbStylesOld = null;
var breadcrumbStylesNew = null;
var navStylesNew = null;
var ellipsisItemWrapperStyles = null;
// items will get collapsed into ellipsis dropdown
// therefore they are no longer rendered in the DOM
// they need to be passed in to the dropdown
function getItemProps(child) {
var _ref = child.props,
text = _ref.text,
href = _ref.href,
onClick = _ref.onClick,
target = _ref.target;
var wrappedOnClick = onClick ? function (event) {
// Collapsed dropdown items can be activated via keyboard, but the
// original BreadcrumbsItem onClick contract is mouse-based.
if ('button' in event) {
onClick(event);
}
} : undefined;
if (process.env.NODE_ENV !== 'production' && typeof text !== 'string') {
// eslint-disable-next-line no-console
console.warn('[Breadcrumbs] A collapsed child has no `text` prop - it will appear blank in the ellipsis dropdown.');
}
return {
text: text !== null && text !== void 0 ? text : '',
href: href,
onClick: wrappedOnClick,
target: target
};
}
function cloneBreadcrumbChild(child, index, itemCount, registerItem) {
var _child$key;
var isLast = index === itemCount - 1;
var isCurrentItem = child.type === _breadcrumbsCurrentItem.default;
return (
/*#__PURE__*/
// eslint-disable-next-line @repo/internal/react/no-clone-element
_react.default.cloneElement(child, _objectSpread({
key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index,
_overflowRef: registerItem(index)
}, isLast && !isCurrentItem ? {
'aria-current': 'page'
} : {}))
);
}
var InnerBreadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
if ((0, _fg.fg)('platform_dst_breadcrumbs-refresh')) {
return /*#__PURE__*/_react.default.createElement(InnerBreadcrumbsNew, (0, _extends2.default)({}, props, {
ref: ref
}));
}
return /*#__PURE__*/_react.default.createElement(InnerBreadcrumbsOld, (0, _extends2.default)({}, props, {
ref: ref
}));
});
var InnerBreadcrumbsOld = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
var _props$defaultExpande = props.defaultExpanded,
defaultExpanded = _props$defaultExpande === void 0 ? false : _props$defaultExpande,
isExpanded = props.isExpanded,
_props$maxItems = props.maxItems,
maxItems = _props$maxItems === void 0 ? defaultMaxItems : _props$maxItems,
_props$itemsBeforeCol = props.itemsBeforeCollapse,
itemsBeforeCollapse = _props$itemsBeforeCol === void 0 ? 1 : _props$itemsBeforeCol,
_props$itemsAfterColl = props.itemsAfterCollapse,
itemsAfterCollapse = _props$itemsAfterColl === void 0 ? 1 : _props$itemsAfterColl,
_props$children = props.children,
children = _props$children === void 0 ? [] : _props$children,
testId = props.testId,
_props$onExpand = props.onExpand,
providedExpanse = _props$onExpand === void 0 ? noop : _props$onExpand,
analyticsContext = props.analyticsContext,
_props$label = props.label,
label = _props$label === void 0 ? defaultBreadcrumbsLabel : _props$label,
_props$ellipsisLabel = props.ellipsisLabel,
ellipsisLabel = _props$ellipsisLabel === void 0 ? defaultEllipsisLabel : _props$ellipsisLabel,
_props$size = props.size,
size = _props$size === void 0 ? 'medium' : _props$size;
var _useState = (0, _react.useState)(defaultExpanded),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
expanded = _useState2[0],
setExpanse = _useState2[1];
var _useState3 = (0, _react.useState)(false),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
isClickedBySpace = _useState4[0],
setExpansionTrigger = _useState4[1];
var wrapperRef = (0, _react.useRef)(null);
var isControlled = typeof isExpanded !== 'undefined';
var isExpansionHandled = providedExpanse !== noop;
var shouldExpand = isControlled ? isExpanded : expanded;
var focusFirstRevealedMemoized = (0, _react.useCallback)(function () {
if (wrapperRef.current) {
var listItems = Array.from(wrapperRef.current.querySelectorAll('li'));
var interactiveElements = listItems.map(function (li) {
return li.querySelector(interactiveElementSelector);
});
var elementToFocus = interactiveElements[itemsBeforeCollapse];
var firstInteractiveElement = interactiveElements[0];
if (elementToFocus) {
elementToFocus.focus && elementToFocus.focus();
} else if (firstInteractiveElement) {
firstInteractiveElement.focus && firstInteractiveElement.focus();
} else {
wrapperRef.current.focus();
}
}
setExpansionTrigger(false);
}, [setExpansionTrigger, itemsBeforeCollapse, wrapperRef]);
(0, _useOnRevealed.useOnRevealed)(focusFirstRevealedMemoized, {
isExpanded: shouldExpand,
isDisabled: !isClickedBySpace
});
var handleExpansion = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)(_objectSpread({
fn: function fn(event, analyticsEvent) {
if (!isControlled) {
setExpanse(function (expanded) {
return !expanded;
});
}
if (isExpansionHandled && isControlled || !isControlled) {
var _getDocument;
setExpansionTrigger(event.target === ((_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 ? void 0 : _getDocument.activeElement));
}
return providedExpanse(event, analyticsEvent);
},
action: 'expanded',
analyticsData: analyticsContext
}, analyticsAttributes));
var childrenArray = toArray(children);
var breadcrumbsArray = _react.default.Children.map(childrenArray, function (child, index) {
if (typeof child === 'string') {
return child;
}
return childrenArray.length - 1 === index ?
/*#__PURE__*/
// eslint-disable-next-line @repo/internal/react/no-clone-element
_react.default.cloneElement(child, {
'aria-current': 'page'
}) : child;
});
var renderItemsWithEllipsis = function renderItemsWithEllipsis() {
var allItems = breadcrumbsArray;
if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {
return allItems;
}
var beforeItems = allItems.slice(0, itemsBeforeCollapse);
var afterItems = allItems.slice(allItems.length - itemsAfterCollapse, allItems.length);
return [].concat((0, _toConsumableArray2.default)(beforeItems), [/*#__PURE__*/_react.default.createElement(_ellipsisItem.default, {
key: "ellipsis",
testId: testId && "".concat(testId, "--breadcrumb-ellipsis"),
onClick: handleExpansion,
label: ellipsisLabel
})], (0, _toConsumableArray2.default)(afterItems));
};
var shouldDisplayItems = shouldExpand || maxItems && breadcrumbsArray.length <= maxItems;
var breadcrumbsItems = shouldDisplayItems ? breadcrumbsArray : renderItemsWithEllipsis();
return /*#__PURE__*/_react.default.createElement(_breadcrumbsSizeProvider.BreadcrumbsSizeProvider, {
value: size
}, /*#__PURE__*/_react.default.createElement("nav", {
"aria-label": label,
ref: (0, _mergeRefs.default)([ref, wrapperRef]),
tabIndex: -1
}, /*#__PURE__*/_react.default.createElement("ol", {
"data-testid": testId,
className: (0, _runtime.ax)(["_1e0c1txw _1n261g80 _syaz1rpy _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t"])
}, breadcrumbsItems)));
});
var InnerBreadcrumbsNew = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
var _props$children2 = props.children,
children = _props$children2 === void 0 ? [] : _props$children2,
testId = props.testId,
analyticsContext = props.analyticsContext,
_props$label2 = props.label,
label = _props$label2 === void 0 ? defaultBreadcrumbsLabel : _props$label2,
_props$ellipsisLabel2 = props.ellipsisLabel,
ellipsisLabel = _props$ellipsisLabel2 === void 0 ? defaultEllipsisLabel : _props$ellipsisLabel2,
_props$size2 = props.size,
size = _props$size2 === void 0 ? 'medium' : _props$size2,
_createAnalyticsEvent = props.createAnalyticsEvent;
var childrenArray = _react.default.Children.toArray(children).filter(function (child) {
return /*#__PURE__*/_react.default.isValidElement(child);
});
var itemCount = childrenArray.length;
if (process.env.NODE_ENV !== 'production') {
childrenArray.forEach(function (child, index) {
if (child.type === _breadcrumbsCurrentItem.default && index !== itemCount - 1) {
// eslint-disable-next-line no-console
console.warn('[Breadcrumbs] BreadcrumbsCurrentItem must be the last item in Breadcrumbs. ' + 'It was found at position ' + (index + 1) + ' of ' + itemCount + '. ' + 'Either move it to the end of the Breadcrumbs children, or use BreadcrumbsItem instead.');
}
});
}
var _useOverflowCollapse = (0, _useOverflowCollapse2.default)(itemCount),
collapsedIndices = _useOverflowCollapse.collapsedIndices,
naturalWidthsReady = _useOverflowCollapse.naturalWidthsReady,
registerItem = _useOverflowCollapse.registerItem,
registerContainer = _useOverflowCollapse.registerContainer;
var handleOverflowExpansion = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)(_objectSpread({
fn: noop,
action: 'expanded',
analyticsData: analyticsContext
}, analyticsAttributes));
var collapsedItems = Array.from(collapsedIndices).sort(function (a, b) {
return a - b;
}).map(function (i) {
return getItemProps(childrenArray[i]);
});
var renderedItems = [];
var ellipsisInserted = false;
childrenArray.forEach(function (child, index) {
var isCollapsed = collapsedIndices.has(index);
if (isCollapsed) {
if (!ellipsisInserted) {
ellipsisInserted = true;
renderedItems.push( /*#__PURE__*/_react.default.createElement("li", {
key: "ellipsis",
className: (0, _runtime.ax)(["_1e0c1txw _vchhusvi _4cvr1h6o _2lx2vrvc _1o9zidpf _1wpz1h6o _1pfhze3t _1mnxv77o _1nh4u2gc _z0aiftgi _tua5idpf _1plw1h6o _14rn1rpy _aetr1n76 _8yoa1h6o"])
}, /*#__PURE__*/_react.default.createElement(_ellipsisPopup.default, {
collapsedItems: collapsedItems,
label: ellipsisLabel,
onClick: handleOverflowExpansion,
testId: testId && "".concat(testId, "--breadcrumb-ellipsis")
})));
}
return;
}
renderedItems.push(cloneBreadcrumbChild(child, index, itemCount, registerItem));
});
var measureItems = !naturalWidthsReady ? childrenArray.map(function (child, index) {
return cloneBreadcrumbChild(child, index, itemCount, registerItem);
}) : null;
return /*#__PURE__*/_react.default.createElement(_breadcrumbsSizeProvider.BreadcrumbsSizeProvider, {
value: size
}, /*#__PURE__*/_react.default.createElement("nav", {
"aria-label": label,
ref: ref,
tabIndex: -1,
className: (0, _runtime.ax)(["_1reo15vq _18m915vq _1mour5cr _195gr5cr _1rjc1b66 _18zr1b66 _1ul9idpf"])
}, /*#__PURE__*/_react.default.createElement("ol", {
"data-testid": testId,
ref: registerContainer,
className: (0, _runtime.ax)(["_1e0c1txw _1ul9idpf _4cvr1h6o _1n261q9c _2mzuglyw _6rthidpf _1pfhidpf _12l2idpf _ahbqidpf _85i5idpf _1q51idpf _y4tiidpf _bozgidpf"])
}, naturalWidthsReady ? renderedItems : measureItems)));
});
var Breadcrumbs = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
var analyticsContext = _ref2.analyticsContext,
children = _ref2.children,
createAnalyticsEvent = _ref2.createAnalyticsEvent,
defaultExpanded = _ref2.defaultExpanded,
ellipsisLabel = _ref2.ellipsisLabel,
isExpanded = _ref2.isExpanded,
itemsAfterCollapse = _ref2.itemsAfterCollapse,
itemsBeforeCollapse = _ref2.itemsBeforeCollapse,
label = _ref2.label,
maxItems = _ref2.maxItems,
onExpand = _ref2.onExpand,
size = _ref2.size,
testId = _ref2.testId,
props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
return /*#__PURE__*/_react.default.createElement(InnerBreadcrumbs, (0, _extends2.default)({}, props, {
analyticsContext: analyticsContext,
children: children,
createAnalyticsEvent: createAnalyticsEvent,
defaultExpanded: defaultExpanded,
ellipsisLabel: ellipsisLabel,
isExpanded: isExpanded,
itemsAfterCollapse: itemsAfterCollapse,
itemsBeforeCollapse: itemsBeforeCollapse,
label: label,
maxItems: maxItems,
onExpand: onExpand,
size: size,
ref: ref,
testId: testId
}));
}));
// eslint-disable-next-line @repo/internal/react/require-jsdoc
var _default = exports.default = Breadcrumbs;