@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
63 lines (62 loc) • 3.52 kB
TypeScript
/**
* These variables are shared across the different page layout slots.
* This violates the [UI styling standard](https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-imported-style-values/usage).
* We have chosen to ignore this rule to prevent duplicating them across the different slots, and to provide a high level view of them and how they relate.
*/
/**
* Default minimum width of Main, in pixels, before a custom minimum is registered.
*/
export declare const defaultMainMinWidth = 320;
export declare const sideNavVar = "--n_sNvw";
export declare const asideVar = "--n_asDw";
export declare const panelVar = "--n_pnlW";
export declare const chatPanelVar = "--n_cPnlW";
export declare const chatPanelLiveWidthVar = "--n_cPnlLw";
export declare const mainMinimumWidthVar = "--n_mainMinW";
export declare const bannerMountedVar = "--n_bnrM";
export declare const topNavMountedVar = "--n_tNvM";
export declare const ribbonVar = "--n_rbnW";
/**
* Rendered border-box width of the local PanelLayout surface, in both inline and overlay modes.
* Published on document.documentElement after mounting when Root opts into
* UNSAFE_dangerouslyHoistSlotSizes. Only the primary Root should opt in.
* Use `var(${localPanelWidthVar}, 0px)` for external controls, not for width persistence
* or sizing the panel itself. The property is removed when the surface unmounts.
*/
export declare const localPanelWidthVar = "--n_localPanelWidth";
/**
* Captures the current width of the side navigation, at all times, including during resizing.
*
* The standard `sideNavVar` only captures the 'committed' width, not the resizing width.
*/
export declare const sideNavLiveWidthVar = "--n_sNvlw";
export declare const sideNavPanelSplitterId: unique symbol;
export declare const asidePanelSplitterId: unique symbol;
export declare const panelPanelSplitterId: unique symbol;
export declare const contentHeightWhenFixed = "calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))";
export declare const contentInsetBlockStart = "calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))";
export declare const UNSAFE_topNavVar = "--topNavigationHeight";
export declare const UNSAFE_bannerVar = "--bannerHeight";
export declare const UNSAFE_sideNavLayoutVar = "--leftSidebarWidth";
export declare const UNSAFE_ribbonVar = "--leftPanelWidth";
export declare const UNSAFE_asideLayoutVar = "--rightSidebarWidth";
export declare const UNSAFE_panelLayoutVar = "--rightPanelWidth";
export declare const UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY: 'calc(var(--bannerHeight, 0px) + var(--topNavigationHeight, 0px))';
export declare const UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY: 'calc(var(--leftPanelWidth, 0px) + var(--leftSidebarWidth, 0px))';
export declare const UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY: 'calc(var(--rightSidebarWidth, 0px) + var(--rightPanelWidth, 0px))';
/**
* We define the z-indexes here so each page slot can be locally layered against each other.
* For globally defined values such as flag, modal, etc, we can continue to
* rely on accessing them through global means.
*/
export declare const localSlotLayers: {
chatPanelOverlay: number;
ribbon: number;
topBar: number;
banner: number;
sideNav: number;
panelSmallViewports: number;
};
export declare const openLayerObserverSideNavNamespace = "side-nav";
export declare const openLayerObserverTopNavMiddleNamespace = "top-nav-middle";
export declare const openLayerObserverTopNavEndNamespace = "top-nav-end";