@atlaskit/navigation-system/dist/types/ui/page-layout/panel-layout.d.ts

The latest navigation system for Atlassian apps.

import { type Key, type ReactNode } from 'react';
import { type LayoutAreaMode } from './layout-area-sizing-context';
export type PanelResizeEnd = {
    initialWidth: number;
    finalWidth: number;
    mode: LayoutAreaMode;
};
export type PanelLayoutProps = {
    /**
     * Main content. Mount PanelLayout inside navigation's Main, alongside ChatPanel in Root.
     */
    children: ReactNode;
    /**
     * Caller-owned panel content; no Panel System provider or renderer is required.
     */
    panel: ReactNode;
    isPanelOpen: boolean;
    /**
     * Optional content identity, used to reset scrolling and animate content replacement.
     */
    panelKey?: Key;
    /**
     * Controlled preferred width in pixels. Allocation may constrain it without changing the request.
     */
    panelWidth?: number;
    /**
     * Initial preferred width in pixels; subsequent changes are ignored.
     * Defaults to 365, or 400 with chat layout enabled.
     * After a user resize, one preferred width is retained across inline and overlay modes.
     * Available space can constrain the rendered width without overwriting that preference.
     */
    defaultPanelWidth?: number;
    /**
     * Default at compact viewport sizes. Defaults to 320, or an explicitly supplied defaultPanelWidth.
     * Used only until a controlled width or user resize supplies a preference.
     */
    compactDefaultPanelWidth?: number;
    /**
     * Minimum width in pixels. Defaults to 320; overlays can be smaller in a narrower container.
     */
    panelMinWidth?: number;
    /**
     * Optional maximum width in pixels.
     */
    panelMaxWidth?: number;
    /**
     * Called after user resizing, with the effective width. Accept this value to control panelWidth.
     */
    onPanelWidthChange?: (width: number) => void;
    /**
     * One callback per completed pointer/keyboard resize, for persistence and analytics.
     */
    onResizeEnd?: (event: PanelResizeEnd) => void;
    /**
     * Accessible region and splitter labels; pass localized values in products.
     */
    panelLabel?: string;
    resizeLabel?: string;
    testId?: string;
};
/**
 * A coordinated local panel with caller-owned content and state. Keep this host mounted
 * while closed to retain resized widths. Unmount it to reset its width preferences.
 *
 * Mount only one local-panel host per navigation Root/sizing coordinator, including
 * closed hosts and panel-system's LayoutWithPanel. Switch content through the same host;
 * separate Roots may each own a local panel.
 *
 * With chat layout enabled it shares Root's sizing coordinator. Otherwise it measures
 * its own Main region, leaving existing navigation/chat behavior unchanged.
 * Local-panel placement and resize constraints use this layout in both cases; disabling
 * the chat-layout gate does not restore the previous panel-system layout engine.
 */
export declare function PanelLayout(props: PanelLayoutProps): JSX.Element;