/** * @jsxRuntime classic * @jsx jsx */ import React from 'react'; import { type CustomItemComponentProps } from '@atlaskit/menu'; interface NestingItemOverrides { /** * Use this to override the back button displayed when navigation is nested. * You'll want to import the [go back item](/packages/navigation/side-navigation/docs/go-back-item) component and use it here. * This will be displayed for all children nesting item components unless they define their own. * Your custom component should be wrapped with forwardRef to support assistive technologies. */ GoBackItem?: { render?: (props: { onClick: () => void; testId?: string; ref?: React.Ref; }) => React.ReactNode; }; } export interface NestingItemProps { /** * A unique identifier for the nesting item. * Every nesting item component needs a unique ID, or else undefined behavior will occur. */ id: string; /** * Text to display when the nesting item is rendered as a interactable element. */ title: React.ReactNode; /** * The view that should be shown when this nesting item is visible. */ children: React.ReactNode; /** * Used to customize the rendered component when shown as an item. * You can use this for example to change it to a SPA link. * Your custom component should be wrapped with forwardRef to support assistive technologies. */ component?: React.ComponentType; /** * A `testId` prop is provided for specified elements, * which is a unique string that appears as a data attribute `data-testid` in the rendered code, * serving as a hook for automated tests. * * Will set these elements when defined: * - The container - `{testId}--container` * - The nesting item - `{testId}--item` * - The go back item - `{testId}--go-back-item` (only used if you pass in a override). * - The nesting item default right arrow icon - `{testId}--item--right-arrow` */ testId?: string; /** * Not recommended for general use as it enables unsafe style overrides. */ className?: string; /** * Element to render before the item text. * Generally should be an [icon](https://atlassian.design/components/icon/icon-explorer) component. */ iconBefore?: React.ReactNode; /** * Element to render after the item text. * Generally should be an [icon](https://atlassian.design/components/icon/icon-explorer) component. */ iconAfter?: React.ReactNode; /** * Event that is triggered when a person clicks the element. */ onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void; /** * Description of the item. * This will render smaller text below the primary text of the item as well as slightly increasing the height of the item. */ description?: string | JSX.Element; /** * Makes the element appear disabled and removes interactivity. Be aware that disabled UI does not appear to people who use assistive technology, so avoid using this if it still needs to appear in the tab order. */ isDisabled?: boolean; /** * Makes the element appear selected. */ isSelected?: boolean; /** * Custom overrides for the composed components. */ overrides?: NestingItemOverrides; } /** * NestingItem will render itself differently depending in what context it is rendered in. * When not open - it will render itself as an item. * When open - it will render its children. */ declare const NestingItem: (props: NestingItemProps & Omit) => JSX.Element; export default NestingItem;