@gravity-ui/uikit
Version:
Gravity UI base styling and components
84 lines (83 loc) • 3.46 kB
JavaScript
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { KeyCode } from "../../constants.js";
import { ListItemView } from "../lab/ListItemView/ListItemView.js";
import { filterDOMProps } from "../utils/filterDOMProps.js";
import { getLinkRelWithFallback } from "../utils/getLinkRelWithFallback.js";
import { useMenuContext } from "./BreadcrumbsDropdownMenu.js";
import { b } from "./utils.js";
function BreadcrumbsItem(props, ref) {
const domProps = filterDOMProps(props, { labelable: true });
const { href, hrefLang, target, rel, download, ping, referrerPolicy, children, disabled: disabledProp, __disabled: disabledInner, __current: current, __onAction: onAction, __index: index, ...restProps } = props;
const disabled = disabledInner || disabledProp;
const handleAction = (event) => {
if (disabled) {
event.preventDefault();
return;
}
if (typeof restProps.onClick === 'function') {
restProps.onClick(event);
}
if (typeof onAction === 'function') {
onAction();
}
};
const linkProps = {
onClick: handleAction,
'aria-disabled': disabled ? true : undefined,
};
if (href) {
linkProps.href = href;
linkProps.hrefLang = hrefLang;
linkProps.target = target;
linkProps.rel = getLinkRelWithFallback({ target, rel });
linkProps.download = download;
linkProps.ping = ping;
linkProps.referrerPolicy = referrerPolicy;
linkProps.tabIndex = disabled ? -1 : undefined;
}
else {
linkProps.role = 'link';
linkProps.tabIndex = disabled ? undefined : 0;
linkProps.onKeyDown = (event) => {
if (disabled) {
event.preventDefault();
return;
}
if (typeof restProps.onKeyDown === 'function') {
restProps.onKeyDown(event);
}
if (event.key === KeyCode.ENTER) {
if (typeof onAction === 'function') {
onAction();
}
}
};
}
if (current) {
linkProps['aria-current'] = props['aria-current'] ?? 'page';
}
const Element = href ? 'a' : 'span';
const { isMenu, getItemProps, listItemsRef, activeIndex, popupStyle } = useMenuContext();
if (isMenu) {
const active = !disabled && activeIndex === index;
return (_jsx(ListItemView, { ref: (node) => {
listItemsRef.current[index ?? 0] = node;
}, nestedLevel: popupStyle === 'staircase' ? index : undefined, active: active, size: "m", className: b('menu-link', props.className), component: Element, componentProps: getItemProps({
...restProps,
...domProps,
...linkProps,
role: 'menuitem',
tabIndex: active ? 0 : -1,
}), disabled: disabled, children: children }));
}
return (_jsx(Element, { ...restProps, ...domProps, ...linkProps, ref: ref, className: b('link', {
'is-current': current,
'is-disabled': disabled && !current,
}, props.className), children: children }));
}
BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
const _BreadcrumbsItem = React.forwardRef(BreadcrumbsItem);
export { _BreadcrumbsItem as BreadcrumbsItem };
//# sourceMappingURL=BreadcrumbsItem.js.map