@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
133 lines • 8.09 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
// NPM
import React, { useEffect, useRef, useState } from 'react';
// Local
import { classNames } from '../_common/defaultImports';
import { Menu } from '../context-menu';
import { IconButton } from '../icon-button';
import { ChevronDownIconOutline } from '../icons';
import { Typography } from '../typography';
const BreadcrumbsBaseItem = React.forwardRef(function BreadcrumbsBaseItem({ as, children = (_jsx(Typography, { as: "span", variant: "body-medium", children: "Home" })), className, href, isCurrentPage = false, onClick, htmlAttributes, }, ref) {
const Component = as || 'a';
const classes = classNames('ndl-breadcrumbs-base-item-link', className, {
'ndl-breadcrumbs-base-item-link-active': isCurrentPage,
});
return (_jsx("li", { className: "ndl-breadcrumbs-base-item", ref: ref, children: _jsx(Component, Object.assign({ role: "button", tabIndex: 0, "aria-label": "Home", className: classes, href: href, onClick: (event) => {
if (onClick)
onClick(event, href);
} }, htmlAttributes, { children: children })) }));
});
const BreadcrumbsGroupItem = ({ as, children, className, style, htmlAttributes, }) => {
const Component = as || 'li';
const classes = classNames('ndl-breadcrumbs-group-item', className);
return (_jsx(Component, Object.assign({ className: classes, style: style }, htmlAttributes, { children: _jsx("ol", { children: children }) })));
};
BreadcrumbsGroupItem.displayName = 'Breadcrumbs.GroupItem';
const BreadcrumbsItem = ({ as, children, className, hasSeparator = true, href, isCurrentPage = false, onClick, htmlAttributes, }) => {
const Component = as || 'a';
const isInteractable = Component === 'button' || Component === 'a';
const listItemClasses = classNames('ndl-breadcrumbs-item', {
'ndl-breadcrumbs-separator': hasSeparator,
});
const linkClasses = classNames('ndl-breadcrumbs-item-link', {
'ndl-breadcrumbs-item-link-interactable': isInteractable,
'ndl-breadcrumbs-item-link-active': isCurrentPage,
}, className);
return (_jsx("li", { className: listItemClasses, children: _jsx(Typography, { as: Component, variant: "body-medium", className: linkClasses, href: href, htmlAttributes: Object.assign({ role: 'button', tabIndex: 0, onClick: (event) => {
if (onClick)
onClick(event, href);
}, 'aria-current': isCurrentPage ? 'page' : undefined }, htmlAttributes), children: children }) }));
};
BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
const BreadcrumbsItemMenu = ({ children, className, isOpen = false, onClick, onClose, htmlAttributes, }) => {
const buttonRef = useRef(null);
const [isItemMenuOpen, setIsItemMenuOpen] = useState(isOpen);
useEffect(() => {
setIsItemMenuOpen(isOpen);
}, [isOpen]);
const classes = classNames('ndl-breadcrumbs-item-menu-button', className);
return (_jsxs("li", { className: "ndl-breadcrumbs-item-menu", children: [_jsx(IconButton, { as: "button",
/* Overridable */
ariaLabel: "breadcrumbs item menu", isClean: true, isGrouped: true, size: "small",
/* Non-overridable */
className: classes, onClick: (event) => {
setIsItemMenuOpen(true);
if (onClick)
onClick(event);
}, ref: buttonRef, htmlAttributes: Object.assign({ 'aria-haspopup': true }, htmlAttributes), children: _jsx(ChevronDownIconOutline, {}) }), _jsx(Menu, { anchorRef: buttonRef, onClose: (event) => {
setIsItemMenuOpen(false);
if (onClose)
onClose(event);
}, isOpen: isItemMenuOpen, children: _jsx(Menu.Items, { children: children }) })] }));
};
BreadcrumbsItemMenu.displayName = 'Breadcrumbs.ItemMenu';
const BreadcrumbsEllipsisMenu = ({ as, children, className, isOpen = false, onClick, onClose, onKeyDown, htmlAttributes, }) => {
const ellipsisButtonRef = useRef(null);
const [isEllipsisMenuOpen, setIsEllipsisMenuOpen] = useState(isOpen);
const Component = as || 'span';
const classes = classNames('ndl-breadcrumbs-ellipsis-menu-button', className);
return (_jsxs("li", { className: "ndl-breadcrumbs-ellipsis-menu ndl-breadcrumbs-separator", children: [_jsx(Component, Object.assign({ "aria-controls": isEllipsisMenuOpen ? 'ellipsis-menu' : undefined, "aria-expanded": isEllipsisMenuOpen ? 'true' : undefined, "aria-haspopup": "true", role: "button", tabIndex: 0, className: classes, onClick: (event) => {
setIsEllipsisMenuOpen(true);
if (onClick)
onClick(event);
}, onKeyDown: (event) => {
if (event.key === 'Enter')
setIsEllipsisMenuOpen(true);
if (onKeyDown)
onKeyDown(event);
}, ref: ellipsisButtonRef }, htmlAttributes, { children: "\u2026" })), _jsx(Menu, { anchorRef: ellipsisButtonRef, onClose: (event) => {
setIsEllipsisMenuOpen(false);
if (onClose)
onClose(event);
}, isOpen: isEllipsisMenuOpen, children: _jsx(Menu.Items, { children: children }) })] }));
};
const BreadcrumbsMenuItem = ({ as, children, className, href, isCurrentPage = false, onClick, htmlAttributes, }) => {
const linkClasses = classNames('ndl-breadcrumbs-item-link', className, {
'ndl-breadcrumbs-item-link-active': isCurrentPage,
});
const Component = as || 'span';
return (_jsx(Menu.Item, { as: Component, className: "ndl-breadcrumbs-menu-item", onClick: (event) => {
if (onClick)
onClick(event, href);
}, title: href ? (_jsx(Typography, { as: Component, variant: "body-medium", className: linkClasses, href: href, htmlAttributes: Object.assign({ role: 'button', tabIndex: 0, 'aria-current': isCurrentPage ? 'page' : undefined }, htmlAttributes), children: children })) : (_jsx(Typography, { as: Component, variant: "body-medium",
/* Non-overridable */
className: linkClasses, htmlAttributes: Object.assign({ tabIndex: -1 }, htmlAttributes), children: children })) }));
};
BreadcrumbsMenuItem.displayName = 'Breadcrumbs.MenuItem';
const BreadcrumbsComponent = ({ as, children, className, htmlAttributes, }) => {
const Component = as || 'nav';
const classes = classNames('ndl-breadcrumbs ndl-breadcrumbs-old', className);
return (_jsx(Component, Object.assign({ "aria-label": "Breadcrumb", className: classes }, htmlAttributes, { children: _jsx("ol", { children: children }) })));
};
BreadcrumbsComponent.displayName = 'Breadcrumbs';
// Issue with TypeScript forwardRef and subcomponents: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757#issuecomment-894053907
const Breadcrumbs = Object.assign(BreadcrumbsComponent, {
BaseItem: BreadcrumbsBaseItem,
GroupItem: BreadcrumbsGroupItem,
Item: BreadcrumbsItem,
ItemMenu: BreadcrumbsItemMenu,
EllipsisMenu: BreadcrumbsEllipsisMenu,
MenuItem: BreadcrumbsMenuItem,
});
export { Breadcrumbs };
//# sourceMappingURL=Breadcrumbs.js.map