@atlaskit/navigation-system/dist/cjs/ui/page-layout/constants.js

The latest navigation system for Atlassian apps.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.topNavMountedVar = exports.sideNavVar = exports.sideNavPanelSplitterId = exports.sideNavLiveWidthVar = exports.ribbonVar = exports.panelVar = exports.panelPanelSplitterId = exports.openLayerObserverTopNavMiddleNamespace = exports.openLayerObserverTopNavEndNamespace = exports.openLayerObserverSideNavNamespace = exports.mainMinimumWidthVar = exports.localSlotLayers = exports.localPanelWidthVar = exports.defaultMainMinWidth = exports.contentInsetBlockStart = exports.contentHeightWhenFixed = exports.chatPanelVar = exports.chatPanelLiveWidthVar = exports.bannerMountedVar = exports.asideVar = exports.asidePanelSplitterId = exports.UNSAFE_topNavVar = exports.UNSAFE_sideNavLayoutVar = exports.UNSAFE_ribbonVar = exports.UNSAFE_panelLayoutVar = exports.UNSAFE_bannerVar = exports.UNSAFE_asideLayoutVar = exports.UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = void 0;
/**
 * 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.
 */
var defaultMainMinWidth = exports.defaultMainMinWidth = 320;

// These are "compressed" to discourage usage.
var sideNavVar = exports.sideNavVar = '--n_sNvw';
var asideVar = exports.asideVar = '--n_asDw';
var panelVar = exports.panelVar = '--n_pnlW';
var chatPanelVar = exports.chatPanelVar = '--n_cPnlW';
var chatPanelLiveWidthVar = exports.chatPanelLiveWidthVar = '--n_cPnlLw';
var mainMinimumWidthVar = exports.mainMinimumWidthVar = '--n_mainMinW';
var bannerMountedVar = exports.bannerMountedVar = '--n_bnrM';
var topNavMountedVar = exports.topNavMountedVar = '--n_tNvM';
var ribbonVar = exports.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.
 */
var localPanelWidthVar = exports.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.
 */
var sideNavLiveWidthVar = exports.sideNavLiveWidthVar = '--n_sNvlw';
var sideNavPanelSplitterId = exports.sideNavPanelSplitterId = Symbol('SideNav PanelSplitter');
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
var asidePanelSplitterId = exports.asidePanelSplitterId = Symbol('Aside PanelSplitter');
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
var panelPanelSplitterId = exports.panelPanelSplitterId = Symbol('Panel PanelSplitter');

// We aren't using template literals here because Compiled can't compiled them in platform ATM.
var contentHeightWhenFixed = exports.contentHeightWhenFixed = "calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))";
var contentInsetBlockStart = exports.contentInsetBlockStart = "calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))";

// We define variables as they can change their size depending on the viewport width. That isn't needed for
// general grid item slots because, well, they just take up the size of the grid item! In this instance since
// the UNSAFE absolutely positioned sibling isn't on the grid it needs extra layout information.
// Note: THESE ARE THE SAME VALUES AS THE LEGACY PAGE LAYOUT.
// WHEN WE ELIMINATE USAGE OF THOSE VARIABLES THESE CAN BE RENAMED TO BE HASHED.
var UNSAFE_topNavVar = exports.UNSAFE_topNavVar = '--topNavigationHeight';
var UNSAFE_bannerVar = exports.UNSAFE_bannerVar = '--bannerHeight';
var UNSAFE_sideNavLayoutVar = exports.UNSAFE_sideNavLayoutVar = '--leftSidebarWidth';
var UNSAFE_ribbonVar = exports.UNSAFE_ribbonVar = '--leftPanelWidth';
var UNSAFE_asideLayoutVar = exports.UNSAFE_asideLayoutVar = '--rightSidebarWidth';
var UNSAFE_panelLayoutVar = exports.UNSAFE_panelLayoutVar = '--rightPanelWidth';

// The following UNSAFE variables are used to absolutely position elements that aren't a child of page layout.
// Known use cases: Legacy pages rendered inside Confluence and Jira.
var UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = "calc(var(".concat(UNSAFE_bannerVar, ", 0px) + var(").concat(UNSAFE_topNavVar, ", 0px))");
var UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = "calc(var(".concat(UNSAFE_ribbonVar, ", 0px) + var(").concat(UNSAFE_sideNavLayoutVar, ", 0px))");
var UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = "calc(var(".concat(UNSAFE_asideLayoutVar, ", 0px) + var(").concat(UNSAFE_panelLayoutVar, ", 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.
 */
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
var localSlotLayers = exports.localSlotLayers = {
  // Chat overlays the app, including TopNav and SideNav, below the banner.
  chatPanelOverlay: 5,
  ribbon: 4,
  topBar: 4,
  banner: 4,
  sideNav: 2,
  panelSmallViewports: 1
};
var openLayerObserverSideNavNamespace = exports.openLayerObserverSideNavNamespace = 'side-nav';
var openLayerObserverTopNavMiddleNamespace = exports.openLayerObserverTopNavMiddleNamespace = 'top-nav-middle';
var openLayerObserverTopNavEndNamespace = exports.openLayerObserverTopNavEndNamespace = 'top-nav-end';