@atlaskit/breadcrumbs
Version:
Breadcrumbs are a navigation system used to show a user's location in a site or app.
285 lines (283 loc) • 11 kB
JavaScript
/* breadcrumbs.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import "./breadcrumbs.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
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';
const defaultMaxItems = 8;
const defaultBreadcrumbsLabel = 'Breadcrumbs';
const defaultEllipsisLabel = 'Show more breadcrumbs';
const {
toArray
} = React.Children;
const analyticsAttributes = {
componentName: 'breadcrumbs',
packageName: "@atlaskit/breadcrumbs",
packageVersion: "17.8.3"
};
const noop = __noop;
const interactiveElementSelector = 'a, button, [tabindex]:not([tabindex="-1"])';
const breadcrumbStylesOld = null;
const breadcrumbStylesNew = null;
const navStylesNew = null;
const 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) {
const {
text,
href,
onClick,
target
} = child.props;
const wrappedOnClick = onClick ? 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,
onClick: wrappedOnClick,
target
};
}
function cloneBreadcrumbChild(child, index, itemCount, registerItem) {
var _child$key;
const isLast = index === itemCount - 1;
const isCurrentItem = child.type === BreadcrumbsCurrentItem;
return (
/*#__PURE__*/
// eslint-disable-next-line @repo/internal/react/no-clone-element
React.cloneElement(child, {
key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index,
_overflowRef: registerItem(index),
...(isLast && !isCurrentItem ? {
'aria-current': 'page'
} : {})
})
);
}
const InnerBreadcrumbs = /*#__PURE__*/forwardRef((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
}));
});
const InnerBreadcrumbsOld = /*#__PURE__*/forwardRef((props, ref) => {
const {
defaultExpanded = false,
isExpanded,
maxItems = defaultMaxItems,
itemsBeforeCollapse = 1,
itemsAfterCollapse = 1,
children = [],
testId,
onExpand: providedExpanse = noop,
analyticsContext,
label = defaultBreadcrumbsLabel,
ellipsisLabel = defaultEllipsisLabel,
size = 'medium'
} = props;
const [expanded, setExpanse] = useState(defaultExpanded);
const [isClickedBySpace, setExpansionTrigger] = useState(false);
const wrapperRef = useRef(null);
const isControlled = typeof isExpanded !== 'undefined';
const isExpansionHandled = providedExpanse !== noop;
const shouldExpand = isControlled ? isExpanded : expanded;
const focusFirstRevealedMemoized = useCallback(() => {
if (wrapperRef.current) {
const listItems = Array.from(wrapperRef.current.querySelectorAll('li'));
const interactiveElements = listItems.map(li => li.querySelector(interactiveElementSelector));
const elementToFocus = interactiveElements[itemsBeforeCollapse];
const 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
});
const handleExpansion = usePlatformLeafEventHandler({
fn: (event, analyticsEvent) => {
if (!isControlled) {
setExpanse(expanded => !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
});
const childrenArray = toArray(children);
const breadcrumbsArray = React.Children.map(childrenArray, (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;
});
const renderItemsWithEllipsis = () => {
const allItems = breadcrumbsArray;
if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {
return allItems;
}
const beforeItems = allItems.slice(0, itemsBeforeCollapse);
const afterItems = allItems.slice(allItems.length - itemsAfterCollapse, allItems.length);
return [...beforeItems, /*#__PURE__*/React.createElement(EllipsisItem, {
key: "ellipsis",
testId: testId && `${testId}--breadcrumb-ellipsis`,
onClick: handleExpansion,
label: ellipsisLabel
}), ...afterItems];
};
const shouldDisplayItems = shouldExpand || maxItems && breadcrumbsArray.length <= maxItems;
const 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)));
});
const InnerBreadcrumbsNew = /*#__PURE__*/forwardRef((props, ref) => {
const {
children = [],
testId,
analyticsContext,
label = defaultBreadcrumbsLabel,
ellipsisLabel = defaultEllipsisLabel,
size = 'medium',
createAnalyticsEvent: _createAnalyticsEvent
} = props;
const childrenArray = React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child));
const itemCount = childrenArray.length;
if (process.env.NODE_ENV !== 'production') {
childrenArray.forEach((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.');
}
});
}
const {
collapsedIndices,
naturalWidthsReady,
registerItem,
registerContainer
} = useOverflowCollapse(itemCount);
const handleOverflowExpansion = usePlatformLeafEventHandler({
fn: noop,
action: 'expanded',
analyticsData: analyticsContext,
...analyticsAttributes
});
const collapsedItems = Array.from(collapsedIndices).sort((a, b) => a - b).map(i => getItemProps(childrenArray[i]));
const renderedItems = [];
let ellipsisInserted = false;
childrenArray.forEach((child, index) => {
const 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 && `${testId}--breadcrumb-ellipsis`
})));
}
return;
}
renderedItems.push(cloneBreadcrumbChild(child, index, itemCount, registerItem));
});
const measureItems = !naturalWidthsReady ? childrenArray.map((child, index) => 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)));
});
const Breadcrumbs = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
analyticsContext,
children,
createAnalyticsEvent,
defaultExpanded,
ellipsisLabel,
isExpanded,
itemsAfterCollapse,
itemsBeforeCollapse,
label,
maxItems,
onExpand,
size,
testId,
...props
}, ref) => /*#__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;