@atlaskit/side-navigation
Version:
A highly composable side navigation component that supports nested views.
94 lines (93 loc) • 4.61 kB
TypeScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React from 'react';
export declare const ROOT_ID = "ATLASKIT_NESTED_ROOT";
/**
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
*/
export interface NestableNavigationContentProps {
/**
* The NestableNavigationContent wraps the entire navigation hierarchy of a side navigation.
* Using this component is only needed if you want to enable nested views with [nesting items](/packages/navigation/side-navigation/docs/nesting-item),
* otherwise you should use [navigation content](/packages/navigation/side-navigation/docs/navigation-content) instead.
*/
children: JSX.Element | JSX.Element[];
/**
* 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:
* - This wrapper - `{testId}`
* - The back item (displayed when inside a nested view) - `{testId}--go-back-item`
*/
testId?: string;
/**
* This forces the top scroll indicator to be shown. Use this prop when you need to
* distinctly separate the side navigation header from the side navigation content.
*/
showTopScrollIndicator?: boolean;
/**
* Array of the initial stack you want to show.
* This is useful when you want to set the initial nested view but don't want to opt into a controlled state.
* Make sure to have all intermediate navigation pages line up.
*/
initialStack?: string[];
/**
* Enables you to control the stack of navigation views you want to show.
* Do not jump between controlled and uncontrolled else undefined behaviour will occur.
* This means either using `initialStack` OR `stack` but not both.
* Make sure your stack array has a stable reference and does not change between renders.
*/
stack?: string[];
/**
* Allows you to react based on transitions between [nesting items](/packages/navigation/side-navigation/docs/nesting-item).
* It will be called everytime a person navigates from one [nesting item](/packages/navigation/side-navigation/docs/nesting-item) to another,
* both up or down the navigation hierarchy.
* This prop should be used with the `stack` prop for controlled behavior.
*/
onChange?: (stack: string[]) => void;
/**
* Called when a nesting ID that does not exist among `<NestingItem>`s is pushed to the stack. Use this callback to be notified when there is an undefined nesting state.
* Provides you with the stack which led to the undefined state, with the top of the stack (last item in array) being the invalid item.
*/
onUnknownNest?: (stack: string[]) => void;
/**
* Custom overrides for the composed components.
*
* @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
*/
overrides?: {
/**
* Use this to override the default back button displayed when navigation is nested.
* You'll want to import the [go back item](/packages/navigation/docs/go-back-item) component and use it here.
* This will be displayed for all children [nesting items](/packages/navigation/side-navigation/docs/nesting-item) 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<HTMLElement>;
}) => React.ReactNode;
};
};
/**
* This property is enabled by default (set to true) and is designed to manage keyboard focus
* for the "go back" button or the last active parent within the `<NestingItem/>` component.
* It is applicable only when using our `<NestingItem/>` component.
*/
isDefaultFocusControl?: boolean;
}
/**
* __Nestable navigation content__
*
* The container for navigation items with nested views
*
* - [Examples](https://atlassian.design/components/side-navigation/examples#nested-navigation)
* - [Code](https://atlassian.design/components/side-navigation/code)
*
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
*/
export declare const NestableNavigationContent: (props: NestableNavigationContentProps) => JSX.Element;