@atlaskit/navigation-system 2.17.0 → 2.18.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlassian/navigation-system
 
+## 2.18.0
+
+### Minor Changes
+
+- [`35dbcb50e7873`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/35dbcb50e7873) -
+  Changes TopNavMiddle items (search + create) to now be centred on large desktop screens, when the
+  `navx-full-height-sidear` feature gate is enabled.
+
 ## 2.17.0
 
 ### Minor Changes

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

@@ -5,4 +5,5 @@
 ._4t3i1osq{height:100%}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._lcxv1wug{pointer-events:auto}
-@media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._10jxnau3{max-width:calc(100% - var(--ds-space-200, 1pc))}._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}}
+._vchhusvi{box-sizing:border-box}
+@media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}}

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

@@ -15,13 +15,32 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _topNavStartContext = require("../../../context/top-nav-start/top-nav-start-context");
 var _toggleButtonProvider = require("../side-nav/toggle-button-provider");
-var _useSideNavVisibility2 = require("../side-nav/use-side-nav-visibility");
+var _useSideNavVisibility3 = 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 = {
+/**
+ * Styles for the TopNavStart element.
+ *
+ * When `navx-full-height-sidebar` is enabled this is the styling for the inner element,
+ * which re-enables pointer events.
+ */
+var innerStyles = {
   root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15ri1mjv _1gs5usvi",
   jiraProductLogoUpdate: "_15rip2n4",
-  fullHeightSidebar: "_bozgutpp _lcxv1wug",
-  fullHeightSidebarExpanded: "_15rin7od _glte1osq _10jxnau3"
+  fullHeightSidebar: "_lcxv1wug",
+  fullHeightSidebarExpanded: "_15rin7od _glte1osq"
+};
+
+/**
+ * Styles for the outer element, that does not have re-enabled pointer events and spans the entire
+ * width of the TopNavStart area.
+ *
+ * This wrapper element is only rendered when `navx-full-height-sidebar` is enabled.
+ */
+var wrapperStyles = {
+  root: "_vchhusvi",
+  fullHeightSidebar: "_bozgutpp",
+  fullHeightSidebarCollapsed: "_15rip2n4",
+  fullHeightSidebarExpanded: "_glte93mn _exxmpxbi"
 };
 
 /**
@@ -31,16 +50,43 @@ var styles = {
  * This ensures we get focus restoration for free.
  */
 var sideNavToggleButtonKey = 'side-nav-toggle-button';
+var TopNavStartInnerOld = /*#__PURE__*/(0, _react.forwardRef)(function TopNavStartInner(_ref, ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    "data-testid": testId,
+    className: (0, _runtime.ax)([innerStyles.root, (0, _platformFeatureFlags.fg)('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate])
+  }, children);
+});
+var TopNavStartInnerFHS = /*#__PURE__*/(0, _react.forwardRef)(function TopNavStartInnerFHS(_ref2, ref) {
+  var children = _ref2.children,
+    testId = _ref2.testId;
+  // This needs the real `defaultCollapsed` state or will not SSR properly
+  // TODO: lift `defaultCollapsed` state to `Root` (DSP-23683)
+  // then context value will be correct in SSR / from initial render
+  var _useSideNavVisibility = (0, _useSideNavVisibility3.useSideNavVisibility)({
+      defaultCollapsed: true
+    }),
+    isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    "data-testid": testId,
+    className: (0, _runtime.ax)([wrapperStyles.root, wrapperStyles.fullHeightSidebar, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)([innerStyles.root, innerStyles.fullHeightSidebar, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded, (0, _platformFeatureFlags.fg)('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate])
+  }, children));
+});
 
 /**
  * __TopNavStart__
  *
  * Wrapper for the top navigation actions on the inline-start (left) side of the top navigation.
  */
-function TopNavStart(_ref) {
-  var children = _ref.children,
-    testId = _ref.testId,
-    sideNavToggleButton = _ref.sideNavToggleButton;
+function TopNavStart(_ref3) {
+  var children = _ref3.children,
+    testId = _ref3.testId,
+    sideNavToggleButton = _ref3.sideNavToggleButton;
   var ref = (0, _react.useContext)(_topNavStartContext.TopNavStartAttachRef);
   var elementRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
@@ -52,10 +98,10 @@ function TopNavStart(_ref) {
   // This needs the real `defaultCollapsed` state or will not SSR properly
   // TODO: lift `defaultCollapsed` state to `Root` (DSP-23683)
   // then context value will be correct in SSR / from initial render
-  var _useSideNavVisibility = (0, _useSideNavVisibility2.useSideNavVisibility)({
+  var _useSideNavVisibility2 = (0, _useSideNavVisibility3.useSideNavVisibility)({
       defaultCollapsed: true
     }),
-    isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
+    isExpandedOnDesktop = _useSideNavVisibility2.isExpandedOnDesktop;
 
   // For SSR assume desktop
   var _useState = (0, _react.useState)(true),
@@ -75,10 +121,10 @@ function TopNavStart(_ref) {
   (0, _compiled.UNSAFE_useMediaQuery)('above.md', function (event) {
     setIsDesktop(event.matches);
   });
-  return /*#__PURE__*/_react.default.createElement("div", {
+  var TopNavStartInner = (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') ? TopNavStartInnerFHS : TopNavStartInnerOld;
+  return /*#__PURE__*/_react.default.createElement(TopNavStartInner, {
     ref: (0, _platformFeatureFlags.fg)('platform_fix_component_state_update_for_suspense') ? elementRef : ref,
-    "data-testid": testId,
-    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, (0, _platformFeatureFlags.fg)('team25-eu-jira-logo-updates-csm-jsm') && styles.jiraProductLogoUpdate])
+    testId: testId
   }, !(0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/_react.default.createElement(_toggleButtonProvider.SideNavToggleButtonSlotProvider, {
     key: sideNavToggleButtonKey
   }, sideNavToggleButton), sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/_react.default.createElement(_toggleButtonProvider.SideNavToggleButtonSlotProvider, {

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

@@ -20,4 +20,5 @@
 ._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: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)}}
+@media (min-width:64rem){._1rqt16a9{grid-template-columns:0fr minmax(min-content,max-content) 1fr}._hyzqcs5v{z-index:2}._pdlmutpp{gap:var(--ds-space-150,9pt)}}
+@media (min-width:110.5rem){._jh1g18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}

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

@@ -34,7 +34,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var styles = {
   root: "_nd5l8cbt _zulpu2gc _18zrutpp _179r7r9e _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
   fullHeightSidebar: "_179rglyw _bozgze3t _y4tiutpp _bfhkglyw _lcxvglyw _pdlmutpp",
-  fullHeightSidebarExpanded: "_1rqt15p1"
+  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax"
 };
 
 /**

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

@@ -5,4 +5,5 @@
 ._4t3i1osq{height:100%}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._lcxv1wug{pointer-events:auto}
-@media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._10jxnau3{max-width:calc(100% - var(--ds-space-200, 1pc))}._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}}
+._vchhusvi{box-sizing:border-box}
+@media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}}

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

@@ -1,17 +1,37 @@
 /* top-nav-start.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./top-nav-start.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery } from '@atlaskit/primitives/compiled';
 import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-context';
 import { SideNavToggleButtonSlotProvider } from '../side-nav/toggle-button-provider';
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
-const styles = {
+
+/**
+ * Styles for the TopNavStart element.
+ *
+ * When `navx-full-height-sidebar` is enabled this is the styling for the inner element,
+ * which re-enables pointer events.
+ */
+const innerStyles = {
   root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15ri1mjv _1gs5usvi",
   jiraProductLogoUpdate: "_15rip2n4",
-  fullHeightSidebar: "_bozgutpp _lcxv1wug",
-  fullHeightSidebarExpanded: "_15rin7od _glte1osq _10jxnau3"
+  fullHeightSidebar: "_lcxv1wug",
+  fullHeightSidebarExpanded: "_15rin7od _glte1osq"
+};
+
+/**
+ * Styles for the outer element, that does not have re-enabled pointer events and spans the entire
+ * width of the TopNavStart area.
+ *
+ * This wrapper element is only rendered when `navx-full-height-sidebar` is enabled.
+ */
+const wrapperStyles = {
+  root: "_vchhusvi",
+  fullHeightSidebar: "_bozgutpp",
+  fullHeightSidebarCollapsed: "_15rip2n4",
+  fullHeightSidebarExpanded: "_glte93mn _exxmpxbi"
 };
 
 /**
@@ -21,6 +41,36 @@ const styles = {
  * This ensures we get focus restoration for free.
  */
 const sideNavToggleButtonKey = 'side-nav-toggle-button';
+const TopNavStartInnerOld = /*#__PURE__*/forwardRef(function TopNavStartInner({
+  children,
+  testId
+}, ref) {
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": testId,
+    className: ax([innerStyles.root, fg('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate])
+  }, children);
+});
+const TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS({
+  children,
+  testId
+}, ref) {
+  // This needs the real `defaultCollapsed` state or will not SSR properly
+  // TODO: lift `defaultCollapsed` state to `Root` (DSP-23683)
+  // then context value will be correct in SSR / from initial render
+  const {
+    isExpandedOnDesktop
+  } = useSideNavVisibility({
+    defaultCollapsed: true
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": testId,
+    className: ax([wrapperStyles.root, wrapperStyles.fullHeightSidebar, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([innerStyles.root, innerStyles.fullHeightSidebar, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded, fg('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate])
+  }, children));
+});
 
 /**
  * __TopNavStart__
@@ -64,10 +114,10 @@ export function TopNavStart({
   UNSAFE_useMediaQuery('above.md', event => {
     setIsDesktop(event.matches);
   });
-  return /*#__PURE__*/React.createElement("div", {
+  const TopNavStartInner = fg('navx-full-height-sidebar') ? TopNavStartInnerFHS : TopNavStartInnerOld;
+  return /*#__PURE__*/React.createElement(TopNavStartInner, {
     ref: fg('platform_fix_component_state_update_for_suspense') ? elementRef : ref,
-    "data-testid": testId,
-    className: ax([styles.root, fg('navx-full-height-sidebar') && styles.fullHeightSidebar, isExpandedOnDesktop && fg('navx-full-height-sidebar') && styles.fullHeightSidebarExpanded, fg('team25-eu-jira-logo-updates-csm-jsm') && styles.jiraProductLogoUpdate])
+    testId: testId
   }, !fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {
     key: sideNavToggleButtonKey
   }, sideNavToggleButton), sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {

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

@@ -20,4 +20,5 @@
 ._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: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)}}
+@media (min-width:64rem){._1rqt16a9{grid-template-columns:0fr minmax(min-content,max-content) 1fr}._hyzqcs5v{z-index:2}._pdlmutpp{gap:var(--ds-space-150,9pt)}}
+@media (min-width:110.5rem){._jh1g18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}

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

@@ -23,7 +23,7 @@ import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 const styles = {
   root: "_nd5l8cbt _zulpu2gc _18zrutpp _179r7r9e _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
   fullHeightSidebar: "_179rglyw _bozgze3t _y4tiutpp _bfhkglyw _lcxvglyw _pdlmutpp",
-  fullHeightSidebarExpanded: "_1rqt15p1"
+  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax"
 };
 
 /**

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

@@ -5,4 +5,5 @@
 ._4t3i1osq{height:100%}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._lcxv1wug{pointer-events:auto}
-@media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._10jxnau3{max-width:calc(100% - var(--ds-space-200, 1pc))}._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}}
+._vchhusvi{box-sizing:border-box}
+@media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}}

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

@@ -2,17 +2,37 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./top-nav-start.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery } from '@atlaskit/primitives/compiled';
 import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-context';
 import { SideNavToggleButtonSlotProvider } from '../side-nav/toggle-button-provider';
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
-var styles = {
+
+/**
+ * Styles for the TopNavStart element.
+ *
+ * When `navx-full-height-sidebar` is enabled this is the styling for the inner element,
+ * which re-enables pointer events.
+ */
+var innerStyles = {
   root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15ri1mjv _1gs5usvi",
   jiraProductLogoUpdate: "_15rip2n4",
-  fullHeightSidebar: "_bozgutpp _lcxv1wug",
-  fullHeightSidebarExpanded: "_15rin7od _glte1osq _10jxnau3"
+  fullHeightSidebar: "_lcxv1wug",
+  fullHeightSidebarExpanded: "_15rin7od _glte1osq"
+};
+
+/**
+ * Styles for the outer element, that does not have re-enabled pointer events and spans the entire
+ * width of the TopNavStart area.
+ *
+ * This wrapper element is only rendered when `navx-full-height-sidebar` is enabled.
+ */
+var wrapperStyles = {
+  root: "_vchhusvi",
+  fullHeightSidebar: "_bozgutpp",
+  fullHeightSidebarCollapsed: "_15rip2n4",
+  fullHeightSidebarExpanded: "_glte93mn _exxmpxbi"
 };
 
 /**
@@ -22,16 +42,43 @@ var styles = {
  * This ensures we get focus restoration for free.
  */
 var sideNavToggleButtonKey = 'side-nav-toggle-button';
+var TopNavStartInnerOld = /*#__PURE__*/forwardRef(function TopNavStartInner(_ref, ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": testId,
+    className: ax([innerStyles.root, fg('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate])
+  }, children);
+});
+var TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS(_ref2, ref) {
+  var children = _ref2.children,
+    testId = _ref2.testId;
+  // This needs the real `defaultCollapsed` state or will not SSR properly
+  // TODO: lift `defaultCollapsed` state to `Root` (DSP-23683)
+  // then context value will be correct in SSR / from initial render
+  var _useSideNavVisibility = useSideNavVisibility({
+      defaultCollapsed: true
+    }),
+    isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": testId,
+    className: ax([wrapperStyles.root, wrapperStyles.fullHeightSidebar, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([innerStyles.root, innerStyles.fullHeightSidebar, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded, fg('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate])
+  }, children));
+});
 
 /**
  * __TopNavStart__
  *
  * Wrapper for the top navigation actions on the inline-start (left) side of the top navigation.
  */
-export function TopNavStart(_ref) {
-  var children = _ref.children,
-    testId = _ref.testId,
-    sideNavToggleButton = _ref.sideNavToggleButton;
+export function TopNavStart(_ref3) {
+  var children = _ref3.children,
+    testId = _ref3.testId,
+    sideNavToggleButton = _ref3.sideNavToggleButton;
   var ref = useContext(TopNavStartAttachRef);
   var elementRef = useRef(null);
   useEffect(function () {
@@ -43,10 +90,10 @@ export function TopNavStart(_ref) {
   // This needs the real `defaultCollapsed` state or will not SSR properly
   // TODO: lift `defaultCollapsed` state to `Root` (DSP-23683)
   // then context value will be correct in SSR / from initial render
-  var _useSideNavVisibility = useSideNavVisibility({
+  var _useSideNavVisibility2 = useSideNavVisibility({
       defaultCollapsed: true
     }),
-    isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
+    isExpandedOnDesktop = _useSideNavVisibility2.isExpandedOnDesktop;
 
   // For SSR assume desktop
   var _useState = useState(true),
@@ -66,10 +113,10 @@ export function TopNavStart(_ref) {
   UNSAFE_useMediaQuery('above.md', function (event) {
     setIsDesktop(event.matches);
   });
-  return /*#__PURE__*/React.createElement("div", {
+  var TopNavStartInner = fg('navx-full-height-sidebar') ? TopNavStartInnerFHS : TopNavStartInnerOld;
+  return /*#__PURE__*/React.createElement(TopNavStartInner, {
     ref: fg('platform_fix_component_state_update_for_suspense') ? elementRef : ref,
-    "data-testid": testId,
-    className: ax([styles.root, fg('navx-full-height-sidebar') && styles.fullHeightSidebar, isExpandedOnDesktop && fg('navx-full-height-sidebar') && styles.fullHeightSidebarExpanded, fg('team25-eu-jira-logo-updates-csm-jsm') && styles.jiraProductLogoUpdate])
+    testId: testId
   }, !fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {
     key: sideNavToggleButtonKey
   }, sideNavToggleButton), sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {

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

@@ -20,4 +20,5 @@
 ._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: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)}}
+@media (min-width:64rem){._1rqt16a9{grid-template-columns:0fr minmax(min-content,max-content) 1fr}._hyzqcs5v{z-index:2}._pdlmutpp{gap:var(--ds-space-150,9pt)}}
+@media (min-width:110.5rem){._jh1g18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}

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

@@ -25,7 +25,7 @@ import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 var styles = {
   root: "_nd5l8cbt _zulpu2gc _18zrutpp _179r7r9e _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
   fullHeightSidebar: "_179rglyw _bozgze3t _y4tiutpp _bfhkglyw _lcxvglyw _pdlmutpp",
-  fullHeightSidebarExpanded: "_1rqt15p1"
+  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax"
 };
 
 /**

package/dist/types/ui/page-layout/top-nav/top-nav-start.d.ts

@@ -3,12 +3,7 @@
  * @jsx jsx
  */
 import React from 'react';
-/**
- * __TopNavStart__
- *
- * Wrapper for the top navigation actions on the inline-start (left) side of the top navigation.
- */
-export declare function TopNavStart({ children, testId, sideNavToggleButton, }: {
+type TopNavStartProps = {
     /**
      * The content of the layout area.
      *
@@ -30,4 +25,11 @@ export declare function TopNavStart({ children, testId, sideNavToggleButton, }:
      * Consumers that do not need a toggle button can explicitly pass `null`.
      */
     sideNavToggleButton?: React.ReactNode;
-}): JSX.Element;
+};
+/**
+ * __TopNavStart__
+ *
+ * Wrapper for the top navigation actions on the inline-start (left) side of the top navigation.
+ */
+export declare function TopNavStart({ children, testId, sideNavToggleButton }: TopNavStartProps): JSX.Element;
+export {};

package/dist/types-ts4.5/ui/page-layout/top-nav/top-nav-start.d.ts

@@ -3,12 +3,7 @@
  * @jsx jsx
  */
 import React from 'react';
-/**
- * __TopNavStart__
- *
- * Wrapper for the top navigation actions on the inline-start (left) side of the top navigation.
- */
-export declare function TopNavStart({ children, testId, sideNavToggleButton, }: {
+type TopNavStartProps = {
     /**
      * The content of the layout area.
      *
@@ -30,4 +25,11 @@ export declare function TopNavStart({ children, testId, sideNavToggleButton, }:
      * Consumers that do not need a toggle button can explicitly pass `null`.
      */
     sideNavToggleButton?: React.ReactNode;
-}): JSX.Element;
+};
+/**
+ * __TopNavStart__
+ *
+ * Wrapper for the top navigation actions on the inline-start (left) side of the top navigation.
+ */
+export declare function TopNavStart({ children, testId, sideNavToggleButton }: TopNavStartProps): JSX.Element;
+export {};

package/package.json

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