@atlaskit/navigation-system 2.9.0 → 2.10.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlassian/navigation-system
 
+## 2.10.1
+
+### Patch Changes
+
+- [`248faa32d4835`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/248faa32d4835) -
+  Internal changes to how borders are applied.
+- Updated dependencies
+
+## 2.10.0
+
+### Minor Changes
+
+- [`8c5f4864d7d4c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8c5f4864d7d4c) -
+  Adds `defaultSideNavCollapsed` prop to `Root` which replaces the `defaultCollapsed` props on
+  `SideNav` and `SideNavToggleButton`. This prop is enabled behind the
+  `platform_dst_nav4_full_height_sidebar_api_changes` feature gate. When this gate is cleaned up the
+  `defaultCollapsed` props will be removed.
+
 ## 2.9.0
 
 ### Minor Changes

package/constellation/index/examples.mdx

@@ -31,7 +31,8 @@ For ready-made navigation experiences see
 
 - <a href="https://go.atlassian.com/nav4-interactive-example" target="_blank">
   	Full screen interactive example
-  </a> (only available for Atlassian employees at this stage).
+  </a>
+  (only available for Atlassian employees at this stage).
 
 ## Related
 

package/dist/cjs/ui/menu-section/divider.compiled.css

@@ -1,4 +1,4 @@
 
 ._h7alglyw{border-inline:none}._179rglyw{border-block-end:none}
-._mqm2pp12{border-block-start:var(--_18x9sjc)}
+._mqm2kzr3{border-block-start:var(--_1hbmzy2)}
 ._1bsb1osq{width:100%}

package/dist/cjs/ui/menu-section/divider.js

@@ -27,9 +27,9 @@ var Divider = exports.Divider = function Divider() {
      * but it probably isn't necessary.
      */
     role: "none",
-    className: (0, _runtime.ax)(["_h7alglyw _179rglyw _mqm2pp12 _1bsb1osq"]),
+    className: (0, _runtime.ax)(["_h7alglyw _179rglyw _mqm2kzr3 _1bsb1osq"]),
     style: {
-      "--_18x9sjc": (0, _runtime.ix)("1px solid ".concat("var(--ds-border, #091E4224)"))
+      "--_1hbmzy2": (0, _runtime.ix)("var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #091E4224)"))
     }
   });
 };

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

@@ -14,5 +14,5 @@
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b54rrg{width:var(--n_pnlRsz,var(--n_pnlW))}}
-@media (min-width:64rem){._1w6ezgxb{border-inline-start:1px solid var(--ds-border,#091e4224)}._scbpglyw{box-shadow:none}._4ap3vuon{background-color:var(--ds-surface,#fff)}}
+@media (min-width:64rem){._1w6e7r9e{border-inline-start:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._scbpglyw{box-shadow:none}._4ap3vuon{background-color:var(--ds-surface,#fff)}}
 @media (min-width:90rem){._1dhy1c6w{grid-area:panel}._9sns1wug{z-index:auto}}

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

@@ -36,7 +36,7 @@ var fallbackDefaultWidth = 365;
 var fallbackResizeMinWidth = 400;
 var styles = {
   root: "_nd5l1b6c _10fph9n0 _vchhusvi _1pbykb7n _4t3ieqxy _kqsw1if8 _152timx3 _bfhk1bhr _1bsb1dxx _14b54rrg _4ap3vuon _1dhy1c6w _9sns1wug",
-  border: "_191wglyw _16qs1cd0 _1w6ezgxb _scbpglyw",
+  border: "_191wglyw _16qs1cd0 _1w6e7r9e _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
   hidden: "_1e0cglyw"
 };

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

@@ -35,7 +35,9 @@ function Root(_ref) {
     UNSAFE_dangerouslyHoistSlotSizes = _ref$UNSAFE_dangerous === void 0 ? false : _ref$UNSAFE_dangerous,
     _ref$skipLinksLabel = _ref.skipLinksLabel,
     skipLinksLabel = _ref$skipLinksLabel === void 0 ? 'Skip to:' : _ref$skipLinksLabel,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    _ref$defaultSideNavCo = _ref.defaultSideNavCollapsed,
+    defaultSideNavCollapsed = _ref$defaultSideNavCo === void 0 ? false : _ref$defaultSideNavCo;
   var ref = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     if (process.env.NODE_ENV !== 'production') {
@@ -50,7 +52,9 @@ function Root(_ref) {
       }
     }
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_visibilityProvider.SideNavVisibilityProvider, null, /*#__PURE__*/_react.default.createElement(_toggleButtonProvider.SideNavToggleButtonProvider, null, /*#__PURE__*/_react.default.createElement(_elementContext.SideNavElementProvider, null, /*#__PURE__*/_react.default.createElement(_topNavStartContextProvider.TopNavStartProvider, null, /*#__PURE__*/_react.default.createElement(_openLayerObserver.OpenLayerObserver, null, /*#__PURE__*/_react.default.createElement(_hoistSlotSizesContext.DangerouslyHoistSlotSizes.Provider, {
+  return /*#__PURE__*/_react.default.createElement(_visibilityProvider.SideNavVisibilityProvider, {
+    defaultCollapsed: defaultSideNavCollapsed
+  }, /*#__PURE__*/_react.default.createElement(_toggleButtonProvider.SideNavToggleButtonProvider, null, /*#__PURE__*/_react.default.createElement(_elementContext.SideNavElementProvider, null, /*#__PURE__*/_react.default.createElement(_topNavStartContextProvider.TopNavStartProvider, null, /*#__PURE__*/_react.default.createElement(_openLayerObserver.OpenLayerObserver, null, /*#__PURE__*/_react.default.createElement(_hoistSlotSizesContext.DangerouslyHoistSlotSizes.Provider, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/_react.default.createElement(_skipLinksProvider.SkipLinksProvider, {
     label: skipLinksLabel,

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

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

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

@@ -52,8 +52,8 @@ function getResizeBounds() {
 var openLayerObserverSideNavNamespace = 'side-nav';
 var styles = {
   root: "_nd5l1b6c _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _4ap3vuon _scbpglyw",
-  oldBorder: "_t51zzgxb",
-  newBorder: "_191wglyw _t51zglyw _p5clzgxb",
+  oldBorder: "_t51z7r9e",
+  newBorder: "_191wglyw _t51zglyw _p5cl7r9e",
   newBorderFlyoutOpen: "_p5clglyw",
   flyoutOpen: "_qiln1gzg _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
@@ -247,6 +247,11 @@ 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
+      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({

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

@@ -53,7 +53,10 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
     }),
     isSideNavExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop,
     isSideNavExpandedOnMobile = _useSideNavVisibility.isExpandedOnMobile;
-  var _useState = (0, _react.useState)(!defaultCollapsed),
+
+  // 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),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isSideNavExpanded = _useState2[0],
     setIsSideNavExpanded = _useState2[1];

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

@@ -8,15 +8,24 @@ Object.defineProperty(exports, "__esModule", {
 exports.SideNavVisibilityProvider = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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); }
 /**
  * Manages the side nav visibility state and provides the context.
  */
 var SideNavVisibilityProvider = exports.SideNavVisibilityProvider = function SideNavVisibilityProvider(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    defaultCollapsed = _ref.defaultCollapsed;
+  var initialState = (0, _platformFeatureFlags.fg)('platform_dst_nav4_full_height_sidebar_api_changes') ? {
+    desktop: defaultCollapsed ? 'collapsed' : 'expanded',
+    mobile: 'collapsed',
+    flyout: 'closed',
+    lastTrigger: null
+  } : null;
+
   // Defaults to null so we can determine if the value has been set yet (for SSR)
-  var _useState = (0, _react.useState)(null),
+  var _useState = (0, _react.useState)(initialState),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     sideNavState = _useState2[0],
     setSideNavState = _useState2[1];

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

@@ -2,8 +2,8 @@
 ._nd5l8cbt{grid-area:top-bar}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
-._179rglyw{border-block-end:none}
-._179rzgxb{border-block-end:1px solid var(--ds-border,#091e4224)}._152t1nws{inset-block-start:var(--n_bnrM,0)}
+._179r7r9e{border-block-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
+._179rglyw{border-block-end:none}._152t1nws{inset-block-start:var(--n_bnrM,0)}
 ._1bsb1osq{width:100%}
 ._1e0c11p5{display:grid}
 ._1pbyegat{z-index:4}

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

@@ -32,7 +32,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * - The background sits below the expanded side nav
  */
 var styles = {
-  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179rzgxb _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
+  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179r7r9e _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
   fullHeightSidebar: "_179rglyw _bozgze3t _y4tiutpp _bfhkglyw _lcxvglyw _pdlmutpp",
   fullHeightSidebarExpanded: "_1rqt15p1"
 };
@@ -43,7 +43,7 @@ var styles = {
  * This is on a lower z-index than the expanded side nav, and is separate to the top nav items which are above the expanded side nav.
  */
 var backgroundStyles = {
-  root: "_nd5l8cbt _179rzgxb _1bsb1osq _4t3i1osq _bfhkvuon _vchhusvi _152t1nws _kqsw1if8 _lcxvglyw _1pbyegat",
+  root: "_nd5l8cbt _179r7r9e _1bsb1osq _4t3i1osq _bfhkvuon _vchhusvi _152t1nws _kqsw1if8 _lcxvglyw _1pbyegat",
   sideNavExpanded: "_hyzqcs5v"
 };
 

package/dist/es2019/ui/menu-section/divider.compiled.css

@@ -1,4 +1,4 @@
 
 ._h7alglyw{border-inline:none}._179rglyw{border-block-end:none}
-._mqm2zgxb{border-block-start:1px solid var(--ds-border,#091e4224)}
+._mqm27r9e{border-block-start:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
 ._1bsb1osq{width:100%}

package/dist/es2019/ui/menu-section/divider.js

@@ -18,5 +18,5 @@ export const Divider = () => /*#__PURE__*/React.createElement("hr", {
    * but it probably isn't necessary.
    */
   role: "none",
-  className: ax(["_h7alglyw _179rglyw _mqm2zgxb _1bsb1osq"])
+  className: ax(["_h7alglyw _179rglyw _mqm27r9e _1bsb1osq"])
 });

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

@@ -14,5 +14,5 @@
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b54rrg{width:var(--n_pnlRsz,var(--n_pnlW))}}
-@media (min-width:64rem){._1w6ezgxb{border-inline-start:1px solid var(--ds-border,#091e4224)}._scbpglyw{box-shadow:none}._4ap3vuon{background-color:var(--ds-surface,#fff)}}
+@media (min-width:64rem){._1w6e7r9e{border-inline-start:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._scbpglyw{box-shadow:none}._4ap3vuon{background-color:var(--ds-surface,#fff)}}
 @media (min-width:90rem){._1dhy1c6w{grid-area:panel}._9sns1wug{z-index:auto}}

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

@@ -25,7 +25,7 @@ const fallbackDefaultWidth = 365;
 const fallbackResizeMinWidth = 400;
 const styles = {
   root: "_nd5l1b6c _10fph9n0 _vchhusvi _1pbykb7n _4t3ieqxy _kqsw1if8 _152timx3 _bfhk1bhr _1bsb1dxx _14b54rrg _4ap3vuon _1dhy1c6w _9sns1wug",
-  border: "_191wglyw _16qs1cd0 _1w6ezgxb _scbpglyw",
+  border: "_191wglyw _16qs1cd0 _1w6e7r9e _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
   hidden: "_1e0cglyw"
 };

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

@@ -25,7 +25,8 @@ export function Root({
   xcss,
   UNSAFE_dangerouslyHoistSlotSizes = false,
   skipLinksLabel = 'Skip to:',
-  testId
+  testId,
+  defaultSideNavCollapsed = false
 }) {
   const ref = useRef(null);
   useEffect(() => {
@@ -50,7 +51,9 @@ This message will not be displayed in production.
       }
     }
   }, []);
-  return /*#__PURE__*/React.createElement(SideNavVisibilityProvider, null, /*#__PURE__*/React.createElement(SideNavToggleButtonProvider, null, /*#__PURE__*/React.createElement(SideNavElementProvider, null, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
+  return /*#__PURE__*/React.createElement(SideNavVisibilityProvider, {
+    defaultCollapsed: defaultSideNavCollapsed
+  }, /*#__PURE__*/React.createElement(SideNavToggleButtonProvider, null, /*#__PURE__*/React.createElement(SideNavElementProvider, null, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/React.createElement(SkipLinksProvider, {
     label: skipLinksLabel,

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

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

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

@@ -39,8 +39,8 @@ function getResizeBounds() {
 const openLayerObserverSideNavNamespace = 'side-nav';
 const styles = {
   root: "_nd5l1b6c _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _4ap3vuon _scbpglyw",
-  oldBorder: "_t51zzgxb",
-  newBorder: "_191wglyw _t51zglyw _p5clzgxb",
+  oldBorder: "_t51z7r9e",
+  newBorder: "_191wglyw _t51zglyw _p5cl7r9e",
   newBorderFlyoutOpen: "_p5clglyw",
   flyoutOpen: "_qiln1gzg _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
@@ -230,6 +230,11 @@ 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
+      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({

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

@@ -44,7 +44,10 @@ export const SideNavToggleButton = ({
   } = useSideNavVisibility({
     defaultCollapsed
   });
-  const [isSideNavExpanded, setIsSideNavExpanded] = useState(!defaultCollapsed);
+
+  // 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);
   const ref = useContext(SideNavToggleButtonAttachRef);
   const elementRef = useRef(null);
   useEffect(() => {

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

@@ -1,14 +1,23 @@
 import React, { useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SetSideNavVisibilityState, SideNavVisibilityState } from './visibility-context';
 
 /**
  * Manages the side nav visibility state and provides the context.
  */
 export const SideNavVisibilityProvider = ({
-  children
+  children,
+  defaultCollapsed
 }) => {
+  const initialState = fg('platform_dst_nav4_full_height_sidebar_api_changes') ? {
+    desktop: defaultCollapsed ? 'collapsed' : 'expanded',
+    mobile: 'collapsed',
+    flyout: 'closed',
+    lastTrigger: null
+  } : null;
+
   // Defaults to null so we can determine if the value has been set yet (for SSR)
-  const [sideNavState, setSideNavState] = useState(null);
+  const [sideNavState, setSideNavState] = useState(initialState);
   return /*#__PURE__*/React.createElement(SideNavVisibilityState.Provider, {
     value: sideNavState
   }, /*#__PURE__*/React.createElement(SetSideNavVisibilityState.Provider, {

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

@@ -2,8 +2,8 @@
 ._nd5l8cbt{grid-area:top-bar}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
-._179rglyw{border-block-end:none}
-._179rzgxb{border-block-end:1px solid var(--ds-border,#091e4224)}._152t1nws{inset-block-start:var(--n_bnrM,0)}
+._179r7r9e{border-block-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
+._179rglyw{border-block-end:none}._152t1nws{inset-block-start:var(--n_bnrM,0)}
 ._1bsb1osq{width:100%}
 ._1e0c11p5{display:grid}
 ._1pbyegat{z-index:4}

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

@@ -21,7 +21,7 @@ import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
  * - The background sits below the expanded side nav
  */
 const styles = {
-  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179rzgxb _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
+  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179r7r9e _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
   fullHeightSidebar: "_179rglyw _bozgze3t _y4tiutpp _bfhkglyw _lcxvglyw _pdlmutpp",
   fullHeightSidebarExpanded: "_1rqt15p1"
 };
@@ -32,7 +32,7 @@ const styles = {
  * This is on a lower z-index than the expanded side nav, and is separate to the top nav items which are above the expanded side nav.
  */
 const backgroundStyles = {
-  root: "_nd5l8cbt _179rzgxb _1bsb1osq _4t3i1osq _bfhkvuon _vchhusvi _152t1nws _kqsw1if8 _lcxvglyw _1pbyegat",
+  root: "_nd5l8cbt _179r7r9e _1bsb1osq _4t3i1osq _bfhkvuon _vchhusvi _152t1nws _kqsw1if8 _lcxvglyw _1pbyegat",
   sideNavExpanded: "_hyzqcs5v"
 };
 

package/dist/esm/ui/menu-section/divider.compiled.css

@@ -1,4 +1,4 @@
 
 ._h7alglyw{border-inline:none}._179rglyw{border-block-end:none}
-._mqm2pp12{border-block-start:var(--_18x9sjc)}
+._mqm2kzr3{border-block-start:var(--_1hbmzy2)}
 ._1bsb1osq{width:100%}

package/dist/esm/ui/menu-section/divider.js

@@ -19,9 +19,9 @@ export var Divider = function Divider() {
      * but it probably isn't necessary.
      */
     role: "none",
-    className: ax(["_h7alglyw _179rglyw _mqm2pp12 _1bsb1osq"]),
+    className: ax(["_h7alglyw _179rglyw _mqm2kzr3 _1bsb1osq"]),
     style: {
-      "--_18x9sjc": ix("1px solid ".concat("var(--ds-border, #091E4224)"))
+      "--_1hbmzy2": ix("var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #091E4224)"))
     }
   });
 };

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

@@ -14,5 +14,5 @@
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b54rrg{width:var(--n_pnlRsz,var(--n_pnlW))}}
-@media (min-width:64rem){._1w6ezgxb{border-inline-start:1px solid var(--ds-border,#091e4224)}._scbpglyw{box-shadow:none}._4ap3vuon{background-color:var(--ds-surface,#fff)}}
+@media (min-width:64rem){._1w6e7r9e{border-inline-start:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._scbpglyw{box-shadow:none}._4ap3vuon{background-color:var(--ds-surface,#fff)}}
 @media (min-width:90rem){._1dhy1c6w{grid-area:panel}._9sns1wug{z-index:auto}}

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

@@ -27,7 +27,7 @@ var fallbackDefaultWidth = 365;
 var fallbackResizeMinWidth = 400;
 var styles = {
   root: "_nd5l1b6c _10fph9n0 _vchhusvi _1pbykb7n _4t3ieqxy _kqsw1if8 _152timx3 _bfhk1bhr _1bsb1dxx _14b54rrg _4ap3vuon _1dhy1c6w _9sns1wug",
-  border: "_191wglyw _16qs1cd0 _1w6ezgxb _scbpglyw",
+  border: "_191wglyw _16qs1cd0 _1w6e7r9e _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
   hidden: "_1e0cglyw"
 };

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

@@ -27,7 +27,9 @@ export function Root(_ref) {
     UNSAFE_dangerouslyHoistSlotSizes = _ref$UNSAFE_dangerous === void 0 ? false : _ref$UNSAFE_dangerous,
     _ref$skipLinksLabel = _ref.skipLinksLabel,
     skipLinksLabel = _ref$skipLinksLabel === void 0 ? 'Skip to:' : _ref$skipLinksLabel,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    _ref$defaultSideNavCo = _ref.defaultSideNavCollapsed,
+    defaultSideNavCollapsed = _ref$defaultSideNavCo === void 0 ? false : _ref$defaultSideNavCo;
   var ref = useRef(null);
   useEffect(function () {
     if (process.env.NODE_ENV !== 'production') {
@@ -42,7 +44,9 @@ export function Root(_ref) {
       }
     }
   }, []);
-  return /*#__PURE__*/React.createElement(SideNavVisibilityProvider, null, /*#__PURE__*/React.createElement(SideNavToggleButtonProvider, null, /*#__PURE__*/React.createElement(SideNavElementProvider, null, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
+  return /*#__PURE__*/React.createElement(SideNavVisibilityProvider, {
+    defaultCollapsed: defaultSideNavCollapsed
+  }, /*#__PURE__*/React.createElement(SideNavToggleButtonProvider, null, /*#__PURE__*/React.createElement(SideNavElementProvider, null, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/React.createElement(SkipLinksProvider, {
     label: skipLinksLabel,

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

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

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

@@ -43,8 +43,8 @@ function getResizeBounds() {
 var openLayerObserverSideNavNamespace = 'side-nav';
 var styles = {
   root: "_nd5l1b6c _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _4ap3vuon _scbpglyw",
-  oldBorder: "_t51zzgxb",
-  newBorder: "_191wglyw _t51zglyw _p5clzgxb",
+  oldBorder: "_t51z7r9e",
+  newBorder: "_191wglyw _t51zglyw _p5cl7r9e",
   newBorderFlyoutOpen: "_p5clglyw",
   flyoutOpen: "_qiln1gzg _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
@@ -238,6 +238,11 @@ 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
+      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({

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

@@ -44,7 +44,10 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
     }),
     isSideNavExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop,
     isSideNavExpandedOnMobile = _useSideNavVisibility.isExpandedOnMobile;
-  var _useState = useState(!defaultCollapsed),
+
+  // 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),
     _useState2 = _slicedToArray(_useState, 2),
     isSideNavExpanded = _useState2[0],
     setIsSideNavExpanded = _useState2[1];

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

@@ -1,14 +1,23 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SetSideNavVisibilityState, SideNavVisibilityState } from './visibility-context';
 
 /**
  * Manages the side nav visibility state and provides the context.
  */
 export var SideNavVisibilityProvider = function SideNavVisibilityProvider(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    defaultCollapsed = _ref.defaultCollapsed;
+  var initialState = fg('platform_dst_nav4_full_height_sidebar_api_changes') ? {
+    desktop: defaultCollapsed ? 'collapsed' : 'expanded',
+    mobile: 'collapsed',
+    flyout: 'closed',
+    lastTrigger: null
+  } : null;
+
   // Defaults to null so we can determine if the value has been set yet (for SSR)
-  var _useState = useState(null),
+  var _useState = useState(initialState),
     _useState2 = _slicedToArray(_useState, 2),
     sideNavState = _useState2[0],
     setSideNavState = _useState2[1];

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

@@ -2,8 +2,8 @@
 ._nd5l8cbt{grid-area:top-bar}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
-._179rglyw{border-block-end:none}
-._179rzgxb{border-block-end:1px solid var(--ds-border,#091e4224)}._152t1nws{inset-block-start:var(--n_bnrM,0)}
+._179r7r9e{border-block-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
+._179rglyw{border-block-end:none}._152t1nws{inset-block-start:var(--n_bnrM,0)}
 ._1bsb1osq{width:100%}
 ._1e0c11p5{display:grid}
 ._1pbyegat{z-index:4}

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

@@ -23,7 +23,7 @@ import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
  * - The background sits below the expanded side nav
  */
 var styles = {
-  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179rzgxb _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
+  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179r7r9e _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
   fullHeightSidebar: "_179rglyw _bozgze3t _y4tiutpp _bfhkglyw _lcxvglyw _pdlmutpp",
   fullHeightSidebarExpanded: "_1rqt15p1"
 };
@@ -34,7 +34,7 @@ var styles = {
  * This is on a lower z-index than the expanded side nav, and is separate to the top nav items which are above the expanded side nav.
  */
 var backgroundStyles = {
-  root: "_nd5l8cbt _179rzgxb _1bsb1osq _4t3i1osq _bfhkvuon _vchhusvi _152t1nws _kqsw1if8 _lcxvglyw _1pbyegat",
+  root: "_nd5l8cbt _179r7r9e _1bsb1osq _4t3i1osq _bfhkvuon _vchhusvi _152t1nws _kqsw1if8 _lcxvglyw _1pbyegat",
   sideNavExpanded: "_hyzqcs5v"
 };
 

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

@@ -9,7 +9,7 @@ export declare const gridRootId = "unsafe-design-system-page-layout-root";
  * The root component of the navigation system. It wraps the underlying components with the necessary contexts allowing to use certain data and hooks
  * @param skipLinksLabel - The very first element of the layout is a skip links container that can be accessed by pressing Tab button and holds the links to the other sections of the layout thus improving accessibility. This parameter defines the header text for this container
  */
-export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, testId, }: {
+export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, testId, defaultSideNavCollapsed, }: {
     /**
      * For rendering the layout areas, e.g. TopNav, SideNav, Main.
      * They should be rendered as immediate children.
@@ -35,4 +35,16 @@ export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes,
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * Whether the side nav should be collapsed by default __on desktop screens__.
+     *
+     * It is always collapsed by default for mobile screens.
+     *
+     * This value is used when the side nav is first mounted, but you should continuously update your
+     * 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.
+     */
+    defaultSideNavCollapsed?: boolean;
 }): JSX.Element;

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

@@ -12,6 +12,13 @@ type SideNavProps = CommonSlotProps & {
      */
     label?: string;
     /**
+     * @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.
+     *
+     * ---
+     *
      * Whether the side nav should be collapsed by default __on desktop screens__.
      *
      * It is always collapsed by default for mobile screens.

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

@@ -14,6 +14,13 @@ export type SideNavVisibilityChangeAnalyticsAttributes = {
  */
 export declare const SideNavToggleButton: ({ defaultCollapsed, expandLabel, collapseLabel, testId, interactionName, onClick, }: {
     /**
+     * @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.
+     *
+     * ---
+     *
      * Whether the side nav should be collapsed by default __on desktop screens__.
      *
      * It is always collapsed by default for mobile screens.

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

@@ -2,6 +2,7 @@ import React from 'react';
 /**
  * Manages the side nav visibility state and provides the context.
  */
-export declare const SideNavVisibilityProvider: ({ children }: {
+export declare const SideNavVisibilityProvider: ({ children, defaultCollapsed, }: {
     children: React.ReactNode;
+    defaultCollapsed: boolean;
 }) => React.JSX.Element;

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

@@ -9,7 +9,7 @@ export declare const gridRootId = "unsafe-design-system-page-layout-root";
  * The root component of the navigation system. It wraps the underlying components with the necessary contexts allowing to use certain data and hooks
  * @param skipLinksLabel - The very first element of the layout is a skip links container that can be accessed by pressing Tab button and holds the links to the other sections of the layout thus improving accessibility. This parameter defines the header text for this container
  */
-export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, testId, }: {
+export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, testId, defaultSideNavCollapsed, }: {
     /**
      * For rendering the layout areas, e.g. TopNav, SideNav, Main.
      * They should be rendered as immediate children.
@@ -35,4 +35,16 @@ export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes,
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * Whether the side nav should be collapsed by default __on desktop screens__.
+     *
+     * It is always collapsed by default for mobile screens.
+     *
+     * This value is used when the side nav is first mounted, but you should continuously update your
+     * 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.
+     */
+    defaultSideNavCollapsed?: boolean;
 }): JSX.Element;

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

@@ -12,6 +12,13 @@ type SideNavProps = CommonSlotProps & {
      */
     label?: string;
     /**
+     * @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.
+     *
+     * ---
+     *
      * Whether the side nav should be collapsed by default __on desktop screens__.
      *
      * It is always collapsed by default for mobile screens.

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

@@ -14,6 +14,13 @@ export type SideNavVisibilityChangeAnalyticsAttributes = {
  */
 export declare const SideNavToggleButton: ({ defaultCollapsed, expandLabel, collapseLabel, testId, interactionName, onClick, }: {
     /**
+     * @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.
+     *
+     * ---
+     *
      * Whether the side nav should be collapsed by default __on desktop screens__.
      *
      * It is always collapsed by default for mobile screens.

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

@@ -2,6 +2,7 @@ import React from 'react';
 /**
  * Manages the side nav visibility state and provides the context.
  */
-export declare const SideNavVisibilityProvider: ({ children }: {
+export declare const SideNavVisibilityProvider: ({ children, defaultCollapsed, }: {
     children: React.ReactNode;
+    defaultCollapsed: boolean;
 }) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "2.9.0",
+	"version": "2.10.1",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -71,7 +71,7 @@
 		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/ds-lib": "^5.0.0",
-		"@atlaskit/icon": "^28.1.0",
+		"@atlaskit/icon": "^28.2.0",
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/logo": "^19.7.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -102,7 +102,7 @@
 		"@atlaskit/banner": "^14.0.0",
 		"@atlaskit/breadcrumbs": "^15.3.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
-		"@atlaskit/form": "^12.6.0",
+		"@atlaskit/form": "^12.7.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/lozenge": "^13.0.0",
@@ -111,7 +111,7 @@
 		"@atlaskit/page-header": "^12.1.0",
 		"@atlaskit/page-layout": "^4.2.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
-		"@atlaskit/select": "^21.2.0",
+		"@atlaskit/select": "^21.3.0",
 		"@atlaskit/skeleton": "^2.1.0",
 		"@atlaskit/temp-nav-app-icons": "^0.10.0",
 		"@atlaskit/textfield": "^8.0.0",