@atlaskit/breadcrumbs
Version:
Breadcrumbs are a navigation system used to show a user's location in a site or app.
313 lines (311 loc) • 14.5 kB
JavaScript
/* breadcrumbs.tsx generated by @compiled/babel-plugin v3.0.2 */
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["analyticsContext", "children", "createAnalyticsEvent", "defaultExpanded", "ellipsisLabel", "isExpanded", "itemsAfterCollapse", "itemsBeforeCollapse", "label", "maxItems", "onExpand", "size", "testId"];
import "./breadcrumbs.compiled.css";
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 React, { forwardRef, memo, useCallback, useRef, useState } from 'react';
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
import { getDocument } from '@atlaskit/browser-apis';
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
import __noop from '@atlaskit/ds-lib/noop';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import BreadcrumbsCurrentItem from './breadcrumbs-current-item';
import EllipsisItem from './ellipsis-item';
import { BreadcrumbsSizeProvider } from './internal/breadcrumbs-size-provider';
import EllipsisPopup from './internal/ellipsis-popup';
import { useOnRevealed } from './internal/use-on-revealed';
import useOverflowCollapse from './internal/use-overflow-collapse';
var defaultMaxItems = 8;
var defaultBreadcrumbsLabel = 'Breadcrumbs';
var defaultEllipsisLabel = 'Show more breadcrumbs';
var toArray = React.Children.toArray;
var analyticsAttributes = {
componentName: 'breadcrumbs',
packageName: "@atlaskit/breadcrumbs",
packageVersion: "17.8.3"
};
var noop = __noop;
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;
return (
/*#__PURE__*/
// eslint-disable-next-line @repo/internal/react/no-clone-element
React.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__*/forwardRef(function (props, ref) {
if (fg('platform_dst_breadcrumbs-refresh')) {
return /*#__PURE__*/React.createElement(InnerBreadcrumbsNew, _extends({}, props, {
ref: ref
}));
}
return /*#__PURE__*/React.createElement(InnerBreadcrumbsOld, _extends({}, props, {
ref: ref
}));
});
var InnerBreadcrumbsOld = /*#__PURE__*/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 = useState(defaultExpanded),
_useState2 = _slicedToArray(_useState, 2),
expanded = _useState2[0],
setExpanse = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
isClickedBySpace = _useState4[0],
setExpansionTrigger = _useState4[1];
var wrapperRef = useRef(null);
var isControlled = typeof isExpanded !== 'undefined';
var isExpansionHandled = providedExpanse !== noop;
var shouldExpand = isControlled ? isExpanded : expanded;
var focusFirstRevealedMemoized = 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]);
useOnRevealed(focusFirstRevealedMemoized, {
isExpanded: shouldExpand,
isDisabled: !isClickedBySpace
});
var handleExpansion = usePlatformLeafEventHandler(_objectSpread({
fn: function fn(event, analyticsEvent) {
if (!isControlled) {
setExpanse(function (expanded) {
return !expanded;
});
}
if (isExpansionHandled && isControlled || !isControlled) {
var _getDocument;
setExpansionTrigger(event.target === ((_getDocument = 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.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.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(_toConsumableArray(beforeItems), [/*#__PURE__*/React.createElement(EllipsisItem, {
key: "ellipsis",
testId: testId && "".concat(testId, "--breadcrumb-ellipsis"),
onClick: handleExpansion,
label: ellipsisLabel
})], _toConsumableArray(afterItems));
};
var shouldDisplayItems = shouldExpand || maxItems && breadcrumbsArray.length <= maxItems;
var breadcrumbsItems = shouldDisplayItems ? breadcrumbsArray : renderItemsWithEllipsis();
return /*#__PURE__*/React.createElement(BreadcrumbsSizeProvider, {
value: size
}, /*#__PURE__*/React.createElement("nav", {
"aria-label": label,
ref: mergeRefs([ref, wrapperRef]),
tabIndex: -1
}, /*#__PURE__*/React.createElement("ol", {
"data-testid": testId,
className: ax(["_1e0c1txw _1n261g80 _syaz1rpy _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t"])
}, breadcrumbsItems)));
});
var InnerBreadcrumbsNew = /*#__PURE__*/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.Children.toArray(children).filter(function (child) {
return /*#__PURE__*/React.isValidElement(child);
});
var itemCount = childrenArray.length;
if (process.env.NODE_ENV !== 'production') {
childrenArray.forEach(function (child, index) {
if (child.type === BreadcrumbsCurrentItem && 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 = useOverflowCollapse(itemCount),
collapsedIndices = _useOverflowCollapse.collapsedIndices,
naturalWidthsReady = _useOverflowCollapse.naturalWidthsReady,
registerItem = _useOverflowCollapse.registerItem,
registerContainer = _useOverflowCollapse.registerContainer;
var handleOverflowExpansion = 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.createElement("li", {
key: "ellipsis",
className: ax(["_1e0c1txw _vchhusvi _4cvr1h6o _2lx2vrvc _1o9zidpf _1wpz1h6o _1pfhze3t _1mnxv77o _1nh4u2gc _z0aiftgi _tua5idpf _1plw1h6o _14rn1rpy _aetr1n76 _8yoa1h6o"])
}, /*#__PURE__*/React.createElement(EllipsisPopup, {
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.createElement(BreadcrumbsSizeProvider, {
value: size
}, /*#__PURE__*/React.createElement("nav", {
"aria-label": label,
ref: ref,
tabIndex: -1,
className: ax(["_1reo15vq _18m915vq _1mour5cr _195gr5cr _1rjc1b66 _18zr1b66 _1ul9idpf"])
}, /*#__PURE__*/React.createElement("ol", {
"data-testid": testId,
ref: registerContainer,
className: ax(["_1e0c1txw _1ul9idpf _4cvr1h6o _1n261q9c _2mzuglyw _6rthidpf _1pfhidpf _12l2idpf _ahbqidpf _85i5idpf _1q51idpf _y4tiidpf _bozgidpf"])
}, naturalWidthsReady ? renderedItems : measureItems)));
});
var Breadcrumbs = /*#__PURE__*/memo( /*#__PURE__*/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 = _objectWithoutProperties(_ref2, _excluded);
return /*#__PURE__*/React.createElement(InnerBreadcrumbs, _extends({}, 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
export default Breadcrumbs;