@atlaskit/navigation-system 2.7.0 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlassian/navigation-system
 
+## 2.8.0
+
+### Minor Changes
+
+- [`a515e172559b8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a515e172559b8) -
+  Adds `sideNavToggleButton` slot to `TopNavStart` to be used instead of rendering
+  `<SideNavToggleButton>` as a child. When `navx-full-height-sidebar` is enabled, the slot is used
+  to move the button between start and end positions based on sidebar collapse state.
+- [`a515e172559b8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a515e172559b8) -
+  App logo text will now truncate if there is no available space, when `navx-full-height-sidebar` is
+  enabled.
+
 ## 2.7.0
 
 ### Minor Changes

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SideNavToggleButtonElement = exports.SideNavToggleButtonAttachRef = void 0;
+exports.SideNavToggleButtonSlotContext = exports.SideNavToggleButtonElement = exports.SideNavToggleButtonAttachRef = void 0;
 var _react = require("react");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 /**
@@ -23,4 +23,9 @@ var SideNavToggleButtonElement = exports.SideNavToggleButtonElement = /*#__PURE_
  * A callback ref is needed because the side nav can be mounted before the elements in the top bar (e.g. if the element
  *  is lazy loaded, which happens in Jira and Confluence), which would prevent the event listeners from being set up.
  */
-var SideNavToggleButtonAttachRef = exports.SideNavToggleButtonAttachRef = /*#__PURE__*/(0, _react.createContext)(_noop.default);
+var SideNavToggleButtonAttachRef = exports.SideNavToggleButtonAttachRef = /*#__PURE__*/(0, _react.createContext)(_noop.default);
+
+/**
+ * Used to check if the SideNavToggleButton is rendered inside of its slot in `TopNavStart`.
+ */
+var SideNavToggleButtonSlotContext = exports.SideNavToggleButtonSlotContext = /*#__PURE__*/(0, _react.createContext)(false);

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SideNavToggleButtonProvider = void 0;
+exports.SideNavToggleButtonSlotProvider = exports.SideNavToggleButtonProvider = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _toggleButtonContext = require("./toggle-button-context");
@@ -34,4 +34,16 @@ var SideNavToggleButtonProvider = exports.SideNavToggleButtonProvider = function
   }, /*#__PURE__*/_react.default.createElement(_toggleButtonContext.SideNavToggleButtonAttachRef.Provider, {
     value: setElement
   }, children));
+};
+
+/**
+ * Provider for the side nav toggle button slot.
+ *
+ * This allows us to determine if the toggle button is rendered inside or outside of its slot.
+ */
+var SideNavToggleButtonSlotProvider = exports.SideNavToggleButtonSlotProvider = function SideNavToggleButtonSlotProvider(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/_react.default.createElement(_toggleButtonContext.SideNavToggleButtonSlotContext.Provider, {
+    value: true
+  }, children);
 };

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

@@ -1,2 +1,3 @@
 ._1e0c1bgi{display:contents}
-._lcxvglyw{pointer-events:none}
+._lcxvglyw{pointer-events:none}
+@media (min-width:64rem){._3l1a1wug{margin-inline-start:auto}}

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

@@ -29,6 +29,12 @@ var toggleButtonTooltipOptions = {
 // For duplicate "mouseenter" issue when changing icons (see below)
 var silentIconStyles = null;
 
+/**
+ * Wrapper styles to align the toggle button to the end of `TopNavStart`
+ * when FHS is expanded.
+ */
+var fullHeightSidebarExpandedWrapperStyles = null;
+
 /**
  * __SideNavToggleButton__
  *
@@ -102,7 +108,7 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
       className: (0, _runtime.ax)(["_1e0c1bgi _lcxvglyw"])
     }, isSideNavExpanded ? /*#__PURE__*/_react.default.createElement(_sidebarCollapse.default, props) : /*#__PURE__*/_react.default.createElement(_sidebarExpand.default, props));
   };
-  return /*#__PURE__*/_react.default.createElement(_migration.IconButton, {
+  var iconButton = /*#__PURE__*/_react.default.createElement(_migration.IconButton, {
     appearance: "subtle",
     label: isSideNavExpanded ? collapseLabel : expandLabel,
     icon: icon,
@@ -113,4 +119,15 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
     ref: (0, _platformFeatureFlags.fg)('platform_fix_component_state_update_for_suspense') ? elementRef : ref,
     tooltip: toggleButtonTooltipOptions
   });
+  var isInsideSlot = (0, _react.useContext)(_toggleButtonContext.SideNavToggleButtonSlotContext);
+
+  // Checking `isInsideSlot` in case an app isn't using the slot
+  // We don't want to break existing non-slot usage with the left margin
+  // This check can be removed in the future, after slot is required for a while.
+  if (isInsideSlot && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _runtime.ax)([isSideNavExpandedOnDesktop && "_3l1a1wug"])
+    }, iconButton);
+  }
+  return iconButton;
 };

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

@@ -5,5 +5,4 @@
 ._4t3i1osq{height:100%}
 ._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}}
+@media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._10jxnau3{max-width:calc(100% - var(--ds-space-200, 1pc))}._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

@@ -1,6 +1,7 @@
 /* top-nav-start.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,17 +9,28 @@ Object.defineProperty(exports, "__esModule", {
 exports.TopNavStart = TopNavStart;
 require("./top-nav-start.compiled.css");
 var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 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");
 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",
-  fullHeightSidebar: "_p12fnau3 _bozgutpp _lcxv1wug",
-  fullHeightSidebarExpanded: "_15rin7od"
+  fullHeightSidebar: "_bozgutpp _lcxv1wug",
+  fullHeightSidebarExpanded: "_15rin7od _glte1osq _10jxnau3"
 };
 
+/**
+ * The consistent key used for the side nav toggle button to ensure it does not get remounted
+ * when it is reordered.
+ *
+ * This ensures we get focus restoration for free.
+ */
+var sideNavToggleButtonKey = 'side-nav-toggle-button';
+
 /**
  * __TopNavStart__
  *
@@ -26,7 +38,8 @@ var styles = {
  */
 function TopNavStart(_ref) {
   var children = _ref.children,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    sideNavToggleButton = _ref.sideNavToggleButton;
   var ref = (0, _react.useContext)(_topNavStartContext.TopNavStartAttachRef);
   var elementRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
@@ -35,14 +48,41 @@ function TopNavStart(_ref) {
     }
   }, [elementRef, ref]);
 
-  // Need to use `{ defaultCollapsed: true }` otherwise when there is no side nav mounted this never becomes false
+  // 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)({
       defaultCollapsed: true
     }),
     isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
+
+  // For SSR assume desktop
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isDesktop = _useState2[0],
+    setIsDesktop = _useState2[1];
+  // Set state to real value on client
+  // This could result in some visible shift on mobile when hydrating SSR
+  // TODO: review and improve SSR behavior as necessary (DSP-23817)
+  (0, _react.useLayoutEffect)(function () {
+    // Checking this to avoid breaking tests when `matchMedia` is not mocked
+    // Ideally we wouldn't cater to test environments, but this avoids introducing unnecessary friction
+    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+      setIsDesktop(window.matchMedia('(min-width: 64rem)').matches);
+    }
+  }, []);
+  (0, _compiled.UNSAFE_useMediaQuery)('above.md', function (event) {
+    setIsDesktop(event.matches);
+  });
   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, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebar, isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebarExpanded])
-  }, children);
+  }, !(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, {
+    key: sideNavToggleButtonKey
+  }, sideNavToggleButton), children, sideNavToggleButton && isDesktop && isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/_react.default.createElement(_toggleButtonProvider.SideNavToggleButtonSlotProvider, {
+    key: sideNavToggleButtonKey
+  }, sideNavToggleButton));
 }

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

@@ -5,6 +5,7 @@
 ._1e0c1txw{display:flex}
 ._1e0cglyw{display:none}
 ._1o9zidpf{flex-shrink:0}
+._1o9zkb7n{flex-shrink:1}
 ._1reo15vq{overflow-x:hidden}
 ._1toh1r31._1toh1r31{text-decoration-color:currentColor}
 ._1w901kw7._1w901kw7{color:inherit}
@@ -13,6 +14,7 @@
 ._5jyqglyw._5jyqglyw{text-decoration-line:none}
 ._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
 ._mrqmnqa1._mrqmnqa1{text-decoration-style:solid}
+._p12f1osq{max-width:100%}
 ._p12f1tcg{max-width:24px}
 ._p12fnklw{max-width:20pc}
 ._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}

package/dist/cjs/ui/top-nav-items/nav-logo/app-logo.js

@@ -11,6 +11,7 @@ require("./app-logo.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@compiled/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _primitives = require("@atlaskit/primitives");
 var _compiled = require("@atlaskit/primitives/compiled");
@@ -24,13 +25,16 @@ var Text = (0, _platformFeatureFlagsReact.componentWithFG)('jfp-magma-hydration-
 var anchorStyles = {
   root: "_2rko19bv _1e0c1txw _4cvr1h6o _4t3izwfg _1o9zidpf _ahbq1b66 _1toh1r31 _5jyqglyw _mrqmnqa1 _1w901kw7",
   interactionStates: "_irr3166n _1di61wwy",
-  interactionStatesCustomTheming: "_irr31rps _1di6yhlj"
+  interactionStatesCustomTheming: "_irr31rps _1di6yhlj",
+  fullHeightSidebar: "_1reo15vq _18m915vq _1o9zkb7n"
 };
 var logoWrapperStyles = {
-  root: "_18zr1b66"
+  root: "_18zr1b66",
+  fullHeightSidebar: "_p12f1osq"
 };
 var iconContainerStyles = {
-  root: "_1reo15vq _18m915vq _1e0c1txw _p12f1tcg"
+  root: "_1reo15vq _18m915vq _1e0c1txw _p12f1tcg",
+  fullHeightSidebar: "_1o9zidpf"
 };
 var logoTextStyles = {
   root: "_1bsb1ris _p12fnklw _uiztglyw _y4tiv77o _1e0cglyw _10y418uv"
@@ -72,14 +76,14 @@ var AppLogo = exports.AppLogo = function AppLogo(_ref) {
     // @ts-expect-error - non-standard values for `borderRadius` and the custom theming interaction states
     // eslint-disable-next-line @compiled/no-suppress-xcss
     ,
-    xcss: (0, _react2.cx)(anchorStyles.root, hasCustomTheme ? anchorStyles.interactionStatesCustomTheming : anchorStyles.interactionStates),
+    xcss: (0, _react2.cx)(anchorStyles.root, hasCustomTheme ? anchorStyles.interactionStatesCustomTheming : anchorStyles.interactionStates, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && anchorStyles.fullHeightSidebar),
     onClick: onClick
   }, /*#__PURE__*/_react.default.createElement(Inline, {
     space: "space.075",
     alignBlock: "center",
-    xcss: logoWrapperStyles.root
+    xcss: (0, _react2.cx)(logoWrapperStyles.root, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && logoWrapperStyles.fullHeightSidebar)
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)([iconContainerStyles.root])
+    className: (0, _runtime.ax)([iconContainerStyles.root, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && iconContainerStyles.fullHeightSidebar])
   }, /*#__PURE__*/_react.default.createElement(_logoRenderer.LogoRenderer
   // Top nav always uses the new logo design
   , {

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

@@ -16,4 +16,9 @@ export const SideNavToggleButtonElement = /*#__PURE__*/createContext(null);
  * A callback ref is needed because the side nav can be mounted before the elements in the top bar (e.g. if the element
  *  is lazy loaded, which happens in Jira and Confluence), which would prevent the event listeners from being set up.
  */
-export const SideNavToggleButtonAttachRef = /*#__PURE__*/createContext(__noop);
+export const SideNavToggleButtonAttachRef = /*#__PURE__*/createContext(__noop);
+
+/**
+ * Used to check if the SideNavToggleButton is rendered inside of its slot in `TopNavStart`.
+ */
+export const SideNavToggleButtonSlotContext = /*#__PURE__*/createContext(false);

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { SideNavToggleButtonAttachRef, SideNavToggleButtonElement } from './toggle-button-context';
+import { SideNavToggleButtonAttachRef, SideNavToggleButtonElement, SideNavToggleButtonSlotContext } from './toggle-button-context';
 
 /**
  * Provider for the side nav toggle button contexts.
@@ -23,4 +23,17 @@ export const SideNavToggleButtonProvider = ({
   }, /*#__PURE__*/React.createElement(SideNavToggleButtonAttachRef.Provider, {
     value: setElement
   }, children));
+};
+
+/**
+ * Provider for the side nav toggle button slot.
+ *
+ * This allows us to determine if the toggle button is rendered inside or outside of its slot.
+ */
+export const SideNavToggleButtonSlotProvider = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(SideNavToggleButtonSlotContext.Provider, {
+    value: true
+  }, children);
 };

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

@@ -1,2 +1,3 @@
 ._1e0c1bgi{display:contents}
-._lcxvglyw{pointer-events:none}
+._lcxvglyw{pointer-events:none}
+@media (min-width:64rem){._3l1a1wug{margin-inline-start:auto}}

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

@@ -7,7 +7,7 @@ import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { IconButton } from '../../top-nav-items/themed/migration';
-import { SideNavToggleButtonAttachRef } from './toggle-button-context';
+import { SideNavToggleButtonAttachRef, SideNavToggleButtonSlotContext } from './toggle-button-context';
 import { useSideNavVisibility } from './use-side-nav-visibility';
 import { useToggleSideNav } from './use-toggle-side-nav';
 const toggleButtonTooltipOptions = {
@@ -19,6 +19,12 @@ const toggleButtonTooltipOptions = {
 // For duplicate "mouseenter" issue when changing icons (see below)
 const silentIconStyles = null;
 
+/**
+ * Wrapper styles to align the toggle button to the end of `TopNavStart`
+ * when FHS is expanded.
+ */
+const fullHeightSidebarExpandedWrapperStyles = null;
+
 /**
  * __SideNavToggleButton__
  *
@@ -89,7 +95,7 @@ export const SideNavToggleButton = ({
   const icon = props => /*#__PURE__*/React.createElement("span", {
     className: ax(["_1e0c1bgi _lcxvglyw"])
   }, isSideNavExpanded ? /*#__PURE__*/React.createElement(SidebarCollapseIcon, props) : /*#__PURE__*/React.createElement(SidebarExpandIcon, props));
-  return /*#__PURE__*/React.createElement(IconButton, {
+  const iconButton = /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     label: isSideNavExpanded ? collapseLabel : expandLabel,
     icon: icon,
@@ -100,4 +106,15 @@ export const SideNavToggleButton = ({
     ref: fg('platform_fix_component_state_update_for_suspense') ? elementRef : ref,
     tooltip: toggleButtonTooltipOptions
   });
+  const isInsideSlot = useContext(SideNavToggleButtonSlotContext);
+
+  // Checking `isInsideSlot` in case an app isn't using the slot
+  // We don't want to break existing non-slot usage with the left margin
+  // This check can be removed in the future, after slot is required for a while.
+  if (isInsideSlot && fg('navx-full-height-sidebar')) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: ax([isSideNavExpandedOnDesktop && "_3l1a1wug"])
+    }, iconButton);
+  }
+  return iconButton;
 };

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

@@ -5,5 +5,4 @@
 ._4t3i1osq{height:100%}
 ._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}}
+@media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._10jxnau3{max-width:calc(100% - var(--ds-space-200, 1pc))}._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

@@ -1,16 +1,26 @@
 /* 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, useRef } from 'react';
+import React, { 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 = {
   root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15ri1mjv _1gs5usvi",
-  fullHeightSidebar: "_p12fnau3 _bozgutpp _lcxv1wug",
-  fullHeightSidebarExpanded: "_15rin7od"
+  fullHeightSidebar: "_bozgutpp _lcxv1wug",
+  fullHeightSidebarExpanded: "_15rin7od _glte1osq _10jxnau3"
 };
 
+/**
+ * The consistent key used for the side nav toggle button to ensure it does not get remounted
+ * when it is reordered.
+ *
+ * This ensures we get focus restoration for free.
+ */
+const sideNavToggleButtonKey = 'side-nav-toggle-button';
+
 /**
  * __TopNavStart__
  *
@@ -18,7 +28,8 @@ const styles = {
  */
 export function TopNavStart({
   children,
-  testId
+  testId,
+  sideNavToggleButton
 }) {
   const ref = useContext(TopNavStartAttachRef);
   const elementRef = useRef(null);
@@ -28,15 +39,39 @@ export function TopNavStart({
     }
   }, [elementRef, ref]);
 
-  // Need to use `{ defaultCollapsed: true }` otherwise when there is no side nav mounted this never becomes false
+  // 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
   });
+
+  // For SSR assume desktop
+  const [isDesktop, setIsDesktop] = useState(true);
+  // Set state to real value on client
+  // This could result in some visible shift on mobile when hydrating SSR
+  // TODO: review and improve SSR behavior as necessary (DSP-23817)
+  useLayoutEffect(() => {
+    // Checking this to avoid breaking tests when `matchMedia` is not mocked
+    // Ideally we wouldn't cater to test environments, but this avoids introducing unnecessary friction
+    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+      setIsDesktop(window.matchMedia('(min-width: 64rem)').matches);
+    }
+  }, []);
+  UNSAFE_useMediaQuery('above.md', event => {
+    setIsDesktop(event.matches);
+  });
   return /*#__PURE__*/React.createElement("div", {
     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])
-  }, children);
+  }, !fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {
+    key: sideNavToggleButtonKey
+  }, sideNavToggleButton), sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {
+    key: sideNavToggleButtonKey
+  }, sideNavToggleButton), children, sideNavToggleButton && isDesktop && isExpandedOnDesktop && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {
+    key: sideNavToggleButtonKey
+  }, sideNavToggleButton));
 }

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

@@ -5,6 +5,7 @@
 ._1e0c1txw{display:flex}
 ._1e0cglyw{display:none}
 ._1o9zidpf{flex-shrink:0}
+._1o9zkb7n{flex-shrink:1}
 ._1reo15vq{overflow-x:hidden}
 ._1toh1r31._1toh1r31{text-decoration-color:currentColor}
 ._1w901kw7._1w901kw7{color:inherit}
@@ -13,6 +14,7 @@
 ._5jyqglyw._5jyqglyw{text-decoration-line:none}
 ._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
 ._mrqmnqa1._mrqmnqa1{text-decoration-style:solid}
+._p12f1osq{max-width:100%}
 ._p12f1tcg{max-width:24px}
 ._p12fnklw{max-width:20pc}
 ._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}

package/dist/es2019/ui/top-nav-items/nav-logo/app-logo.js

@@ -3,6 +3,7 @@ import "./app-logo.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useRef } from 'react';
 import { cx } from '@compiled/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import { Anchor as AnchorLegacy, Inline as InlineLegacy, Text as TextLegacy
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
@@ -17,13 +18,16 @@ const Text = componentWithFG('jfp-magma-hydration-harmonise-applogo-classname',
 const anchorStyles = {
   root: "_2rko19bv _1e0c1txw _4cvr1h6o _4t3izwfg _1o9zidpf _ahbq1b66 _1toh1r31 _5jyqglyw _mrqmnqa1 _1w901kw7",
   interactionStates: "_irr3166n _1di61wwy",
-  interactionStatesCustomTheming: "_irr31rps _1di6yhlj"
+  interactionStatesCustomTheming: "_irr31rps _1di6yhlj",
+  fullHeightSidebar: "_1reo15vq _18m915vq _1o9zkb7n"
 };
 const logoWrapperStyles = {
-  root: "_18zr1b66"
+  root: "_18zr1b66",
+  fullHeightSidebar: "_p12f1osq"
 };
 const iconContainerStyles = {
-  root: "_1reo15vq _18m915vq _1e0c1txw _p12f1tcg"
+  root: "_1reo15vq _18m915vq _1e0c1txw _p12f1tcg",
+  fullHeightSidebar: "_1o9zidpf"
 };
 const logoTextStyles = {
   root: "_1bsb1ris _p12fnklw _uiztglyw _y4tiv77o _1e0cglyw _10y418uv"
@@ -66,14 +70,14 @@ export const AppLogo = ({
     // @ts-expect-error - non-standard values for `borderRadius` and the custom theming interaction states
     // eslint-disable-next-line @compiled/no-suppress-xcss
     ,
-    xcss: cx(anchorStyles.root, hasCustomTheme ? anchorStyles.interactionStatesCustomTheming : anchorStyles.interactionStates),
+    xcss: cx(anchorStyles.root, hasCustomTheme ? anchorStyles.interactionStatesCustomTheming : anchorStyles.interactionStates, fg('navx-full-height-sidebar') && anchorStyles.fullHeightSidebar),
     onClick: onClick
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.075",
     alignBlock: "center",
-    xcss: logoWrapperStyles.root
+    xcss: cx(logoWrapperStyles.root, fg('navx-full-height-sidebar') && logoWrapperStyles.fullHeightSidebar)
   }, /*#__PURE__*/React.createElement("div", {
-    className: ax([iconContainerStyles.root])
+    className: ax([iconContainerStyles.root, fg('navx-full-height-sidebar') && iconContainerStyles.fullHeightSidebar])
   }, /*#__PURE__*/React.createElement(LogoRenderer
   // Top nav always uses the new logo design
   , {

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

@@ -16,4 +16,9 @@ export var SideNavToggleButtonElement = /*#__PURE__*/createContext(null);
  * A callback ref is needed because the side nav can be mounted before the elements in the top bar (e.g. if the element
  *  is lazy loaded, which happens in Jira and Confluence), which would prevent the event listeners from being set up.
  */
-export var SideNavToggleButtonAttachRef = /*#__PURE__*/createContext(__noop);
+export var SideNavToggleButtonAttachRef = /*#__PURE__*/createContext(__noop);
+
+/**
+ * Used to check if the SideNavToggleButton is rendered inside of its slot in `TopNavStart`.
+ */
+export var SideNavToggleButtonSlotContext = /*#__PURE__*/createContext(false);

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

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
-import { SideNavToggleButtonAttachRef, SideNavToggleButtonElement } from './toggle-button-context';
+import { SideNavToggleButtonAttachRef, SideNavToggleButtonElement, SideNavToggleButtonSlotContext } from './toggle-button-context';
 
 /**
  * Provider for the side nav toggle button contexts.
@@ -26,4 +26,16 @@ export var SideNavToggleButtonProvider = function SideNavToggleButtonProvider(_r
   }, /*#__PURE__*/React.createElement(SideNavToggleButtonAttachRef.Provider, {
     value: setElement
   }, children));
+};
+
+/**
+ * Provider for the side nav toggle button slot.
+ *
+ * This allows us to determine if the toggle button is rendered inside or outside of its slot.
+ */
+export var SideNavToggleButtonSlotProvider = function SideNavToggleButtonSlotProvider(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement(SideNavToggleButtonSlotContext.Provider, {
+    value: true
+  }, children);
 };

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

@@ -1,2 +1,3 @@
 ._1e0c1bgi{display:contents}
-._lcxvglyw{pointer-events:none}
+._lcxvglyw{pointer-events:none}
+@media (min-width:64rem){._3l1a1wug{margin-inline-start:auto}}

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

@@ -8,7 +8,7 @@ import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { IconButton } from '../../top-nav-items/themed/migration';
-import { SideNavToggleButtonAttachRef } from './toggle-button-context';
+import { SideNavToggleButtonAttachRef, SideNavToggleButtonSlotContext } from './toggle-button-context';
 import { useSideNavVisibility } from './use-side-nav-visibility';
 import { useToggleSideNav } from './use-toggle-side-nav';
 var toggleButtonTooltipOptions = {
@@ -20,6 +20,12 @@ var toggleButtonTooltipOptions = {
 // For duplicate "mouseenter" issue when changing icons (see below)
 var silentIconStyles = null;
 
+/**
+ * Wrapper styles to align the toggle button to the end of `TopNavStart`
+ * when FHS is expanded.
+ */
+var fullHeightSidebarExpandedWrapperStyles = null;
+
 /**
  * __SideNavToggleButton__
  *
@@ -93,7 +99,7 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
       className: ax(["_1e0c1bgi _lcxvglyw"])
     }, isSideNavExpanded ? /*#__PURE__*/React.createElement(SidebarCollapseIcon, props) : /*#__PURE__*/React.createElement(SidebarExpandIcon, props));
   };
-  return /*#__PURE__*/React.createElement(IconButton, {
+  var iconButton = /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     label: isSideNavExpanded ? collapseLabel : expandLabel,
     icon: icon,
@@ -104,4 +110,15 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
     ref: fg('platform_fix_component_state_update_for_suspense') ? elementRef : ref,
     tooltip: toggleButtonTooltipOptions
   });
+  var isInsideSlot = useContext(SideNavToggleButtonSlotContext);
+
+  // Checking `isInsideSlot` in case an app isn't using the slot
+  // We don't want to break existing non-slot usage with the left margin
+  // This check can be removed in the future, after slot is required for a while.
+  if (isInsideSlot && fg('navx-full-height-sidebar')) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: ax([isSideNavExpandedOnDesktop && "_3l1a1wug"])
+    }, iconButton);
+  }
+  return iconButton;
 };

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

@@ -5,5 +5,4 @@
 ._4t3i1osq{height:100%}
 ._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}}
+@media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._10jxnau3{max-width:calc(100% - var(--ds-space-200, 1pc))}._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

@@ -1,16 +1,27 @@
 /* top-nav-start.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./top-nav-start.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { 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 = {
   root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15ri1mjv _1gs5usvi",
-  fullHeightSidebar: "_p12fnau3 _bozgutpp _lcxv1wug",
-  fullHeightSidebarExpanded: "_15rin7od"
+  fullHeightSidebar: "_bozgutpp _lcxv1wug",
+  fullHeightSidebarExpanded: "_15rin7od _glte1osq _10jxnau3"
 };
 
+/**
+ * The consistent key used for the side nav toggle button to ensure it does not get remounted
+ * when it is reordered.
+ *
+ * This ensures we get focus restoration for free.
+ */
+var sideNavToggleButtonKey = 'side-nav-toggle-button';
+
 /**
  * __TopNavStart__
  *
@@ -18,7 +29,8 @@ var styles = {
  */
 export function TopNavStart(_ref) {
   var children = _ref.children,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    sideNavToggleButton = _ref.sideNavToggleButton;
   var ref = useContext(TopNavStartAttachRef);
   var elementRef = useRef(null);
   useEffect(function () {
@@ -27,14 +39,41 @@ export function TopNavStart(_ref) {
     }
   }, [elementRef, ref]);
 
-  // Need to use `{ defaultCollapsed: true }` otherwise when there is no side nav mounted this never becomes false
+  // 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;
+
+  // For SSR assume desktop
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDesktop = _useState2[0],
+    setIsDesktop = _useState2[1];
+  // Set state to real value on client
+  // This could result in some visible shift on mobile when hydrating SSR
+  // TODO: review and improve SSR behavior as necessary (DSP-23817)
+  useLayoutEffect(function () {
+    // Checking this to avoid breaking tests when `matchMedia` is not mocked
+    // Ideally we wouldn't cater to test environments, but this avoids introducing unnecessary friction
+    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+      setIsDesktop(window.matchMedia('(min-width: 64rem)').matches);
+    }
+  }, []);
+  UNSAFE_useMediaQuery('above.md', function (event) {
+    setIsDesktop(event.matches);
+  });
   return /*#__PURE__*/React.createElement("div", {
     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])
-  }, children);
+  }, !fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {
+    key: sideNavToggleButtonKey
+  }, sideNavToggleButton), sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {
+    key: sideNavToggleButtonKey
+  }, sideNavToggleButton), children, sideNavToggleButton && isDesktop && isExpandedOnDesktop && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {
+    key: sideNavToggleButtonKey
+  }, sideNavToggleButton));
 }

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

@@ -5,6 +5,7 @@
 ._1e0c1txw{display:flex}
 ._1e0cglyw{display:none}
 ._1o9zidpf{flex-shrink:0}
+._1o9zkb7n{flex-shrink:1}
 ._1reo15vq{overflow-x:hidden}
 ._1toh1r31._1toh1r31{text-decoration-color:currentColor}
 ._1w901kw7._1w901kw7{color:inherit}
@@ -13,6 +14,7 @@
 ._5jyqglyw._5jyqglyw{text-decoration-line:none}
 ._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
 ._mrqmnqa1._mrqmnqa1{text-decoration-style:solid}
+._p12f1osq{max-width:100%}
 ._p12f1tcg{max-width:24px}
 ._p12fnklw{max-width:20pc}
 ._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}

package/dist/esm/ui/top-nav-items/nav-logo/app-logo.js

@@ -3,6 +3,7 @@ import "./app-logo.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useRef } from 'react';
 import { cx } from '@compiled/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import { Anchor as AnchorLegacy, Inline as InlineLegacy, Text as TextLegacy
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
@@ -17,13 +18,16 @@ var Text = componentWithFG('jfp-magma-hydration-harmonise-applogo-classname', Te
 var anchorStyles = {
   root: "_2rko19bv _1e0c1txw _4cvr1h6o _4t3izwfg _1o9zidpf _ahbq1b66 _1toh1r31 _5jyqglyw _mrqmnqa1 _1w901kw7",
   interactionStates: "_irr3166n _1di61wwy",
-  interactionStatesCustomTheming: "_irr31rps _1di6yhlj"
+  interactionStatesCustomTheming: "_irr31rps _1di6yhlj",
+  fullHeightSidebar: "_1reo15vq _18m915vq _1o9zkb7n"
 };
 var logoWrapperStyles = {
-  root: "_18zr1b66"
+  root: "_18zr1b66",
+  fullHeightSidebar: "_p12f1osq"
 };
 var iconContainerStyles = {
-  root: "_1reo15vq _18m915vq _1e0c1txw _p12f1tcg"
+  root: "_1reo15vq _18m915vq _1e0c1txw _p12f1tcg",
+  fullHeightSidebar: "_1o9zidpf"
 };
 var logoTextStyles = {
   root: "_1bsb1ris _p12fnklw _uiztglyw _y4tiv77o _1e0cglyw _10y418uv"
@@ -65,14 +69,14 @@ export var AppLogo = function AppLogo(_ref) {
     // @ts-expect-error - non-standard values for `borderRadius` and the custom theming interaction states
     // eslint-disable-next-line @compiled/no-suppress-xcss
     ,
-    xcss: cx(anchorStyles.root, hasCustomTheme ? anchorStyles.interactionStatesCustomTheming : anchorStyles.interactionStates),
+    xcss: cx(anchorStyles.root, hasCustomTheme ? anchorStyles.interactionStatesCustomTheming : anchorStyles.interactionStates, fg('navx-full-height-sidebar') && anchorStyles.fullHeightSidebar),
     onClick: onClick
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.075",
     alignBlock: "center",
-    xcss: logoWrapperStyles.root
+    xcss: cx(logoWrapperStyles.root, fg('navx-full-height-sidebar') && logoWrapperStyles.fullHeightSidebar)
   }, /*#__PURE__*/React.createElement("div", {
-    className: ax([iconContainerStyles.root])
+    className: ax([iconContainerStyles.root, fg('navx-full-height-sidebar') && iconContainerStyles.fullHeightSidebar])
   }, /*#__PURE__*/React.createElement(LogoRenderer
   // Top nav always uses the new logo design
   , {

package/dist/types/ui/page-layout/side-nav/toggle-button-context.d.ts

@@ -14,3 +14,7 @@ export declare const SideNavToggleButtonElement: import("react").Context<HTMLBut
  *  is lazy loaded, which happens in Jira and Confluence), which would prevent the event listeners from being set up.
  */
 export declare const SideNavToggleButtonAttachRef: import("react").Context<(newVal: HTMLButtonElement | null) => void>;
+/**
+ * Used to check if the SideNavToggleButton is rendered inside of its slot in `TopNavStart`.
+ */
+export declare const SideNavToggleButtonSlotContext: import("react").Context<boolean>;

package/dist/types/ui/page-layout/side-nav/toggle-button-provider.d.ts

@@ -15,3 +15,11 @@ import React from 'react';
 export declare const SideNavToggleButtonProvider: ({ children }: {
     children: React.ReactNode;
 }) => React.JSX.Element;
+/**
+ * Provider for the side nav toggle button slot.
+ *
+ * This allows us to determine if the toggle button is rendered inside or outside of its slot.
+ */
+export declare const SideNavToggleButtonSlotProvider: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;

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

@@ -8,7 +8,7 @@ import React from 'react';
  *
  * Wrapper for the top navigation actions on the inline-start (left) side of the top navigation.
  */
-export declare function TopNavStart({ children, testId, }: {
+export declare function TopNavStart({ children, testId, sideNavToggleButton, }: {
     /**
      * The content of the layout area.
      *
@@ -19,4 +19,15 @@ export declare function TopNavStart({ children, testId, }: {
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * Slot for the side nav toggle button.
+     *
+     * You should only render `<SideNavToggleButton>` inside this slot, not as a child.
+     *
+     * After `platform_dst_nav4_full_height_sidebar_api_changes` rolls out,
+     * this prop will become required.
+     *
+     * Consumers that do not need a toggle button can explicitly pass `null`.
+     */
+    sideNavToggleButton?: React.ReactNode;
 }): JSX.Element;

package/dist/types-ts4.5/ui/page-layout/side-nav/toggle-button-context.d.ts

@@ -14,3 +14,7 @@ export declare const SideNavToggleButtonElement: import("react").Context<HTMLBut
  *  is lazy loaded, which happens in Jira and Confluence), which would prevent the event listeners from being set up.
  */
 export declare const SideNavToggleButtonAttachRef: import("react").Context<(newVal: HTMLButtonElement | null) => void>;
+/**
+ * Used to check if the SideNavToggleButton is rendered inside of its slot in `TopNavStart`.
+ */
+export declare const SideNavToggleButtonSlotContext: import("react").Context<boolean>;

package/dist/types-ts4.5/ui/page-layout/side-nav/toggle-button-provider.d.ts

@@ -15,3 +15,11 @@ import React from 'react';
 export declare const SideNavToggleButtonProvider: ({ children }: {
     children: React.ReactNode;
 }) => React.JSX.Element;
+/**
+ * Provider for the side nav toggle button slot.
+ *
+ * This allows us to determine if the toggle button is rendered inside or outside of its slot.
+ */
+export declare const SideNavToggleButtonSlotProvider: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;

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

@@ -8,7 +8,7 @@ import React from 'react';
  *
  * Wrapper for the top navigation actions on the inline-start (left) side of the top navigation.
  */
-export declare function TopNavStart({ children, testId, }: {
+export declare function TopNavStart({ children, testId, sideNavToggleButton, }: {
     /**
      * The content of the layout area.
      *
@@ -19,4 +19,15 @@ export declare function TopNavStart({ children, testId, }: {
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * Slot for the side nav toggle button.
+     *
+     * You should only render `<SideNavToggleButton>` inside this slot, not as a child.
+     *
+     * After `platform_dst_nav4_full_height_sidebar_api_changes` rolls out,
+     * this prop will become required.
+     *
+     * Consumers that do not need a toggle button can explicitly pass `null`.
+     */
+    sideNavToggleButton?: React.ReactNode;
 }): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "2.7.0",
+	"version": "2.8.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -186,6 +186,9 @@
 		"navx-full-height-sidebar": {
 			"type": "boolean"
 		},
+		"platform_dst_nav4_full_height_sidebar_api_changes": {
+			"type": "boolean"
+		},
 		"platform_dst_nav4_menu_section_heading_a11y": {
 			"type": "boolean"
 		},