@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
91 lines • 4.01 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 Popover } from '../popover';
export interface MenuProps {
/** Whether the menu is open or closed (uncontrolled when omitted) */
isOpen?: boolean;
/** Callback function that is called when the menu closes */
onClose?: (event: Event | undefined, closeReason: {
type: 'backdropClick' | 'itemClick' | 'escapeKeyDown';
id?: string;
}) => void;
/** Anchor element ref for positioning */
anchorRef?: React.RefObject<HTMLElement | null>;
/** Content displayed inside the menu */
children?: React.ReactNode;
/** Whether the menu is a root menu instance. This is set internally by the component based on nesting */
isRoot?: boolean;
/** The placement of the floating element is determined by two sets of words. The first set of words specifies the point on the anchor element where the floating element will be attached. The second set of coordinates specifies the point on the floating element that will attach to the anchor element.*/
placement?: React.ComponentProps<typeof Popover>['placement'];
/** Minimum width in pixels for the menu component */
minWidth?: number;
/** Optional title for nested trigger rendering */
title?: string;
/** Whether the menu trigger is disabled */
isDisabled?: boolean;
/** Optional description for nested trigger rendering */
description?: React.ReactNode;
/** Optional icon for nested trigger rendering */
icon?: React.ReactNode;
/** Whether the menu should be wrapped in a floating portal */
isPortaled?: boolean;
/** Portal target element (defaults to `document.body`) */
portalTarget?: HTMLElement | null;
/** Positioning strategy used by Floating UI */
strategy?: 'absolute' | 'fixed';
}
export interface MenuItemProps {
/** Title of the menu item component */
title: React.ReactNode;
/** Leading icon for the menu item component */
leadingVisual?: React.ReactNode;
trailingContent?: React.ReactNode;
/** Supporting text below title */
description?: React.ReactNode;
/** Whether the menu item is disabled */
isDisabled?: boolean;
/** Callback function that is called when the menu item is clicked and it closes the menu tree */
onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
/** Callback function that is called when the menu item is focused */
onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
/** Unique identifier for the menu item */
id?: string;
/** Content displayed inside the menu item component */
children?: React.ReactNode;
}
export type NestedMenuItemProps = Omit<MenuItemProps, 'children' | 'trailingContent'>;
export interface MenuItemsProps {
/** Content displayed inside the menu items component */
children?: React.ReactNode;
}
export interface CategoryItemProps {
/** Content displayed inside the category item component */
children?: React.ReactNode;
}
export type MenuItemComponentProps = {
title?: React.ReactNode;
description?: React.ReactNode;
className?: string;
leadingContent?: React.ReactNode;
trailingContent?: React.ReactNode;
isDisabled?: boolean;
};
//# sourceMappingURL=menu-types.d.ts.map