UNPKG

@payfit/unity-components

Version:

50 lines (49 loc) 2.82 kB
import { RegisteredRouter, ValidateLinkOptions } from '@tanstack/react-router'; import { ReactNode } from 'react'; import { MenuItemProps as RawMenuItemProps, RawMenuItem } from '../../../../components/menu/parts/RawMenuItem.js'; type MenuItemRouterProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown, TDefaultFrom extends string = string> = Omit<RawMenuItemProps, 'onAction' | 'children' | 'prefix'> & ValidateLinkOptions<TRouter, TOptions, TDefaultFrom, typeof RawMenuItem> & { children?: ReactNode; prefixElement?: RawMenuItemProps['prefix']; }; type MenuItemButtonProps = Omit<RawMenuItemProps, 'href' | 'children'> & { onAction: NonNullable<RawMenuItemProps['onAction']>; children?: ReactNode; }; export type MenuItemProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown, TDefaultFrom extends string = string> = MenuItemRouterProps<TRouter, TOptions, TDefaultFrom> | MenuItemButtonProps; /** * A menu item component that integrates with Tanstack Router for navigation. * Provides seamless routing capabilities for menu items in context menus, dropdown menus, and other menu-based interfaces. * @param props - Either router-based props (with 'to') or button-based props (with 'onAction') * @example * ```tsx * import { MenuItem } from '@payfit/unity-components/integrations/tanstack-router' * * function ContextMenu() { * return ( * <Menu> * <MenuItem to="/dashboard" prefixElement={<Icon src="DashboardOutlined" />}> * Dashboard * </MenuItem> * <MenuItem onAction={() => alert('Action triggered')}> * Perform Action * </MenuItem> * </Menu> * ) * } * ``` * @remarks * - When 'to' prop is provided, the component renders as a router link * - When 'onAction' prop is provided (without 'to'), it renders as a button * - Supports all Tanstack Router link features like preloading, search params, and route params * - Maintains accessibility features from the underlying RawMenuItem component * @see {@link MenuItemProps} for all available props * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/menu-item GitHub} * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma} * @see Design docs in {@link https://www.payfit.design/ Payfit.design} * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io} */ declare function MenuItem<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown>(props: MenuItemProps<TRouter, TOptions>): import("react/jsx-runtime").JSX.Element; declare namespace MenuItem { var displayName: string; } export { MenuItem };