@atlaskit/navigation-system 10.17.2 → 10.17.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlassian/navigation-system
 
+## 10.17.3
+
+### Patch Changes
+
+- [`14307d3138fd3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/14307d3138fd3) -
+  Refactor styles to use statically analyzable values and type-checked inline constants for Compiled
+  and Atlaspack incremental builds, preserving existing styling behavior.
+- Updated dependencies
+
 ## 10.17.2
 
 ### Patch Changes

package/dist/cjs/ui/page-layout/main/main.js

@@ -12,9 +12,10 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _useSkipLink = require("../../../context/skip-links/use-skip-link");
-var _constants = require("../constants");
 var _useLayoutId = require("../use-layout-id");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var contentInsetBlockStartStatic = "calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))";
+var contentHeightWhenFixedStatic = "calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))";
 var mainElementStyles = {
   root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _4t3ieqxy _qwfh1wug _13wn1if8",
   print: "_8rrs1wug"

package/dist/cjs/ui/page-layout/ribbon.js

@@ -17,6 +17,20 @@ var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
 var _useLayoutId = require("./use-layout-id");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
+var localSlotLayersStatic = {
+  ribbon: 4,
+  // The side nav panel splitter is layered above the top nav when FHS is enabled.
+  // It has the same z-index value, but is rendered after the top nav in the DOM so is stacked above.
+  sideNavPanelSplitterFHS: 4,
+  topBar: 4,
+  banner: 4,
+  // When FHS is enabled, the side nav is layered below the top nav,
+  // but above the panel
+  bannerFHS: 3,
+  topNavFHS: 3,
+  sideNav: 2,
+  panelSmallViewports: 1
+};
 var styles = {
   root: "_nd5l1c99 _1reo15vq _18m915vq _4t3i1osq _152tidpf _kqsw1if8 _vchhusvi _1pbyegat _1e0cglyw _dm2518uv"
 };

package/dist/es2019/ui/page-layout/aside.js

@@ -8,7 +8,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
 import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
-import { asidePanelSplitterId, asideVar, contentHeightWhenFixed, contentInsetBlockStart, UNSAFE_asideLayoutVar } from './constants';
+import { UNSAFE_asideLayoutVar, asidePanelSplitterId, asideVar } from './constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
 import { PanelSplitterProvider } from './panel-splitter/provider';

package/dist/es2019/ui/page-layout/banner.js

@@ -6,7 +6,7 @@ import { useContext } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { useIsFhsEnabled } from '../fhs-rollout/use-is-fhs-enabled';
-import { bannerMountedVar, localSlotLayers, UNSAFE_bannerVar } from './constants';
+import { bannerMountedVar, UNSAFE_bannerVar } from './constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
 import { HoistCssVarToLocalGrid } from './hoist-css-var-to-local-grid';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';

package/dist/es2019/ui/page-layout/main/main.js

@@ -5,8 +5,9 @@ import { ax, ix } from "@compiled/react/runtime";
 import { Fragment } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useSkipLink } from '../../../context/skip-links/use-skip-link';
-import { contentHeightWhenFixed, contentInsetBlockStart } from '../constants';
 import { useLayoutId } from '../use-layout-id';
+const contentInsetBlockStartStatic = `calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))`;
+const contentHeightWhenFixedStatic = `calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))`;
 const mainElementStyles = {
   root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _4t3ieqxy _qwfh1wug _13wn1if8",
   print: "_8rrs1wug"

package/dist/es2019/ui/page-layout/panel.js

@@ -11,7 +11,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
 import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
-import { contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, panelPanelSplitterId, panelVar, sideNavLiveWidthVar, UNSAFE_panelLayoutVar } from './constants';
+import { UNSAFE_panelLayoutVar, panelPanelSplitterId, panelVar, sideNavLiveWidthVar } from './constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
 import { PanelSplitterProvider } from './panel-splitter/provider';

package/dist/es2019/ui/page-layout/ribbon.js

@@ -5,10 +5,24 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
 import { media } from '@atlaskit/primitives/responsive';
-import { localSlotLayers, UNSAFE_ribbonVar } from './constants';
+import { UNSAFE_ribbonVar } from './constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
 import { useLayoutId } from './use-layout-id';
+const localSlotLayersStatic = {
+  ribbon: 4,
+  // The side nav panel splitter is layered above the top nav when FHS is enabled.
+  // It has the same z-index value, but is rendered after the top nav in the DOM so is stacked above.
+  sideNavPanelSplitterFHS: 4,
+  topBar: 4,
+  banner: 4,
+  // When FHS is enabled, the side nav is layered below the top nav,
+  // but above the panel
+  bannerFHS: 3,
+  topNavFHS: 3,
+  sideNav: 2,
+  panelSmallViewports: 1
+};
 const styles = {
   root: "_nd5l1c99 _1reo15vq _18m915vq _4t3i1osq _152tidpf _kqsw1if8 _vchhusvi _1pbyegat _1e0cglyw _dm2518uv"
 };

package/dist/es2019/ui/page-layout/side-nav/side-nav.js

@@ -17,7 +17,7 @@ import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../../context/skip-links/use-skip-link-internal';
 import { TopNavStartElement } from '../../../context/top-nav-start/top-nav-start-element';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-import { bannerMountedVar, contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, openLayerObserverSideNavNamespace, openLayerObserverTopNavStartNamespace, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar, UNSAFE_sideNavLayoutVar } from '../constants';
+import { UNSAFE_sideNavLayoutVar, openLayerObserverSideNavNamespace, openLayerObserverTopNavStartNamespace, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar } from '../constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from '../dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
 import { PanelSplitterProvider } from '../panel-splitter/provider';

package/dist/es2019/ui/page-layout/top-nav/top-nav.js

@@ -11,7 +11,7 @@ import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-the
 import { HasDefaultBackgroundColorContext } from '../../top-nav-items/themed/has-default-background-color-context';
 import { useCustomTheme } from '../../top-nav-items/themed/use-custom-theme';
 import { useCustomThemeNew } from '../../top-nav-items/themed/use-custom-theme-new';
-import { bannerMountedVar, localSlotLayers, sideNavLiveWidthVar, topNavMountedVar, UNSAFE_topNavVar } from '../constants';
+import { UNSAFE_topNavVar, topNavMountedVar } from '../constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from '../dangerously-hoist-css-var-to-document-root';
 import { HoistCssVarToLocalGrid } from '../hoist-css-var-to-local-grid';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';

package/dist/esm/ui/page-layout/aside.js

@@ -10,7 +10,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
 import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
-import { asidePanelSplitterId, asideVar, contentHeightWhenFixed, contentInsetBlockStart, UNSAFE_asideLayoutVar } from './constants';
+import { UNSAFE_asideLayoutVar, asidePanelSplitterId, asideVar } from './constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
 import { PanelSplitterProvider } from './panel-splitter/provider';

package/dist/esm/ui/page-layout/banner.js

@@ -6,7 +6,7 @@ import { useContext } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { useIsFhsEnabled } from '../fhs-rollout/use-is-fhs-enabled';
-import { bannerMountedVar, localSlotLayers, UNSAFE_bannerVar } from './constants';
+import { bannerMountedVar, UNSAFE_bannerVar } from './constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
 import { HoistCssVarToLocalGrid } from './hoist-css-var-to-local-grid';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';

package/dist/esm/ui/page-layout/main/main.js

@@ -5,8 +5,9 @@ import { ax, ix } from "@compiled/react/runtime";
 import { Fragment } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useSkipLink } from '../../../context/skip-links/use-skip-link';
-import { contentHeightWhenFixed, contentInsetBlockStart } from '../constants';
 import { useLayoutId } from '../use-layout-id';
+var contentInsetBlockStartStatic = "calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))";
+var contentHeightWhenFixedStatic = "calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))";
 var mainElementStyles = {
   root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _4t3ieqxy _qwfh1wug _13wn1if8",
   print: "_8rrs1wug"

package/dist/esm/ui/page-layout/panel.js

@@ -13,7 +13,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
 import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
-import { contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, panelPanelSplitterId, panelVar, sideNavLiveWidthVar, UNSAFE_panelLayoutVar } from './constants';
+import { UNSAFE_panelLayoutVar, panelPanelSplitterId, panelVar, sideNavLiveWidthVar } from './constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
 import { PanelSplitterProvider } from './panel-splitter/provider';

package/dist/esm/ui/page-layout/ribbon.js

@@ -5,10 +5,24 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
 import { media } from '@atlaskit/primitives/responsive';
-import { localSlotLayers, UNSAFE_ribbonVar } from './constants';
+import { UNSAFE_ribbonVar } from './constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
 import { useLayoutId } from './use-layout-id';
+var localSlotLayersStatic = {
+  ribbon: 4,
+  // The side nav panel splitter is layered above the top nav when FHS is enabled.
+  // It has the same z-index value, but is rendered after the top nav in the DOM so is stacked above.
+  sideNavPanelSplitterFHS: 4,
+  topBar: 4,
+  banner: 4,
+  // When FHS is enabled, the side nav is layered below the top nav,
+  // but above the panel
+  bannerFHS: 3,
+  topNavFHS: 3,
+  sideNav: 2,
+  panelSmallViewports: 1
+};
 var styles = {
   root: "_nd5l1c99 _1reo15vq _18m915vq _4t3i1osq _152tidpf _kqsw1if8 _vchhusvi _1pbyegat _1e0cglyw _dm2518uv"
 };

package/dist/esm/ui/page-layout/side-nav/side-nav.js

@@ -21,7 +21,7 @@ import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../../context/skip-links/use-skip-link-internal';
 import { TopNavStartElement } from '../../../context/top-nav-start/top-nav-start-element';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-import { bannerMountedVar, contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, openLayerObserverSideNavNamespace, openLayerObserverTopNavStartNamespace, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar, UNSAFE_sideNavLayoutVar } from '../constants';
+import { UNSAFE_sideNavLayoutVar, openLayerObserverSideNavNamespace, openLayerObserverTopNavStartNamespace, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar } from '../constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from '../dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
 import { PanelSplitterProvider } from '../panel-splitter/provider';

package/dist/esm/ui/page-layout/top-nav/top-nav.js

@@ -11,7 +11,7 @@ import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-the
 import { HasDefaultBackgroundColorContext } from '../../top-nav-items/themed/has-default-background-color-context';
 import { useCustomTheme } from '../../top-nav-items/themed/use-custom-theme';
 import { useCustomThemeNew } from '../../top-nav-items/themed/use-custom-theme-new';
-import { bannerMountedVar, localSlotLayers, sideNavLiveWidthVar, topNavMountedVar, UNSAFE_topNavVar } from '../constants';
+import { UNSAFE_topNavVar, topNavMountedVar } from '../constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from '../dangerously-hoist-css-var-to-document-root';
 import { HoistCssVarToLocalGrid } from '../hoist-css-var-to-local-grid';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "10.17.2",
+	"version": "10.17.3",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -64,7 +64,7 @@
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/icon": "^37.7.0",
 		"@atlaskit/layering": "^5.2.0",
-		"@atlaskit/logo": "^23.0.0",
+		"@atlaskit/logo": "^23.1.0",
 		"@atlaskit/motion": "^8.8.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/platform-feature-flags-react": "^1.2.0",