@atlaskit/navigation-system 4.2.0 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlassian/navigation-system
 
+## 4.3.0
+
+### Minor Changes
+
+- [`4bb7b31bfda3b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4bb7b31bfda3b) -
+  Refactors changes that were previously behind `platform_dst_nav4_full_height_sidebar_api_changes`
+  to now be behind `platform_dst_nav4_side_nav_default_collapsed_api`. After rollout, both the new
+  and legacy APIs for defining side nav initial state will be supported.
+
 ## 4.2.0
 
 ### Minor Changes

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

@@ -36,8 +36,7 @@ function Root(_ref) {
     _ref$skipLinksLabel = _ref.skipLinksLabel,
     skipLinksLabel = _ref$skipLinksLabel === void 0 ? 'Skip to:' : _ref$skipLinksLabel,
     testId = _ref.testId,
-    _ref$defaultSideNavCo = _ref.defaultSideNavCollapsed,
-    defaultSideNavCollapsed = _ref$defaultSideNavCo === void 0 ? false : _ref$defaultSideNavCo;
+    defaultSideNavCollapsed = _ref.defaultSideNavCollapsed;
   var ref = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     if (process.env.NODE_ENV !== 'production') {

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

@@ -260,8 +260,8 @@ function SideNavInternal(_ref) {
     trigger: 'click-outside-on-mobile'
   });
   (0, _react.useEffect)(function () {
-    if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_full_height_sidebar_api_changes')) {
-      // We are passing initial state to the Root now, so no initial sync is required
+    if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_default_collapsed_api')) {
+      // This is the old version of the hook, so we skip it when the flag is enabled
       return;
     }
 
@@ -274,6 +274,28 @@ function SideNavInternal(_ref) {
       lastTrigger: null
     });
   }, [initialDefaultCollapsed, setSideNavState]);
+
+  // Moving to `useLayoutEffect` so that there's no visual shift in non-SSR environments when using legacy API
+  // For SSR the new API is still necessary
+  (0, _react.useLayoutEffect)(function () {
+    if (!(0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_default_collapsed_api')) {
+      // This is the new version of the hook, so we skip it when the flag is disabled
+      return;
+    }
+    if (sideNavState !== null) {
+      // Only need to do an initial sync if it hasn't been initialized from Root
+      return;
+    }
+
+    // Sync the visibility in context (provided in `<Root>`) with the local `defaultCollapsed` prop provided to `SideNav`
+    // after SSR hydration. This should only run once, after the initial render on the client.
+    setSideNavState({
+      desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
+      mobile: 'collapsed',
+      flyout: 'closed',
+      lastTrigger: null
+    });
+  }, [initialDefaultCollapsed, setSideNavState, sideNavState]);
   var handleExpand = (0, _react.useCallback)(function (_ref2) {
     var screen = _ref2.screen,
       trigger = _ref2.trigger;

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

@@ -20,6 +20,7 @@ var _migration = require("../../top-nav-items/themed/migration");
 var _toggleButtonContext = require("./toggle-button-context");
 var _useSideNavVisibility2 = require("./use-side-nav-visibility");
 var _useToggleSideNav = require("./use-toggle-side-nav");
+var _visibilityContext = require("./visibility-context");
 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); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -51,10 +52,11 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
     }),
     isSideNavExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop,
     isSideNavExpandedOnMobile = _useSideNavVisibility.isExpandedOnMobile;
+  var sideNavState = (0, _react.useContext)(_visibilityContext.SideNavVisibilityState);
 
-  // When `platform_dst_nav4_full_height_sidebar_api_changes` is enabled,
-  // we default to the desktop state for SSR
-  var _useState = (0, _react.useState)((0, _platformFeatureFlags.fg)('platform_dst_nav4_full_height_sidebar_api_changes') ? isSideNavExpandedOnDesktop : !defaultCollapsed),
+  // When default state is provided to `Root` the state in context will already be
+  // initialized in SSR
+  var _useState = (0, _react.useState)(sideNavState === null || !(0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_default_collapsed_api') ? !defaultCollapsed : isSideNavExpandedOnDesktop),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isSideNavExpanded = _useState2[0],
     setIsSideNavExpanded = _useState2[1];

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

@@ -17,7 +17,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var SideNavVisibilityProvider = exports.SideNavVisibilityProvider = function SideNavVisibilityProvider(_ref) {
   var children = _ref.children,
     defaultCollapsed = _ref.defaultCollapsed;
-  var initialState = (0, _platformFeatureFlags.fg)('platform_dst_nav4_full_height_sidebar_api_changes') ? {
+  var initialState = typeof defaultCollapsed === 'boolean' && (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_default_collapsed_api') ? {
     desktop: defaultCollapsed ? 'collapsed' : 'expanded',
     mobile: 'collapsed',
     flyout: 'closed',

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

@@ -16,6 +16,7 @@ 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 _useSideNavVisibility3 = require("../side-nav/use-side-nav-visibility");
+var _visibilityContext = require("../side-nav/visibility-context");
 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); }
 /**
  * Firefox does support these reorder animations, but only partially enabling layout animations would look odd.
@@ -180,14 +181,22 @@ function TopNavStart(_ref3) {
 
   // Used to prevent the reorder animations from running on the initial render.
   var isFirstRenderRef = (0, _react.useRef)(true);
+  var sideNavState = (0, _react.useContext)(_visibilityContext.SideNavVisibilityState);
   (0, _react.useEffect)(function () {
     if (!(0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
       return;
     }
+
+    // Ignore renders until the side nav state is initialized
+    // So that apps using the legacy API for setting side nav default state do not see
+    // animations when they shouldn't
+    if (sideNavState === null) {
+      return;
+    }
     if (isFirstRenderRef.current) {
       isFirstRenderRef.current = false;
     }
-  }, []);
+  }, [sideNavState]);
 
   // Using a stable ref to avoid re-running the animation layout effect when the toggle button prop value changes, which
   // can happen a lot (e.g. if the parent re-renders)

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

@@ -26,7 +26,7 @@ export function Root({
   UNSAFE_dangerouslyHoistSlotSizes = false,
   skipLinksLabel = 'Skip to:',
   testId,
-  defaultSideNavCollapsed = false
+  defaultSideNavCollapsed
 }) {
   const ref = useRef(null);
   useEffect(() => {

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

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./side-nav.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { flushSync } from 'react-dom';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
@@ -243,8 +243,8 @@ function SideNavInternal({
     trigger: 'click-outside-on-mobile'
   });
   useEffect(() => {
-    if (fg('platform_dst_nav4_full_height_sidebar_api_changes')) {
-      // We are passing initial state to the Root now, so no initial sync is required
+    if (fg('platform_dst_nav4_side_nav_default_collapsed_api')) {
+      // This is the old version of the hook, so we skip it when the flag is enabled
       return;
     }
 
@@ -257,6 +257,28 @@ function SideNavInternal({
       lastTrigger: null
     });
   }, [initialDefaultCollapsed, setSideNavState]);
+
+  // Moving to `useLayoutEffect` so that there's no visual shift in non-SSR environments when using legacy API
+  // For SSR the new API is still necessary
+  useLayoutEffect(() => {
+    if (!fg('platform_dst_nav4_side_nav_default_collapsed_api')) {
+      // This is the new version of the hook, so we skip it when the flag is disabled
+      return;
+    }
+    if (sideNavState !== null) {
+      // Only need to do an initial sync if it hasn't been initialized from Root
+      return;
+    }
+
+    // Sync the visibility in context (provided in `<Root>`) with the local `defaultCollapsed` prop provided to `SideNav`
+    // after SSR hydration. This should only run once, after the initial render on the client.
+    setSideNavState({
+      desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
+      mobile: 'collapsed',
+      flyout: 'closed',
+      lastTrigger: null
+    });
+  }, [initialDefaultCollapsed, setSideNavState, sideNavState]);
   const handleExpand = useCallback(({
     screen,
     trigger

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

@@ -10,6 +10,7 @@ import { IconButton } from '../../top-nav-items/themed/migration';
 import { SideNavToggleButtonAttachRef } from './toggle-button-context';
 import { useSideNavVisibility } from './use-side-nav-visibility';
 import { useToggleSideNav } from './use-toggle-side-nav';
+import { SideNavVisibilityState } from './visibility-context';
 const toggleButtonTooltipOptions = {
   // We're disabling pointer events on the tooltip to prevent it from blocking mouse events, so that the side nav flyout stays open
   // when moving the mouse from the top bar to the side nav.
@@ -39,10 +40,11 @@ export const SideNavToggleButton = ({
   } = useSideNavVisibility({
     defaultCollapsed
   });
+  const sideNavState = useContext(SideNavVisibilityState);
 
-  // When `platform_dst_nav4_full_height_sidebar_api_changes` is enabled,
-  // we default to the desktop state for SSR
-  const [isSideNavExpanded, setIsSideNavExpanded] = useState(fg('platform_dst_nav4_full_height_sidebar_api_changes') ? isSideNavExpandedOnDesktop : !defaultCollapsed);
+  // When default state is provided to `Root` the state in context will already be
+  // initialized in SSR
+  const [isSideNavExpanded, setIsSideNavExpanded] = useState(sideNavState === null || !fg('platform_dst_nav4_side_nav_default_collapsed_api') ? !defaultCollapsed : isSideNavExpandedOnDesktop);
   const ref = useContext(SideNavToggleButtonAttachRef);
   const elementRef = useRef(null);
 

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

@@ -9,7 +9,7 @@ export const SideNavVisibilityProvider = ({
   children,
   defaultCollapsed
 }) => {
-  const initialState = fg('platform_dst_nav4_full_height_sidebar_api_changes') ? {
+  const initialState = typeof defaultCollapsed === 'boolean' && fg('platform_dst_nav4_side_nav_default_collapsed_api') ? {
     desktop: defaultCollapsed ? 'collapsed' : 'expanded',
     mobile: 'collapsed',
     flyout: 'closed',

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

@@ -7,6 +7,7 @@ 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 { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
+import { SideNavVisibilityState } from '../side-nav/visibility-context';
 
 /**
  * Firefox does support these reorder animations, but only partially enabling layout animations would look odd.
@@ -170,14 +171,22 @@ export function TopNavStart({
 
   // Used to prevent the reorder animations from running on the initial render.
   const isFirstRenderRef = useRef(true);
+  const sideNavState = useContext(SideNavVisibilityState);
   useEffect(() => {
     if (!fg('navx-full-height-sidebar')) {
       return;
     }
+
+    // Ignore renders until the side nav state is initialized
+    // So that apps using the legacy API for setting side nav default state do not see
+    // animations when they shouldn't
+    if (sideNavState === null) {
+      return;
+    }
     if (isFirstRenderRef.current) {
       isFirstRenderRef.current = false;
     }
-  }, []);
+  }, [sideNavState]);
 
   // Using a stable ref to avoid re-running the animation layout effect when the toggle button prop value changes, which
   // can happen a lot (e.g. if the parent re-renders)

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

@@ -28,8 +28,7 @@ export function Root(_ref) {
     _ref$skipLinksLabel = _ref.skipLinksLabel,
     skipLinksLabel = _ref$skipLinksLabel === void 0 ? 'Skip to:' : _ref$skipLinksLabel,
     testId = _ref.testId,
-    _ref$defaultSideNavCo = _ref.defaultSideNavCollapsed,
-    defaultSideNavCollapsed = _ref$defaultSideNavCo === void 0 ? false : _ref$defaultSideNavCo;
+    defaultSideNavCollapsed = _ref.defaultSideNavCollapsed;
   var ref = useRef(null);
   useEffect(function () {
     if (process.env.NODE_ENV !== 'production') {

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

@@ -7,7 +7,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { flushSync } from 'react-dom';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
@@ -251,8 +251,8 @@ function SideNavInternal(_ref) {
     trigger: 'click-outside-on-mobile'
   });
   useEffect(function () {
-    if (fg('platform_dst_nav4_full_height_sidebar_api_changes')) {
-      // We are passing initial state to the Root now, so no initial sync is required
+    if (fg('platform_dst_nav4_side_nav_default_collapsed_api')) {
+      // This is the old version of the hook, so we skip it when the flag is enabled
       return;
     }
 
@@ -265,6 +265,28 @@ function SideNavInternal(_ref) {
       lastTrigger: null
     });
   }, [initialDefaultCollapsed, setSideNavState]);
+
+  // Moving to `useLayoutEffect` so that there's no visual shift in non-SSR environments when using legacy API
+  // For SSR the new API is still necessary
+  useLayoutEffect(function () {
+    if (!fg('platform_dst_nav4_side_nav_default_collapsed_api')) {
+      // This is the new version of the hook, so we skip it when the flag is disabled
+      return;
+    }
+    if (sideNavState !== null) {
+      // Only need to do an initial sync if it hasn't been initialized from Root
+      return;
+    }
+
+    // Sync the visibility in context (provided in `<Root>`) with the local `defaultCollapsed` prop provided to `SideNav`
+    // after SSR hydration. This should only run once, after the initial render on the client.
+    setSideNavState({
+      desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
+      mobile: 'collapsed',
+      flyout: 'closed',
+      lastTrigger: null
+    });
+  }, [initialDefaultCollapsed, setSideNavState, sideNavState]);
   var handleExpand = useCallback(function (_ref2) {
     var screen = _ref2.screen,
       trigger = _ref2.trigger;

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

@@ -14,6 +14,7 @@ import { IconButton } from '../../top-nav-items/themed/migration';
 import { SideNavToggleButtonAttachRef } from './toggle-button-context';
 import { useSideNavVisibility } from './use-side-nav-visibility';
 import { useToggleSideNav } from './use-toggle-side-nav';
+import { SideNavVisibilityState } from './visibility-context';
 var toggleButtonTooltipOptions = {
   // We're disabling pointer events on the tooltip to prevent it from blocking mouse events, so that the side nav flyout stays open
   // when moving the mouse from the top bar to the side nav.
@@ -42,10 +43,11 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
     }),
     isSideNavExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop,
     isSideNavExpandedOnMobile = _useSideNavVisibility.isExpandedOnMobile;
+  var sideNavState = useContext(SideNavVisibilityState);
 
-  // When `platform_dst_nav4_full_height_sidebar_api_changes` is enabled,
-  // we default to the desktop state for SSR
-  var _useState = useState(fg('platform_dst_nav4_full_height_sidebar_api_changes') ? isSideNavExpandedOnDesktop : !defaultCollapsed),
+  // When default state is provided to `Root` the state in context will already be
+  // initialized in SSR
+  var _useState = useState(sideNavState === null || !fg('platform_dst_nav4_side_nav_default_collapsed_api') ? !defaultCollapsed : isSideNavExpandedOnDesktop),
     _useState2 = _slicedToArray(_useState, 2),
     isSideNavExpanded = _useState2[0],
     setIsSideNavExpanded = _useState2[1];

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

@@ -9,7 +9,7 @@ import { SetSideNavVisibilityState, SideNavVisibilityState } from './visibility-
 export var SideNavVisibilityProvider = function SideNavVisibilityProvider(_ref) {
   var children = _ref.children,
     defaultCollapsed = _ref.defaultCollapsed;
-  var initialState = fg('platform_dst_nav4_full_height_sidebar_api_changes') ? {
+  var initialState = typeof defaultCollapsed === 'boolean' && fg('platform_dst_nav4_side_nav_default_collapsed_api') ? {
     desktop: defaultCollapsed ? 'collapsed' : 'expanded',
     mobile: 'collapsed',
     flyout: 'closed',

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

@@ -8,6 +8,7 @@ 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 { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
+import { SideNavVisibilityState } from '../side-nav/visibility-context';
 
 /**
  * Firefox does support these reorder animations, but only partially enabling layout animations would look odd.
@@ -172,14 +173,22 @@ export function TopNavStart(_ref3) {
 
   // Used to prevent the reorder animations from running on the initial render.
   var isFirstRenderRef = useRef(true);
+  var sideNavState = useContext(SideNavVisibilityState);
   useEffect(function () {
     if (!fg('navx-full-height-sidebar')) {
       return;
     }
+
+    // Ignore renders until the side nav state is initialized
+    // So that apps using the legacy API for setting side nav default state do not see
+    // animations when they shouldn't
+    if (sideNavState === null) {
+      return;
+    }
     if (isFirstRenderRef.current) {
       isFirstRenderRef.current = false;
     }
-  }, []);
+  }, [sideNavState]);
 
   // Using a stable ref to avoid re-running the animation layout effect when the toggle button prop value changes, which
   // can happen a lot (e.g. if the parent re-renders)

package/dist/types/ui/page-layout/root.d.ts

@@ -44,7 +44,7 @@ export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes,
      * persisted state using the `onCollapse` and `onExpand` callbacks, to ensure it is up to date
      * when the app is reloaded.
      *
-     * __Note:__ This prop will only work when the `platform_dst_nav4_full_height_sidebar_api_changes` gate is enabled.
+     * __Note:__ When provided, the `defaultCollapsed` props on `SideNav` and `SideNavToggleButton` will be ignored.
      */
     defaultSideNavCollapsed?: boolean;
 }): JSX.Element;

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

@@ -15,7 +15,7 @@ type SideNavProps = CommonSlotProps & {
      * @deprecated
      *
      * This prop is being replaced by `defaultSideNavCollapsed` on the `Root` element,
-     * and will be removed after `platform_dst_nav4_full_height_sidebar_api_changes` is cleaned up.
+     * and will be removed in the future.
      *
      * ---
      *

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

@@ -17,7 +17,7 @@ export declare const SideNavToggleButton: ({ defaultCollapsed, expandLabel, coll
      * @deprecated
      *
      * This prop is being replaced by `defaultSideNavCollapsed` on the `Root` element,
-     * and will be removed after `platform_dst_nav4_full_height_sidebar_api_changes` is cleaned up.
+     * and will be removed in the future.
      *
      * ---
      *

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

@@ -4,5 +4,5 @@ import React from 'react';
  */
 export declare const SideNavVisibilityProvider: ({ children, defaultCollapsed, }: {
     children: React.ReactNode;
-    defaultCollapsed: boolean;
+    defaultCollapsed?: boolean;
 }) => React.JSX.Element;

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

@@ -19,7 +19,7 @@ type TopNavStartProps = {
      *
      * You should only render `<SideNavToggleButton>` inside this slot, not as a child.
      *
-     * After `platform_dst_nav4_full_height_sidebar_api_changes` rolls out,
+     * After `platform_dst_nav4_side_nav_toggle_button_slot` rolls out,
      * this prop will become required.
      *
      * Consumers that do not need a toggle button can explicitly pass `null`.

package/dist/types-ts4.5/ui/page-layout/root.d.ts

@@ -44,7 +44,7 @@ export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes,
      * persisted state using the `onCollapse` and `onExpand` callbacks, to ensure it is up to date
      * when the app is reloaded.
      *
-     * __Note:__ This prop will only work when the `platform_dst_nav4_full_height_sidebar_api_changes` gate is enabled.
+     * __Note:__ When provided, the `defaultCollapsed` props on `SideNav` and `SideNavToggleButton` will be ignored.
      */
     defaultSideNavCollapsed?: boolean;
 }): JSX.Element;

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

@@ -15,7 +15,7 @@ type SideNavProps = CommonSlotProps & {
      * @deprecated
      *
      * This prop is being replaced by `defaultSideNavCollapsed` on the `Root` element,
-     * and will be removed after `platform_dst_nav4_full_height_sidebar_api_changes` is cleaned up.
+     * and will be removed in the future.
      *
      * ---
      *

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

@@ -17,7 +17,7 @@ export declare const SideNavToggleButton: ({ defaultCollapsed, expandLabel, coll
      * @deprecated
      *
      * This prop is being replaced by `defaultSideNavCollapsed` on the `Root` element,
-     * and will be removed after `platform_dst_nav4_full_height_sidebar_api_changes` is cleaned up.
+     * and will be removed in the future.
      *
      * ---
      *

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

@@ -4,5 +4,5 @@ import React from 'react';
  */
 export declare const SideNavVisibilityProvider: ({ children, defaultCollapsed, }: {
     children: React.ReactNode;
-    defaultCollapsed: boolean;
+    defaultCollapsed?: boolean;
 }) => React.JSX.Element;

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

@@ -19,7 +19,7 @@ type TopNavStartProps = {
      *
      * You should only render `<SideNavToggleButton>` inside this slot, not as a child.
      *
-     * After `platform_dst_nav4_full_height_sidebar_api_changes` rolls out,
+     * After `platform_dst_nav4_side_nav_toggle_button_slot` rolls out,
      * this prop will become required.
      *
      * Consumers that do not need a toggle button can explicitly pass `null`.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "4.2.0",
+	"version": "4.3.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -145,6 +145,9 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform_dst_nav4_side_nav_default_collapsed_api": {
+			"type": "boolean"
+		},
 		"platform_dst_nav4_side_nav_toggle_ref_fix": {
 			"type": "boolean"
 		},
@@ -170,9 +173,6 @@
 		"team25-eu-jira-logo-updates-csm-jsm": {
 			"type": "boolean"
 		},
-		"platform_dst_nav4_full_height_sidebar_api_changes": {
-			"type": "boolean"
-		},
 		"platform-dst-tooltip-shortcuts": {
 			"type": "boolean"
 		},