@atlaskit/navigation-system 2.3.4 → 2.4.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlassian/navigation-system
 
+## 2.4.1
+
+### Patch Changes
+
+- [`f0662cd7a143e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f0662cd7a143e) -
+  Internal changes to how borders are applied.
+- Updated dependencies
+
+## 2.4.0
+
+### Minor Changes
+
+- [`6743796745b3d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6743796745b3d) -
+  Changes PanelSplitter to use a `col-resize` cursor instead of `ew-resize`, when the
+  `navx-full-height-sidebar` feature gate is enabled.
+- [`ad74a7aedf419`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ad74a7aedf419) -
+  Adds layout changes to support a full height sidebar behind the `navx-full-height-sidebar` feature
+  gate.
+
 ## 2.3.4
 
 ### Patch Changes

package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter.compiled.css

@@ -1,8 +1,7 @@
 ._12ji1r31{outline-color:currentColor}
 ._12y31o36{outline-width:medium}
 ._152tidpf{inset-block-start:0}
-._19bvze3t{padding-left:var(--ds-space-0,0)}
-._1bsbjfq9{width:var(--ds-border-width-indicator,3px)}
+._1bsb1l7b{width:3px}
 ._1bsbl52n{width:17px}
 ._1e021v6z{inset-inline-start:7px}
 ._1e02zeo2{inset-inline-start:-9px}
@@ -11,23 +10,25 @@
 ._1lww5cps{transition-delay:0ms}
 ._1oec1yx9{transition-duration:.1s}
 ._1pbykb7n{z-index:1}
+._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
 ._1qu2glyw{outline-style:none}
 ._4t3i1osq{height:100%}
+._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
 ._bfhk1j28{background-color:transparent}
 ._bfhk1r31{background-color:currentColor}
-._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._k8m01ylx{transition-property:color}
 ._kqswstnw{position:absolute}
-._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._rjxpftgi{inset-inline-end:8px}
 ._syaz1j28{color:transparent}
 ._syaz1kw7{color:inherit}
-._u5f3ze3t{padding-right:var(--ds-space-0,0)}
 ._u7coidpf{inset-block-end:0}
+._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
 ._1cg4fnf5:focus-within, ._le1bfnf5:hover{transition-duration:.2s}
 ._1dr21ylx:focus-within, ._1s5z1ylx:hover{transition-property:color}
 ._vp7gaqb7:focus-within, ._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
 ._1gavfnf5:hover{transition-delay:.2s}
+._d0al11mm:hover{cursor:col-resize}
 ._d0aluf7j:hover{cursor:ew-resize}
 ._1gglglyw:active{transition:none}
 ._9h8h16c2:active{color:var(--ds-link-pressed,#05c)}

package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter.js

@@ -20,6 +20,7 @@ var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _blockDraggingToIframes = require("@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes");
@@ -40,10 +41,11 @@ var containerStyles = {
   positionStart: "_1e02zeo2"
 };
 var grabAreaStyles = {
-  root: "_1bsbl52n _4t3i1osq _kqswstnw _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _syaz1j28 _bfhk1j28 _k8m01ylx _1oec1yx9 _1lww5cps _d0aluf7j _1gavfnf5 _vp7gaqb7 _30l3aqb7 _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5 _1gglglyw _9h8h16c2"
+  root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _k8m01ylx _1oec1yx9 _1lww5cps _d0aluf7j _1gavfnf5 _vp7gaqb7 _30l3aqb7 _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5 _1gglglyw _9h8h16c2",
+  fullHeightSidebar: "_d0al11mm"
 };
 var lineStyles = {
-  root: "_kqswstnw _1e0c1ule _1bsbjfq9 _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
+  root: "_kqswstnw _1e0c1ule _1bsb1l7b _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
 };
 var panelSplitterDragDataSymbol = Symbol('panel-splitter-drag-data');
 function signPanelSplitterDragData(data) {
@@ -283,7 +285,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
     ref: splitterRef,
     "data-testid": testId,
     onDoubleClick: onDoubleClick,
-    className: (0, _runtime.ax)([grabAreaStyles.root])
+    className: (0, _runtime.ax)([grabAreaStyles.root, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && grabAreaStyles.fullHeightSidebar])
   }, /*#__PURE__*/React.createElement(_visuallyHidden.default, null, /*#__PURE__*/React.createElement("input", {
     type: "range",
     value: rangeInputValue,

package/dist/cjs/ui/page-layout/side-nav/side-nav.compiled.css

@@ -16,5 +16,5 @@
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
-@media (min-width:64rem){._dm2518uv{display:initial}._dm25glyw{display:none}._p5clglyw{border-inline-end:none}._p5clzgxb{border-inline-end:1px solid var(--ds-border,#091e4224)}._qiln1gzg{grid-area:main}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
+@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._p5clglyw{border-inline-end:none}._p5clzgxb{border-inline-end:1px solid var(--ds-border,#091e4224)}._qiln1gzg{grid-area:main}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
 @supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}}

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

@@ -60,7 +60,8 @@ var styles = {
   flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
   hiddenMobileAndDesktop: "_1e0cglyw",
   hiddenMobileOnly: "_1e0cglyw _dm2518uv",
-  hiddenDesktopOnly: "_dm25glyw"
+  hiddenDesktopOnly: "_dm25glyw",
+  fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
 };
 var fallbackDefaultWidth = 320;
 
@@ -559,6 +560,7 @@ function SideNavInternal(_ref) {
     cssVar: panelSplitterResizingVar,
     panelId: _constants.sideNavPanelSplitterId
   });
+  var isFlyoutClosed = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'closed' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === undefined;
   return /*#__PURE__*/React.createElement("nav", (0, _extends2.default)({
     id: id
   }, devTimeOnlyAttributes, {
@@ -567,7 +569,7 @@ function SideNavInternal(_ref) {
     style: (0, _defineProperty2.default)({}, _constants.sideNavVar, clampedWidth),
     ref: mergedRef,
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('platform_design_system_nav4_sidenav_border') ? styles.newBorder : styles.oldBorder, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && (0, _platformFeatureFlags.fg)('platform_design_system_nav4_sidenav_border') && styles.newBorderFlyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed])
+    className: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('platform_design_system_nav4_sidenav_border') ? styles.newBorder : styles.oldBorder, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && (0, _platformFeatureFlags.fg)('platform_design_system_nav4_sidenav_border') && styles.newBorderFlyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed, isFlyoutClosed && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebar])
   }), /*#__PURE__*/React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.sideNavLiveWidthVar,
     value: "0px",

package/dist/cjs/ui/page-layout/top-nav/top-nav-end.compiled.css

@@ -6,5 +6,6 @@
 ._1e0cglyw{display:none}
 ._1ul9zwfg{min-width:2pc}
 ._4cvr1h6o{align-items:center}
+._lcxv1wug{pointer-events:auto}
 @media (min-width:48rem){._181n1txw{display:flex}._1d2y1ris{min-width:max-content}}
 @media (min-width:64rem){._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._ndwch9n0{justify-self:end}}

package/dist/cjs/ui/page-layout/top-nav/top-nav-end.js

@@ -15,6 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@compiled/react");
 var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
 var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _list = require("../../../components/list");
@@ -22,7 +23,8 @@ var _hasCustomThemeContext = require("../../top-nav-items/themed/has-custom-them
 var _migration = require("../../top-nav-items/themed/migration");
 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 containerStyles = {
-  root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15ri1mjv _1gs5usvi _ndwch9n0"
+  root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15ri1mjv _1gs5usvi _ndwch9n0",
+  fullHeightSidebar: "_lcxv1wug"
 };
 var listStyles = {
   root: "_zulp1b66 _4cvr1h6o _1e0c1txw",
@@ -68,7 +70,7 @@ function TopNavEnd(_ref) {
   }, [query]);
   return /*#__PURE__*/_react.default.createElement("nav", {
     "aria-label": label,
-    className: (0, _runtime.ax)([containerStyles.root])
+    className: (0, _runtime.ax)([containerStyles.root, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && containerStyles.fullHeightSidebar])
   }, isMobile ? /*#__PURE__*/_react.default.createElement(_popup.default, {
     isOpen: isOpen,
     onClose: function onClose() {

package/dist/cjs/ui/page-layout/top-nav/top-nav-middle.compiled.css

@@ -4,4 +4,5 @@
 ._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
+._lcxv1wug{pointer-events:auto}
 @media (min-width:48rem){._181n11p5{display:grid}._1j8b15b0{grid-template-columns:minmax(min-content,780px)}._lagd1bp4{grid-auto-flow:column}._1t4c1ris{grid-auto-columns:max-content}._12e8h9n0{justify-items:end}}

package/dist/cjs/ui/page-layout/top-nav/top-nav-middle.js

@@ -9,8 +9,10 @@ exports.TopNavMiddle = TopNavMiddle;
 require("./top-nav-middle.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var styles = {
-  root: "_zulpu2gc _yyhycs5v _1bsb1osq _4cvr1h6o _1e0c1txw _1bahh9n0 _181n11p5 _1j8b15b0 _lagd1bp4 _1t4c1ris _12e8h9n0"
+  root: "_zulpu2gc _yyhycs5v _1bsb1osq _4cvr1h6o _1e0c1txw _1bahh9n0 _181n11p5 _1j8b15b0 _lagd1bp4 _1t4c1ris _12e8h9n0",
+  fullHeightSidebar: "_lcxv1wug"
 };
 
 /**
@@ -24,6 +26,6 @@ var styles = {
 function TopNavMiddle(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)([styles.root])
+    className: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebar])
   }, children);
 }

package/dist/cjs/ui/page-layout/top-nav/top-nav-start.compiled.css

@@ -3,4 +3,7 @@
 ._yyhykb7n{grid-column:1}._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._4t3i1osq{height:100%}
-@media (min-width:64rem){._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}}
+._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
+._lcxv1wug{pointer-events:auto}
+._p12fnau3{max-width:calc(100% - var(--ds-space-200, 1pc))}
+@media (min-width:64rem){._15rin7od{min-width:unset}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}}

package/dist/cjs/ui/page-layout/top-nav/top-nav-start.js

@@ -11,9 +11,12 @@ var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _topNavStartContext = require("../../../context/top-nav-start/top-nav-start-context");
+var _useSideNavVisibility2 = require("../side-nav/use-side-nav-visibility");
 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 styles = {
-  root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15ri1mjv _1gs5usvi"
+  root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15ri1mjv _1gs5usvi",
+  fullHeightSidebar: "_p12fnau3 _bozgutpp _lcxv1wug",
+  fullHeightSidebarExpanded: "_15rin7od"
 };
 
 /**
@@ -31,9 +34,15 @@ function TopNavStart(_ref) {
       ref(elementRef.current);
     }
   }, [elementRef, ref]);
+
+  // Need to use `{ defaultCollapsed: true }` otherwise when there is no side nav mounted this never becomes false
+  var _useSideNavVisibility = (0, _useSideNavVisibility2.useSideNavVisibility)({
+      defaultCollapsed: true
+    }),
+    isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: (0, _platformFeatureFlags.fg)('platform_fix_component_state_update_for_suspense') ? elementRef : ref,
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.root])
+    className: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebar, isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebarExpanded])
   }, children);
 }

package/dist/cjs/ui/page-layout/top-nav/top-nav.compiled.css

@@ -2,14 +2,22 @@
 ._nd5l8cbt{grid-area:top-bar}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
+._179rglyw{border-block-end:none}
 ._179rzgxb{border-block-end:1px solid var(--ds-border,#091e4224)}._152t1nws{inset-block-start:var(--n_bnrM,0)}
+._1bsb1osq{width:100%}
 ._1e0c11p5{display:grid}
 ._1pbyegat{z-index:4}
 ._4cvr1h6o{align-items:center}
 ._4t3i1dgc{height:var(--n_tNvM)}
+._4t3i1osq{height:100%}
+._bfhkglyw{background-color:none}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._d6vu1bgi >span[data-ep-placeholder-id=top_navigation_skeleton]{display:contents}
 ._kqsw1if8{position:sticky}
+._lcxvglyw{pointer-events:none}
 ._vchhusvi{box-sizing:border-box}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
 ._yv0e1mfv{grid-template-columns:auto 1fr auto}
-@media (min-width:48rem){._1j8b18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}
+@media (min-width:48rem){._1j8b18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}
+@media (min-width:64rem){._1rqt15p1{grid-template-columns:var(--n_sNvlw,1fr) minmax(min-content,max-content) 1fr}._hyzqcs5v{z-index:2}._pdlmutpp{gap:var(--ds-space-150,9pt)}}

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

@@ -1,6 +1,7 @@
 /* top-nav.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -10,6 +11,8 @@ require("./top-nav.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _skipLinksContext = require("../../../context/skip-links/skip-links-context");
 var _hasCustomThemeContext = require("../../top-nav-items/themed/has-custom-theme-context");
 var _useCustomTheme = require("../../top-nav-items/themed/use-custom-theme");
@@ -17,9 +20,31 @@ var _constants = require("../constants");
 var _hoistSlotSizesContext = require("../hoist-slot-sizes-context");
 var _hoistUtils = require("../hoist-utils");
 var _idUtils = require("../id-utils");
+var _useSideNavVisibility2 = require("../side-nav/use-side-nav-visibility");
+var _excluded = ["backgroundColor"];
 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); }
+/**
+ * Styles for the container for the top nav items.
+ *
+ * The background and border are applied to a different element for z-indexing reasons:
+ *
+ * - The items sit above the expanded side nav
+ * - The background sits below the expanded side nav
+ */
 var styles = {
-  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179rzgxb _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax"
+  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179rzgxb _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
+  fullHeightSidebar: "_179rglyw _bozgze3t _y4tiutpp _bfhkglyw _lcxvglyw _pdlmutpp",
+  fullHeightSidebarExpanded: "_1rqt15p1"
+};
+
+/**
+ * Styles for the visible 'bar' of the top nav, including background and border.
+ *
+ * This is on a lower z-index than the expanded side nav, and is separate to the top nav items which are above the expanded side nav.
+ */
+var backgroundStyles = {
+  root: "_nd5l8cbt _179rzgxb _1bsb1osq _4t3i1osq _bfhkvuon _vchhusvi _152t1nws _kqsw1if8 _lcxvglyw _1pbyegat",
+  sideNavExpanded: "_hyzqcs5v"
 };
 
 /**
@@ -41,16 +66,52 @@ function TopNav(_ref) {
   });
   (0, _skipLinksContext.useSkipLink)(id, skipLinkLabel);
   var customTheme = (0, _useCustomTheme.useCustomTheme)(UNSAFE_theme);
+
+  /**
+   * With the full height sidebar we have a foreground and background element,
+   * so we need to apply the custom theme styles to the correct element.
+   *
+   * The foreground element should not have a background color,
+   * and the background element doesn't need any of the other styles.
+   */
+  var _useMemo = (0, _react.useMemo)(function () {
+      if (!customTheme.isEnabled) {
+        return {
+          backgroundStyle: undefined,
+          foregroundStyle: undefined
+        };
+      }
+      var _customTheme$style = customTheme.style,
+        backgroundColor = _customTheme$style.backgroundColor,
+        foregroundStyle = (0, _objectWithoutProperties2.default)(_customTheme$style, _excluded);
+      return {
+        backgroundStyle: {
+          backgroundColor: backgroundColor
+        },
+        foregroundStyle: foregroundStyle
+      };
+    }, [customTheme]),
+    backgroundStyle = _useMemo.backgroundStyle,
+    foregroundStyle = _useMemo.foregroundStyle;
+  var _useSideNavVisibility = (0, _useSideNavVisibility2.useSideNavVisibility)(),
+    isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
   return /*#__PURE__*/React.createElement(_hasCustomThemeContext.HasCustomThemeContext.Provider, {
     value: customTheme.isEnabled
-  }, /*#__PURE__*/React.createElement("header", {
+  }, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/React.createElement("div", {
+    "data-layout-slot": true,
+    "aria-hidden": true
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') ? backgroundStyle : undefined,
+    className: (0, _runtime.ax)([backgroundStyles.root, isExpandedOnDesktop && backgroundStyles.sideNavExpanded])
+  }), /*#__PURE__*/React.createElement("header", {
     id: id,
     "data-layout-slot": true,
-    className: (0, _runtime.ax)([styles.root, xcss]),
+    className: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebar, isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebarExpanded, xcss]),
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
-    style: customTheme.isEnabled ? customTheme.style : undefined
+    style: (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') ? foregroundStyle : customTheme.isEnabled ? customTheme.style : undefined
   }, /*#__PURE__*/React.createElement(_hoistUtils.HoistCssVarToLocalGrid, {
     variableName: _constants.topNavMountedVar,
     value: height

package/dist/cjs/ui/top-nav-items/search.compiled.css

@@ -13,6 +13,7 @@
 ._80om1kdv{cursor:text}
 ._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
 ._p12f1kvu{max-width:680px}
+._p12fktbq{max-width:780px}
 ._vchhusvi{box-sizing:border-box}
 ._yv0e1mfv{grid-template-columns:auto 1fr auto}
 ._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}

package/dist/cjs/ui/top-nav-items/search.js

@@ -10,7 +10,9 @@ exports.Search = void 0;
 require("./search.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
+var _css = require("@atlaskit/css");
 var _search = _interopRequireDefault(require("@atlaskit/icon/core/search"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _migration = require("./themed/migration");
 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); }
@@ -18,7 +20,8 @@ var styles = {
   root: "_2rko12b0 _1rjcze3t _18zr12x7 _yv0e1mfv _4cvr1h6o _bfhk1j9a _vchhusvi _80om1kdv _1e0cglyw _4t3izwfg _p12f1kvu _1bsb1osq _irr31d5g _1di6r01l _114b11p5",
   buttonText: "_yyhyjvu9 _1ii7kb7n",
   iconBefore: "_yyhykb7n _1ii7kb7n _1e0c1txw",
-  elemAfter: "_yyhy11wp _1ii7kb7n _1e0c1txw"
+  elemAfter: "_yyhy11wp _1ii7kb7n _1e0c1txw",
+  fullHeightSidebar: "_p12fktbq"
 };
 
 /**
@@ -43,7 +46,7 @@ var Search = exports.Search = function Search(_ref) {
       border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-input, #8590A2)")
     },
     onClick: onClick,
-    xcss: styles.root,
+    xcss: (0, _css.cx)(styles.root, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebar),
     interactionName: interactionName,
     "aria-haspopup": ariaHaspopup
   }, /*#__PURE__*/_react.default.createElement("span", {

package/dist/es2019/ui/page-layout/panel-splitter/panel-splitter.compiled.css

@@ -1,8 +1,7 @@
 ._12ji1r31{outline-color:currentColor}
 ._12y31o36{outline-width:medium}
 ._152tidpf{inset-block-start:0}
-._19bvze3t{padding-left:var(--ds-space-0,0)}
-._1bsbjfq9{width:var(--ds-border-width-indicator,3px)}
+._1bsb1l7b{width:3px}
 ._1bsbl52n{width:17px}
 ._1e021v6z{inset-inline-start:7px}
 ._1e02zeo2{inset-inline-start:-9px}
@@ -11,23 +10,25 @@
 ._1lww5cps{transition-delay:0ms}
 ._1oec1yx9{transition-duration:.1s}
 ._1pbykb7n{z-index:1}
+._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
 ._1qu2glyw{outline-style:none}
 ._4t3i1osq{height:100%}
+._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
 ._bfhk1j28{background-color:transparent}
 ._bfhk1r31{background-color:currentColor}
-._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._k8m01ylx{transition-property:color}
 ._kqswstnw{position:absolute}
-._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._rjxpftgi{inset-inline-end:8px}
 ._syaz1j28{color:transparent}
 ._syaz1kw7{color:inherit}
-._u5f3ze3t{padding-right:var(--ds-space-0,0)}
 ._u7coidpf{inset-block-end:0}
+._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
 ._1cg4fnf5:focus-within, ._le1bfnf5:hover{transition-duration:.2s}
 ._1dr21ylx:focus-within, ._1s5z1ylx:hover{transition-property:color}
 ._vp7gaqb7:focus-within, ._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
 ._1gavfnf5:hover{transition-delay:.2s}
+._d0al11mm:hover{cursor:col-resize}
 ._d0aluf7j:hover{cursor:ew-resize}
 ._1gglglyw:active{transition:none}
 ._9h8h16c2:active{color:var(--ds-link-pressed,#05c)}

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

@@ -9,6 +9,7 @@ import invariant from 'tiny-invariant';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { blockDraggingToIFrames } from '@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes';
@@ -26,10 +27,11 @@ const containerStyles = {
   positionStart: "_1e02zeo2"
 };
 const grabAreaStyles = {
-  root: "_1bsbl52n _4t3i1osq _kqswstnw _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _syaz1j28 _bfhk1j28 _k8m01ylx _1oec1yx9 _1lww5cps _d0aluf7j _1gavfnf5 _vp7gaqb7 _30l3aqb7 _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5 _1gglglyw _9h8h16c2"
+  root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _k8m01ylx _1oec1yx9 _1lww5cps _d0aluf7j _1gavfnf5 _vp7gaqb7 _30l3aqb7 _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5 _1gglglyw _9h8h16c2",
+  fullHeightSidebar: "_d0al11mm"
 };
 const lineStyles = {
-  root: "_kqswstnw _1e0c1ule _1bsbjfq9 _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
+  root: "_kqswstnw _1e0c1ule _1bsb1l7b _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
 };
 const panelSplitterDragDataSymbol = Symbol('panel-splitter-drag-data');
 function signPanelSplitterDragData(data) {
@@ -261,7 +263,7 @@ const PortaledPanelSplitter = ({
     ref: splitterRef,
     "data-testid": testId,
     onDoubleClick: onDoubleClick,
-    className: ax([grabAreaStyles.root])
+    className: ax([grabAreaStyles.root, fg('navx-full-height-sidebar') && grabAreaStyles.fullHeightSidebar])
   }, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", {
     type: "range",
     value: rangeInputValue,

package/dist/es2019/ui/page-layout/side-nav/side-nav.compiled.css

@@ -16,5 +16,5 @@
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
-@media (min-width:64rem){._dm2518uv{display:initial}._dm25glyw{display:none}._p5clglyw{border-inline-end:none}._p5clzgxb{border-inline-end:1px solid var(--ds-border,#091e4224)}._qiln1gzg{grid-area:main}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
+@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._p5clglyw{border-inline-end:none}._p5clzgxb{border-inline-end:1px solid var(--ds-border,#091e4224)}._qiln1gzg{grid-area:main}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
 @supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}}

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

@@ -13,7 +13,7 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/ad
 import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../../context/skip-links/skip-links-context';
 import { TopNavStartElement } from '../../../context/top-nav-start/top-nav-start-context';
-import { contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar, UNSAFE_sideNavLayoutVar } from '../constants';
+import { bannerMountedVar, contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar, topNavMountedVar, UNSAFE_sideNavLayoutVar } from '../constants';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
 import { DangerouslyHoistCssVarToDocumentRoot } from '../hoist-utils';
 import { useLayoutId } from '../id-utils';
@@ -47,7 +47,8 @@ const styles = {
   flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
   hiddenMobileAndDesktop: "_1e0cglyw",
   hiddenMobileOnly: "_1e0cglyw _dm2518uv",
-  hiddenDesktopOnly: "_dm25glyw"
+  hiddenDesktopOnly: "_dm25glyw",
+  fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
 };
 const fallbackDefaultWidth = 320;
 
@@ -548,6 +549,7 @@ function SideNavInternal({
     cssVar: panelSplitterResizingVar,
     panelId: sideNavPanelSplitterId
   });
+  const isFlyoutClosed = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'closed' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === undefined;
   return /*#__PURE__*/React.createElement("nav", _extends({
     id: id
   }, devTimeOnlyAttributes, {
@@ -559,7 +561,7 @@ function SideNavInternal({
     },
     ref: mergedRef,
     "data-testid": testId,
-    className: ax([styles.root, fg('platform_design_system_nav4_sidenav_border') ? styles.newBorder : styles.oldBorder, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && fg('platform_design_system_nav4_sidenav_border') && styles.newBorderFlyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed])
+    className: ax([styles.root, fg('platform_design_system_nav4_sidenav_border') ? styles.newBorder : styles.oldBorder, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && fg('platform_design_system_nav4_sidenav_border') && styles.newBorderFlyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed, isFlyoutClosed && fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
   }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",

package/dist/es2019/ui/page-layout/top-nav/top-nav-end.compiled.css

@@ -6,5 +6,6 @@
 ._1e0cglyw{display:none}
 ._1ul9zwfg{min-width:2pc}
 ._4cvr1h6o{align-items:center}
+._lcxv1wug{pointer-events:auto}
 @media (min-width:48rem){._181n1txw{display:flex}._1d2y1ris{min-width:max-content}}
 @media (min-width:64rem){._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._ndwch9n0{justify-self:end}}

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

@@ -6,13 +6,15 @@ import React, { useState } from 'react';
 import { cx } from '@compiled/react';
 import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
 import { List } from '../../../components/list';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
 import { IconButton } from '../../top-nav-items/themed/migration';
 const containerStyles = {
-  root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15ri1mjv _1gs5usvi _ndwch9n0"
+  root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15ri1mjv _1gs5usvi _ndwch9n0",
+  fullHeightSidebar: "_lcxv1wug"
 };
 const listStyles = {
   root: "_zulp1b66 _4cvr1h6o _1e0c1txw",
@@ -51,7 +53,7 @@ export function TopNavEnd({
   }, [query]);
   return /*#__PURE__*/React.createElement("nav", {
     "aria-label": label,
-    className: ax([containerStyles.root])
+    className: ax([containerStyles.root, fg('navx-full-height-sidebar') && containerStyles.fullHeightSidebar])
   }, isMobile ? /*#__PURE__*/React.createElement(Popup, {
     isOpen: isOpen,
     onClose: () => setIsOpen(false),

package/dist/es2019/ui/page-layout/top-nav/top-nav-middle.compiled.css

@@ -4,4 +4,5 @@
 ._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
+._lcxv1wug{pointer-events:auto}
 @media (min-width:48rem){._181n11p5{display:grid}._1j8b15b0{grid-template-columns:minmax(min-content,780px)}._lagd1bp4{grid-auto-flow:column}._1t4c1ris{grid-auto-columns:max-content}._12e8h9n0{justify-items:end}}

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

@@ -2,8 +2,10 @@
 import "./top-nav-middle.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 const styles = {
-  root: "_zulpu2gc _yyhycs5v _1bsb1osq _4cvr1h6o _1e0c1txw _1bahh9n0 _181n11p5 _1j8b15b0 _lagd1bp4 _1t4c1ris _12e8h9n0"
+  root: "_zulpu2gc _yyhycs5v _1bsb1osq _4cvr1h6o _1e0c1txw _1bahh9n0 _181n11p5 _1j8b15b0 _lagd1bp4 _1t4c1ris _12e8h9n0",
+  fullHeightSidebar: "_lcxv1wug"
 };
 
 /**
@@ -18,6 +20,6 @@ export function TopNavMiddle({
   children
 }) {
   return /*#__PURE__*/React.createElement("div", {
-    className: ax([styles.root])
+    className: ax([styles.root, fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
   }, children);
 }

package/dist/es2019/ui/page-layout/top-nav/top-nav-start.compiled.css

@@ -3,4 +3,7 @@
 ._yyhykb7n{grid-column:1}._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._4t3i1osq{height:100%}
-@media (min-width:64rem){._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}}
+._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
+._lcxv1wug{pointer-events:auto}
+._p12fnau3{max-width:calc(100% - var(--ds-space-200, 1pc))}
+@media (min-width:64rem){._15rin7od{min-width:unset}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}}

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

@@ -4,8 +4,11 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useContext, useEffect, useRef } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-context';
+import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 const styles = {
-  root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15ri1mjv _1gs5usvi"
+  root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15ri1mjv _1gs5usvi",
+  fullHeightSidebar: "_p12fnau3 _bozgutpp _lcxv1wug",
+  fullHeightSidebarExpanded: "_15rin7od"
 };
 
 /**
@@ -24,9 +27,16 @@ export function TopNavStart({
       ref(elementRef.current);
     }
   }, [elementRef, ref]);
+
+  // Need to use `{ defaultCollapsed: true }` otherwise when there is no side nav mounted this never becomes false
+  const {
+    isExpandedOnDesktop
+  } = useSideNavVisibility({
+    defaultCollapsed: true
+  });
   return /*#__PURE__*/React.createElement("div", {
     ref: fg('platform_fix_component_state_update_for_suspense') ? elementRef : ref,
     "data-testid": testId,
-    className: ax([styles.root])
+    className: ax([styles.root, fg('navx-full-height-sidebar') && styles.fullHeightSidebar, isExpandedOnDesktop && fg('navx-full-height-sidebar') && styles.fullHeightSidebarExpanded])
   }, children);
 }

package/dist/es2019/ui/page-layout/top-nav/top-nav.compiled.css

@@ -2,14 +2,22 @@
 ._nd5l8cbt{grid-area:top-bar}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
+._179rglyw{border-block-end:none}
 ._179rzgxb{border-block-end:1px solid var(--ds-border,#091e4224)}._152t1nws{inset-block-start:var(--n_bnrM,0)}
+._1bsb1osq{width:100%}
 ._1e0c11p5{display:grid}
 ._1pbyegat{z-index:4}
 ._4cvr1h6o{align-items:center}
 ._4t3i1dgc{height:var(--n_tNvM)}
+._4t3i1osq{height:100%}
+._bfhkglyw{background-color:none}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._d6vu1bgi >span[data-ep-placeholder-id=top_navigation_skeleton]{display:contents}
 ._kqsw1if8{position:sticky}
+._lcxvglyw{pointer-events:none}
 ._vchhusvi{box-sizing:border-box}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
 ._yv0e1mfv{grid-template-columns:auto 1fr auto}
-@media (min-width:48rem){._1j8b18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}
+@media (min-width:48rem){._1j8b18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}
+@media (min-width:64rem){._1rqt15p1{grid-template-columns:var(--n_sNvlw,1fr) minmax(min-content,max-content) 1fr}._hyzqcs5v{z-index:2}._pdlmutpp{gap:var(--ds-space-150,9pt)}}

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

@@ -2,7 +2,8 @@
 import "./top-nav.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useSkipLink } from '../../../context/skip-links/skip-links-context';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
 import { useCustomTheme } from '../../top-nav-items/themed/use-custom-theme';
@@ -10,8 +11,29 @@ import { bannerMountedVar, localSlotLayers, topNavMountedVar, UNSAFE_topNavVar }
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
 import { DangerouslyHoistCssVarToDocumentRoot, HoistCssVarToLocalGrid } from '../hoist-utils';
 import { useLayoutId } from '../id-utils';
+import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
+/**
+ * Styles for the container for the top nav items.
+ *
+ * The background and border are applied to a different element for z-indexing reasons:
+ *
+ * - The items sit above the expanded side nav
+ * - The background sits below the expanded side nav
+ */
 const styles = {
-  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179rzgxb _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax"
+  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179rzgxb _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
+  fullHeightSidebar: "_179rglyw _bozgze3t _y4tiutpp _bfhkglyw _lcxvglyw _pdlmutpp",
+  fullHeightSidebarExpanded: "_1rqt15p1"
+};
+
+/**
+ * Styles for the visible 'bar' of the top nav, including background and border.
+ *
+ * This is on a lower z-index than the expanded side nav, and is separate to the top nav items which are above the expanded side nav.
+ */
+const backgroundStyles = {
+  root: "_nd5l8cbt _179rzgxb _1bsb1osq _4t3i1osq _bfhkvuon _vchhusvi _152t1nws _kqsw1if8 _lcxvglyw _1pbyegat",
+  sideNavExpanded: "_hyzqcs5v"
 };
 
 /**
@@ -32,16 +54,55 @@ export function TopNav({
   });
   useSkipLink(id, skipLinkLabel);
   const customTheme = useCustomTheme(UNSAFE_theme);
+
+  /**
+   * With the full height sidebar we have a foreground and background element,
+   * so we need to apply the custom theme styles to the correct element.
+   *
+   * The foreground element should not have a background color,
+   * and the background element doesn't need any of the other styles.
+   */
+  const {
+    backgroundStyle,
+    foregroundStyle
+  } = useMemo(() => {
+    if (!customTheme.isEnabled) {
+      return {
+        backgroundStyle: undefined,
+        foregroundStyle: undefined
+      };
+    }
+    const {
+      backgroundColor,
+      ...foregroundStyle
+    } = customTheme.style;
+    return {
+      backgroundStyle: {
+        backgroundColor
+      },
+      foregroundStyle
+    };
+  }, [customTheme]);
+  const {
+    isExpandedOnDesktop
+  } = useSideNavVisibility();
   return /*#__PURE__*/React.createElement(HasCustomThemeContext.Provider, {
     value: customTheme.isEnabled
-  }, /*#__PURE__*/React.createElement("header", {
+  }, fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement("div", {
+    "data-layout-slot": true,
+    "aria-hidden": true
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: fg('navx-full-height-sidebar') ? backgroundStyle : undefined,
+    className: ax([backgroundStyles.root, isExpandedOnDesktop && backgroundStyles.sideNavExpanded])
+  }), /*#__PURE__*/React.createElement("header", {
     id: id,
     "data-layout-slot": true,
-    className: ax([styles.root, xcss]),
+    className: ax([styles.root, fg('navx-full-height-sidebar') && styles.fullHeightSidebar, isExpandedOnDesktop && fg('navx-full-height-sidebar') && styles.fullHeightSidebarExpanded, xcss]),
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
-    style: customTheme.isEnabled ? customTheme.style : undefined
+    style: fg('navx-full-height-sidebar') ? foregroundStyle : customTheme.isEnabled ? customTheme.style : undefined
   }, /*#__PURE__*/React.createElement(HoistCssVarToLocalGrid, {
     variableName: topNavMountedVar,
     value: height

package/dist/es2019/ui/top-nav-items/search.compiled.css

@@ -13,6 +13,7 @@
 ._80om1kdv{cursor:text}
 ._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
 ._p12f1kvu{max-width:680px}
+._p12fktbq{max-width:780px}
 ._vchhusvi{box-sizing:border-box}
 ._yv0e1mfv{grid-template-columns:auto 1fr auto}
 ._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}

package/dist/es2019/ui/top-nav-items/search.js

@@ -2,14 +2,17 @@
 import "./search.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { Fragment } from 'react';
+import { cx } from '@atlaskit/css';
 import SearchIcon from '@atlaskit/icon/core/search';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Pressable, Show, Text } from '@atlaskit/primitives/compiled';
 import { IconButton } from './themed/migration';
 const styles = {
   root: "_2rko12b0 _1rjcze3t _18zr12x7 _yv0e1mfv _4cvr1h6o _bfhk1j9a _vchhusvi _80om1kdv _1e0cglyw _4t3izwfg _p12f1kvu _1bsb1osq _irr31d5g _1di6r01l _114b11p5",
   buttonText: "_yyhyjvu9 _1ii7kb7n",
   iconBefore: "_yyhykb7n _1ii7kb7n _1e0c1txw",
-  elemAfter: "_yyhy11wp _1ii7kb7n _1e0c1txw"
+  elemAfter: "_yyhy11wp _1ii7kb7n _1e0c1txw",
+  fullHeightSidebar: "_p12fktbq"
 };
 
 /**
@@ -33,7 +36,7 @@ export const Search = ({
     border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border-input, #8590A2)"}`
   },
   onClick: onClick,
-  xcss: styles.root,
+  xcss: cx(styles.root, fg('navx-full-height-sidebar') && styles.fullHeightSidebar),
   interactionName: interactionName,
   "aria-haspopup": ariaHaspopup
 }, /*#__PURE__*/React.createElement("span", {

package/dist/esm/ui/page-layout/panel-splitter/panel-splitter.compiled.css

@@ -1,8 +1,7 @@
 ._12ji1r31{outline-color:currentColor}
 ._12y31o36{outline-width:medium}
 ._152tidpf{inset-block-start:0}
-._19bvze3t{padding-left:var(--ds-space-0,0)}
-._1bsbjfq9{width:var(--ds-border-width-indicator,3px)}
+._1bsb1l7b{width:3px}
 ._1bsbl52n{width:17px}
 ._1e021v6z{inset-inline-start:7px}
 ._1e02zeo2{inset-inline-start:-9px}
@@ -11,23 +10,25 @@
 ._1lww5cps{transition-delay:0ms}
 ._1oec1yx9{transition-duration:.1s}
 ._1pbykb7n{z-index:1}
+._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
 ._1qu2glyw{outline-style:none}
 ._4t3i1osq{height:100%}
+._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
 ._bfhk1j28{background-color:transparent}
 ._bfhk1r31{background-color:currentColor}
-._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._k8m01ylx{transition-property:color}
 ._kqswstnw{position:absolute}
-._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._rjxpftgi{inset-inline-end:8px}
 ._syaz1j28{color:transparent}
 ._syaz1kw7{color:inherit}
-._u5f3ze3t{padding-right:var(--ds-space-0,0)}
 ._u7coidpf{inset-block-end:0}
+._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
 ._1cg4fnf5:focus-within, ._le1bfnf5:hover{transition-duration:.2s}
 ._1dr21ylx:focus-within, ._1s5z1ylx:hover{transition-property:color}
 ._vp7gaqb7:focus-within, ._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
 ._1gavfnf5:hover{transition-delay:.2s}
+._d0al11mm:hover{cursor:col-resize}
 ._d0aluf7j:hover{cursor:ew-resize}
 ._1gglglyw:active{transition:none}
 ._9h8h16c2:active{color:var(--ds-link-pressed,#05c)}

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

@@ -13,6 +13,7 @@ import invariant from 'tiny-invariant';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { blockDraggingToIFrames } from '@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes';
@@ -30,10 +31,11 @@ var containerStyles = {
   positionStart: "_1e02zeo2"
 };
 var grabAreaStyles = {
-  root: "_1bsbl52n _4t3i1osq _kqswstnw _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _syaz1j28 _bfhk1j28 _k8m01ylx _1oec1yx9 _1lww5cps _d0aluf7j _1gavfnf5 _vp7gaqb7 _30l3aqb7 _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5 _1gglglyw _9h8h16c2"
+  root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _k8m01ylx _1oec1yx9 _1lww5cps _d0aluf7j _1gavfnf5 _vp7gaqb7 _30l3aqb7 _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5 _1gglglyw _9h8h16c2",
+  fullHeightSidebar: "_d0al11mm"
 };
 var lineStyles = {
-  root: "_kqswstnw _1e0c1ule _1bsbjfq9 _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
+  root: "_kqswstnw _1e0c1ule _1bsb1l7b _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
 };
 var panelSplitterDragDataSymbol = Symbol('panel-splitter-drag-data');
 function signPanelSplitterDragData(data) {
@@ -273,7 +275,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
     ref: splitterRef,
     "data-testid": testId,
     onDoubleClick: onDoubleClick,
-    className: ax([grabAreaStyles.root])
+    className: ax([grabAreaStyles.root, fg('navx-full-height-sidebar') && grabAreaStyles.fullHeightSidebar])
   }, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", {
     type: "range",
     value: rangeInputValue,

package/dist/esm/ui/page-layout/side-nav/side-nav.compiled.css

@@ -16,5 +16,5 @@
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
-@media (min-width:64rem){._dm2518uv{display:initial}._dm25glyw{display:none}._p5clglyw{border-inline-end:none}._p5clzgxb{border-inline-end:1px solid var(--ds-border,#091e4224)}._qiln1gzg{grid-area:main}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
+@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._p5clglyw{border-inline-end:none}._p5clzgxb{border-inline-end:1px solid var(--ds-border,#091e4224)}._qiln1gzg{grid-area:main}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
 @supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}}

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

@@ -17,7 +17,7 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/ad
 import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../../context/skip-links/skip-links-context';
 import { TopNavStartElement } from '../../../context/top-nav-start/top-nav-start-context';
-import { contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar, UNSAFE_sideNavLayoutVar } from '../constants';
+import { bannerMountedVar, contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar, topNavMountedVar, UNSAFE_sideNavLayoutVar } from '../constants';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
 import { DangerouslyHoistCssVarToDocumentRoot } from '../hoist-utils';
 import { useLayoutId } from '../id-utils';
@@ -51,7 +51,8 @@ var styles = {
   flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
   hiddenMobileAndDesktop: "_1e0cglyw",
   hiddenMobileOnly: "_1e0cglyw _dm2518uv",
-  hiddenDesktopOnly: "_dm25glyw"
+  hiddenDesktopOnly: "_dm25glyw",
+  fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
 };
 var fallbackDefaultWidth = 320;
 
@@ -550,6 +551,7 @@ function SideNavInternal(_ref) {
     cssVar: panelSplitterResizingVar,
     panelId: sideNavPanelSplitterId
   });
+  var isFlyoutClosed = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'closed' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === undefined;
   return /*#__PURE__*/React.createElement("nav", _extends({
     id: id
   }, devTimeOnlyAttributes, {
@@ -558,7 +560,7 @@ function SideNavInternal(_ref) {
     style: _defineProperty({}, sideNavVar, clampedWidth),
     ref: mergedRef,
     "data-testid": testId,
-    className: ax([styles.root, fg('platform_design_system_nav4_sidenav_border') ? styles.newBorder : styles.oldBorder, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && fg('platform_design_system_nav4_sidenav_border') && styles.newBorderFlyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed])
+    className: ax([styles.root, fg('platform_design_system_nav4_sidenav_border') ? styles.newBorder : styles.oldBorder, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && fg('platform_design_system_nav4_sidenav_border') && styles.newBorderFlyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed, isFlyoutClosed && fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
   }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",

package/dist/esm/ui/page-layout/top-nav/top-nav-end.compiled.css

@@ -6,5 +6,6 @@
 ._1e0cglyw{display:none}
 ._1ul9zwfg{min-width:2pc}
 ._4cvr1h6o{align-items:center}
+._lcxv1wug{pointer-events:auto}
 @media (min-width:48rem){._181n1txw{display:flex}._1d2y1ris{min-width:max-content}}
 @media (min-width:64rem){._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._ndwch9n0{justify-self:end}}

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

@@ -7,13 +7,15 @@ import React, { useState } from 'react';
 import { cx } from '@compiled/react';
 import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
 import { List } from '../../../components/list';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
 import { IconButton } from '../../top-nav-items/themed/migration';
 var containerStyles = {
-  root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15ri1mjv _1gs5usvi _ndwch9n0"
+  root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15ri1mjv _1gs5usvi _ndwch9n0",
+  fullHeightSidebar: "_lcxv1wug"
 };
 var listStyles = {
   root: "_zulp1b66 _4cvr1h6o _1e0c1txw",
@@ -59,7 +61,7 @@ export function TopNavEnd(_ref) {
   }, [query]);
   return /*#__PURE__*/React.createElement("nav", {
     "aria-label": label,
-    className: ax([containerStyles.root])
+    className: ax([containerStyles.root, fg('navx-full-height-sidebar') && containerStyles.fullHeightSidebar])
   }, isMobile ? /*#__PURE__*/React.createElement(Popup, {
     isOpen: isOpen,
     onClose: function onClose() {

package/dist/esm/ui/page-layout/top-nav/top-nav-middle.compiled.css

@@ -4,4 +4,5 @@
 ._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
+._lcxv1wug{pointer-events:auto}
 @media (min-width:48rem){._181n11p5{display:grid}._1j8b15b0{grid-template-columns:minmax(min-content,780px)}._lagd1bp4{grid-auto-flow:column}._1t4c1ris{grid-auto-columns:max-content}._12e8h9n0{justify-items:end}}

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

@@ -2,8 +2,10 @@
 import "./top-nav-middle.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 var styles = {
-  root: "_zulpu2gc _yyhycs5v _1bsb1osq _4cvr1h6o _1e0c1txw _1bahh9n0 _181n11p5 _1j8b15b0 _lagd1bp4 _1t4c1ris _12e8h9n0"
+  root: "_zulpu2gc _yyhycs5v _1bsb1osq _4cvr1h6o _1e0c1txw _1bahh9n0 _181n11p5 _1j8b15b0 _lagd1bp4 _1t4c1ris _12e8h9n0",
+  fullHeightSidebar: "_lcxv1wug"
 };
 
 /**
@@ -17,6 +19,6 @@ var styles = {
 export function TopNavMiddle(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: ax([styles.root])
+    className: ax([styles.root, fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
   }, children);
 }

package/dist/esm/ui/page-layout/top-nav/top-nav-start.compiled.css

@@ -3,4 +3,7 @@
 ._yyhykb7n{grid-column:1}._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._4t3i1osq{height:100%}
-@media (min-width:64rem){._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}}
+._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
+._lcxv1wug{pointer-events:auto}
+._p12fnau3{max-width:calc(100% - var(--ds-space-200, 1pc))}
+@media (min-width:64rem){._15rin7od{min-width:unset}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}}

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

@@ -4,8 +4,11 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useContext, useEffect, useRef } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-context';
+import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 var styles = {
-  root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15ri1mjv _1gs5usvi"
+  root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15ri1mjv _1gs5usvi",
+  fullHeightSidebar: "_p12fnau3 _bozgutpp _lcxv1wug",
+  fullHeightSidebarExpanded: "_15rin7od"
 };
 
 /**
@@ -23,9 +26,15 @@ export function TopNavStart(_ref) {
       ref(elementRef.current);
     }
   }, [elementRef, ref]);
+
+  // Need to use `{ defaultCollapsed: true }` otherwise when there is no side nav mounted this never becomes false
+  var _useSideNavVisibility = useSideNavVisibility({
+      defaultCollapsed: true
+    }),
+    isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
   return /*#__PURE__*/React.createElement("div", {
     ref: fg('platform_fix_component_state_update_for_suspense') ? elementRef : ref,
     "data-testid": testId,
-    className: ax([styles.root])
+    className: ax([styles.root, fg('navx-full-height-sidebar') && styles.fullHeightSidebar, isExpandedOnDesktop && fg('navx-full-height-sidebar') && styles.fullHeightSidebarExpanded])
   }, children);
 }

package/dist/esm/ui/page-layout/top-nav/top-nav.compiled.css

@@ -2,14 +2,22 @@
 ._nd5l8cbt{grid-area:top-bar}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
+._179rglyw{border-block-end:none}
 ._179rzgxb{border-block-end:1px solid var(--ds-border,#091e4224)}._152t1nws{inset-block-start:var(--n_bnrM,0)}
+._1bsb1osq{width:100%}
 ._1e0c11p5{display:grid}
 ._1pbyegat{z-index:4}
 ._4cvr1h6o{align-items:center}
 ._4t3i1dgc{height:var(--n_tNvM)}
+._4t3i1osq{height:100%}
+._bfhkglyw{background-color:none}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._d6vu1bgi >span[data-ep-placeholder-id=top_navigation_skeleton]{display:contents}
 ._kqsw1if8{position:sticky}
+._lcxvglyw{pointer-events:none}
 ._vchhusvi{box-sizing:border-box}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
 ._yv0e1mfv{grid-template-columns:auto 1fr auto}
-@media (min-width:48rem){._1j8b18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}
+@media (min-width:48rem){._1j8b18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}
+@media (min-width:64rem){._1rqt15p1{grid-template-columns:var(--n_sNvlw,1fr) minmax(min-content,max-content) 1fr}._hyzqcs5v{z-index:2}._pdlmutpp{gap:var(--ds-space-150,9pt)}}

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

@@ -1,8 +1,11 @@
 /* top-nav.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["backgroundColor"];
 import "./top-nav.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useSkipLink } from '../../../context/skip-links/skip-links-context';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
 import { useCustomTheme } from '../../top-nav-items/themed/use-custom-theme';
@@ -10,8 +13,29 @@ import { bannerMountedVar, localSlotLayers, topNavMountedVar, UNSAFE_topNavVar }
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
 import { DangerouslyHoistCssVarToDocumentRoot, HoistCssVarToLocalGrid } from '../hoist-utils';
 import { useLayoutId } from '../id-utils';
+import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
+/**
+ * Styles for the container for the top nav items.
+ *
+ * The background and border are applied to a different element for z-indexing reasons:
+ *
+ * - The items sit above the expanded side nav
+ * - The background sits below the expanded side nav
+ */
 var styles = {
-  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179rzgxb _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax"
+  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179rzgxb _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
+  fullHeightSidebar: "_179rglyw _bozgze3t _y4tiutpp _bfhkglyw _lcxvglyw _pdlmutpp",
+  fullHeightSidebarExpanded: "_1rqt15p1"
+};
+
+/**
+ * Styles for the visible 'bar' of the top nav, including background and border.
+ *
+ * This is on a lower z-index than the expanded side nav, and is separate to the top nav items which are above the expanded side nav.
+ */
+var backgroundStyles = {
+  root: "_nd5l8cbt _179rzgxb _1bsb1osq _4t3i1osq _bfhkvuon _vchhusvi _152t1nws _kqsw1if8 _lcxvglyw _1pbyegat",
+  sideNavExpanded: "_hyzqcs5v"
 };
 
 /**
@@ -33,16 +57,52 @@ export function TopNav(_ref) {
   });
   useSkipLink(id, skipLinkLabel);
   var customTheme = useCustomTheme(UNSAFE_theme);
+
+  /**
+   * With the full height sidebar we have a foreground and background element,
+   * so we need to apply the custom theme styles to the correct element.
+   *
+   * The foreground element should not have a background color,
+   * and the background element doesn't need any of the other styles.
+   */
+  var _useMemo = useMemo(function () {
+      if (!customTheme.isEnabled) {
+        return {
+          backgroundStyle: undefined,
+          foregroundStyle: undefined
+        };
+      }
+      var _customTheme$style = customTheme.style,
+        backgroundColor = _customTheme$style.backgroundColor,
+        foregroundStyle = _objectWithoutProperties(_customTheme$style, _excluded);
+      return {
+        backgroundStyle: {
+          backgroundColor: backgroundColor
+        },
+        foregroundStyle: foregroundStyle
+      };
+    }, [customTheme]),
+    backgroundStyle = _useMemo.backgroundStyle,
+    foregroundStyle = _useMemo.foregroundStyle;
+  var _useSideNavVisibility = useSideNavVisibility(),
+    isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
   return /*#__PURE__*/React.createElement(HasCustomThemeContext.Provider, {
     value: customTheme.isEnabled
-  }, /*#__PURE__*/React.createElement("header", {
+  }, fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement("div", {
+    "data-layout-slot": true,
+    "aria-hidden": true
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: fg('navx-full-height-sidebar') ? backgroundStyle : undefined,
+    className: ax([backgroundStyles.root, isExpandedOnDesktop && backgroundStyles.sideNavExpanded])
+  }), /*#__PURE__*/React.createElement("header", {
     id: id,
     "data-layout-slot": true,
-    className: ax([styles.root, xcss]),
+    className: ax([styles.root, fg('navx-full-height-sidebar') && styles.fullHeightSidebar, isExpandedOnDesktop && fg('navx-full-height-sidebar') && styles.fullHeightSidebarExpanded, xcss]),
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
-    style: customTheme.isEnabled ? customTheme.style : undefined
+    style: fg('navx-full-height-sidebar') ? foregroundStyle : customTheme.isEnabled ? customTheme.style : undefined
   }, /*#__PURE__*/React.createElement(HoistCssVarToLocalGrid, {
     variableName: topNavMountedVar,
     value: height

package/dist/esm/ui/top-nav-items/search.compiled.css

@@ -13,6 +13,7 @@
 ._80om1kdv{cursor:text}
 ._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
 ._p12f1kvu{max-width:680px}
+._p12fktbq{max-width:780px}
 ._vchhusvi{box-sizing:border-box}
 ._yv0e1mfv{grid-template-columns:auto 1fr auto}
 ._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}

package/dist/esm/ui/top-nav-items/search.js

@@ -2,14 +2,17 @@
 import "./search.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { Fragment } from 'react';
+import { cx } from '@atlaskit/css';
 import SearchIcon from '@atlaskit/icon/core/search';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Pressable, Show, Text } from '@atlaskit/primitives/compiled';
 import { IconButton } from './themed/migration';
 var styles = {
   root: "_2rko12b0 _1rjcze3t _18zr12x7 _yv0e1mfv _4cvr1h6o _bfhk1j9a _vchhusvi _80om1kdv _1e0cglyw _4t3izwfg _p12f1kvu _1bsb1osq _irr31d5g _1di6r01l _114b11p5",
   buttonText: "_yyhyjvu9 _1ii7kb7n",
   iconBefore: "_yyhykb7n _1ii7kb7n _1e0c1txw",
-  elemAfter: "_yyhy11wp _1ii7kb7n _1e0c1txw"
+  elemAfter: "_yyhy11wp _1ii7kb7n _1e0c1txw",
+  fullHeightSidebar: "_p12fktbq"
 };
 
 /**
@@ -34,7 +37,7 @@ export var Search = function Search(_ref) {
       border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-input, #8590A2)")
     },
     onClick: onClick,
-    xcss: styles.root,
+    xcss: cx(styles.root, fg('navx-full-height-sidebar') && styles.fullHeightSidebar),
     interactionName: interactionName,
     "aria-haspopup": ariaHaspopup
   }, /*#__PURE__*/React.createElement("span", {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "2.3.4",
+	"version": "2.4.1",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",