@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
65 lines (64 loc) • 2.6 kB
TypeScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { type Key } from 'react';
import type { StrictXCSSProp } from '@atlaskit/css';
import type { ResizeBound } from './panel-splitter/types';
import type { CommonSlotProps } from './types';
/**
* The Panel layout area is rendered to the right (inline end) of the Main area, or the Aside area if it is present.
*
* On small viewports (below 64rem, or 1024px), the Panel slot will become an overlay.
*
* You can optionally render a `PanelSplitter` as a child to make the panel area resizable.
*/
export declare function Panel({ children, defaultWidth: defaultWidthProp, label, skipLinkLabel, testId, id: providedId, xcss, hasBorder, maxWidth, contentKey, }: CommonSlotProps & {
/**
* The content of the layout area.
*/
children: React.ReactNode;
/**
* The accessible name of the slot, announced by screen readers.
*/
label?: string;
/**
* The default width of the layout area.
*
* It should be an integer between the resize bounds - the minimum is 120px and the maximum is 50% of the viewport width.
*
* This value is also used as the minimum resizing width, except when the `defaultWidth` is greater then `400px`,
* in which case `400px` will be used as the minimum resizing width instead.
*/
defaultWidth?: number;
/**
* Opt-in override for the maximum width the panel can be resized to, applied to both the rendered
* width and the resize bounds (mouse and keyboard).
*
* When omitted, the panel defaults to half the viewport width (after removing the sidebar width),
* which keeps it from growing larger than the page content. Provide a `vw` or `px` value (e.g.
* `'70vw'`) to allow a wider panel.
*
* This is currently used by Jira's Issue Navigator native issue preview panel; other consumers
* should leave it unset to keep the default cap.
*/
maxWidth?: ResizeBound;
/**
* Identifies the content currently displayed in the panel. Changing this value animates the
* previous content out before animating the next content in. When omitted, content updates
* immediately.
*/
contentKey?: Key;
/**
* Bounded style overrides.
*/
xcss?: StrictXCSSProp<'backgroundColor', never>;
/**
* Whether or not the slot has its own border. On small screens this becomes a shadow.
*
* Defaults to true. Will be removed in the future (and disabling the border will not be supported).
*
* @deprecated
*/
hasBorder?: boolean;
}): JSX.Element;