@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
108 lines (107 loc) • 3.96 kB
TypeScript
/**
*
* 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/>.
*/
import type React from 'react';
import { type HtmlAttributes, type PolymorphicForwardRefExoticComponent } from '../../_common/types';
type BreadcrumbsProps = {
/** Content to be rendered. Should only be `Breadcrumbs.Item`. */
children?: React.ReactNode;
/**
* Additional classnames.
*/
className?: string;
/**
* Additional css styling.
*/
style?: React.CSSProperties;
/** HTML attributes. */
htmlAttributes?: HtmlAttributes<'nav'>;
};
type BreadcrumbsItemContextType = {
isInBreadcrumbsItem: boolean;
};
export declare const useBreadcrumbsItemContext: () => BreadcrumbsItemContextType;
type BreadcrumbsItemProps = {
/** Content to be rendered. Should be either `Breadcrumbs.Link`, `Breadcrumbs.Button` or `Breadcrumbs.SelectButton`. */
children?: React.ReactNode;
/**
* Additional classnames.
*/
className?: string;
/**
* Additional css styling.
*/
style?: React.CSSProperties;
/** HTML attributes. */
htmlAttributes?: HtmlAttributes<'li'>;
};
type InteractiveBreadcrumbProps = {
/** Content to be rendered. */
children?: React.ReactNode;
} & ({
as: 'button';
/**
* Event handler for when the button is clicked. Only applicable if `as` is `'button'`.
*/
onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
} | {
as: 'a';
/**
* The href of the link. Only applicable if `as` is `'a'`.
*/
href: HtmlAttributes<'a'>['href'];
/**
* The target of the link. Only applicable if `as` is `'a'`.
*/
target?: HtmlAttributes<'a'>['target'];
} | {
/**
* What HTML element to render the root element as.
*/
as?: React.ElementType;
});
type BreadcrumbsSelectButtonProps = {
/** Event handler for when the button is clicked. Should be used to open a `Menu`. */
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
/** Aria label needed for accessibility. */
ariaLabel: string;
/** Content to be rendered. */
children?: React.ReactNode;
/** Additional classnames. */
className?: string;
/** Additional css styling. */
style?: React.CSSProperties;
/** HTML attributes. */
htmlAttributes?: HtmlAttributes<'button'>;
};
type BreadcrumbsLinkProps = InteractiveBreadcrumbProps & {
/**
* Whether the link is the current item. Use `'page'` if it indicates the current page and `'step'` for steps (in a multi-step wizard for example).
* @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current
*/
ariaCurrent?: React.AriaAttributes['aria-current'];
};
declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & React.RefAttributes<HTMLElement>> & {
Button: PolymorphicForwardRefExoticComponent<"button", InteractiveBreadcrumbProps>;
Item: React.ForwardRefExoticComponent<BreadcrumbsItemProps & React.RefAttributes<HTMLLIElement>>;
Link: PolymorphicForwardRefExoticComponent<"a", BreadcrumbsLinkProps>;
SelectButton: React.ForwardRefExoticComponent<BreadcrumbsSelectButtonProps & React.RefAttributes<HTMLButtonElement>>;
};
export { Breadcrumbs };