@atlaskit/navigation-system 2.8.0 → 2.10.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlassian/navigation-system
 
+## 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
+
+- [`d64bfbee2463f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d64bfbee2463f) -
+  Cleans up the `platform_design_system_nav4_panel_mobile_width_fix` feature gate. Mobile panel
+  sizes are now more consistent with their desktop sizes, when screen width permits.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.8.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/components/badge-container.js

@@ -1,4 +1,4 @@
-/* badge-container.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* badge-container.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/components/list-item.js

@@ -1,4 +1,4 @@
-/* list-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* list-item.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/components/list.js

@@ -1,4 +1,4 @@
-/* list.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* list.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/components/skip-links/skip-link.js

@@ -1,4 +1,4 @@
-/* skip-link.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* skip-link.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/components/skip-links/skip-links-container.js

@@ -1,4 +1,4 @@
-/* skip-links-container.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* skip-links-container.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/ui/menu-item/container-avatar.js

@@ -1,4 +1,4 @@
-/* container-avatar.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* container-avatar.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/ui/menu-item/drag-and-drop/drag-preview.js

@@ -1,4 +1,4 @@
-/* drag-preview.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* drag-preview.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/ui/menu-item/drag-and-drop/use-menu-item-drag-and-drop.js

@@ -1,4 +1,4 @@
-/* use-menu-item-drag-and-drop.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* use-menu-item-drag-and-drop.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/ui/menu-item/drag-handle.js

@@ -1,4 +1,4 @@
-/* drag-handle.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* drag-handle.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-content.js

@@ -1,4 +1,4 @@
-/* expandable-menu-item-content.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* expandable-menu-item-content.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.compiled.css

@@ -1,4 +1,4 @@
-._12xsglyw:has(:focus-visible){--expandable-provided-elembefore-display:none}
+._12xsglyw:has(:focus-visible), ._p8btglyw:hover{--expandable-provided-elembefore-display:none}
 ._165n1bgi{--expandable-provided-elembefore-display:contents}
 ._165nglyw{--expandable-provided-elembefore-display:none}
 ._1e0c1xb2{display:var(--expandable-provided-elembefore-display)}
@@ -6,9 +6,7 @@
 ._1hl9glyw:has([aria-expanded=true][aria-haspopup=true]){--expandable-provided-elembefore-display:none}
 ._1mmi1txw{--expandable-chevron-display:flex}
 ._1mmiglyw{--expandable-chevron-display:none}
-._b31z1txw:has(:focus-visible){--expandable-chevron-display:flex}
+._b31z1txw:has(:focus-visible), ._1vnl1txw:hover{--expandable-chevron-display:flex}
 ._syaz1qo3{color:var(--ds-icon-selected,#0c66e4)}
 ._v9u71txw:has([aria-expanded=true][aria-haspopup=true]){--expandable-chevron-display:flex}
-[dir=rtl] ._1tz3r0mg{transform:scaleX(-1)}
-._1vnl1txw:hover{--expandable-chevron-display:flex}
-._p8btglyw:hover{--expandable-provided-elembefore-display:none}
+[dir=rtl] ._1tz3r0mg{transform:scaleX(-1)}

package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js

@@ -1,4 +1,4 @@
-/* expandable-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* expandable-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item.js

@@ -1,4 +1,4 @@
-/* expandable-menu-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* expandable-menu-item.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js

@@ -1,4 +1,4 @@
-/* flyout-menu-item-content.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* flyout-menu-item-content.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-trigger.js

@@ -1,4 +1,4 @@
-/* flyout-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* flyout-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/ui/menu-item/link-menu-item.js

@@ -1,4 +1,4 @@
-/* link-menu-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* link-menu-item.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/ui/menu-item/menu-item.compiled.css

@@ -1,4 +1,3 @@
-
 ._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._1r04ze3t{inset:var(--ds-space-0,0)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
@@ -93,23 +92,19 @@
 ._yv0e7dup{grid-template-columns:minmax(0,auto) 1fr minmax(0,auto) minmax(0,auto)}
 ._yv0enbh3{grid-template-columns:subgrid}
 ._12s918uv:focus-within{overflow-y:initial}
-._1brr1txw:focus-within{--actions-on-hover-display:flex}
+._1brr1txw:focus-within, ._109x1txw:hover{--actions-on-hover-display:flex}
 ._1guo18uv:focus-within{overflow-x:initial}
-._1mfcglyw:focus-within{--elem-after-display:none}
-._91nl1wug:focus-within{--actions-on-hover-width:auto}
-._iy5o1b66:focus-within{--actions-on-hover-padding:var(--ds-space-050,4px)}
-._t7p8kb7n:focus-within{--actions-on-hover-opacity:1}._109x1txw:hover{--actions-on-hover-display:flex}
+._1mfcglyw:focus-within, ._1sjuglyw:hover{--elem-after-display:none}
+._91nl1wug:focus-within, ._ynyi1wug:hover{--actions-on-hover-width:auto}
+._iy5o1b66:focus-within, ._v4o21b66:hover{--actions-on-hover-padding:var(--ds-space-050,4px)}
+._t7p8kb7n:focus-within, ._g4kikb7n:hover{--actions-on-hover-opacity:1}
 ._11om6b4r:hover{animation-name:k1xyysw3}
-._1sjuglyw:hover{--elem-after-display:none}
 ._1uy01amc:hover{animation-delay:.8s}
 ._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
 ._7psyru3m:hover{animation-duration:0s}
 ._bir2q7pw:hover{animation-fill-mode:forwards}
-._g4kikb7n:hover{--actions-on-hover-opacity:1}
 ._irr3108i:hover{background-color:var(--ds-surface-hovered,#f1f2f4)}
 ._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
 ._irr3n7od:hover{background-color:unset}
-._v4o21b66:hover{--actions-on-hover-padding:var(--ds-space-050,4px)}
 ._x0kw1txw:hover{--drag-handle-display:flex}
-._ynyi1wug:hover{--actions-on-hover-width:auto}
 @keyframes k1xyysw3{to{cursor:grab}}

package/dist/cjs/ui/menu-item/menu-item.js

@@ -1,4 +1,4 @@
-/* menu-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* menu-item.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/ui/menu-item/top-level-spacer.js

@@ -1,4 +1,4 @@
-/* top-level-spacer.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* top-level-spacer.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/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)}
+._mqm2pp12{border-block-start:var(--_18x9sjc)}
 ._1bsb1osq{width:100%}

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

@@ -1,4 +1,4 @@
-/* divider.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* divider.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -27,6 +27,9 @@ var Divider = exports.Divider = function Divider() {
      * but it probably isn't necessary.
      */
     role: "none",
-    className: (0, _runtime.ax)(["_h7alglyw _179rglyw _mqm2zgxb _1bsb1osq"])
+    className: (0, _runtime.ax)(["_h7alglyw _179rglyw _mqm2pp12 _1bsb1osq"]),
+    style: {
+      "--_18x9sjc": (0, _runtime.ix)("1px solid ".concat("var(--ds-border, #091E4224)"))
+    }
   });
 };

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

@@ -1,4 +1,4 @@
-/* menu-section-heading.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* menu-section-heading.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* aside.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* aside.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* banner.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* banner.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/ui/page-layout/main/main-sticky-header.js

@@ -1,4 +1,4 @@
-/* main-sticky-header.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* main-sticky-header.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* main.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* main.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -24,15 +24,12 @@
 ._syaz1kw7{color:inherit}
 ._u7coidpf{inset-block-end:0}
 ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
-._1cg4fnf5:focus-within{transition-duration:.2s}
-._1dr21ylx:focus-within{transition-property:color}
-._vp7gaqb7:focus-within{color:var(--ds-text-selected,#0c66e4)}
+._1cg4fnf5:focus-within, ._le1bfnf5:hover{transition-duration:.2s}
+._1dr21ylx:focus-within, ._1s5z1ylx:hover{transition-property:color}
+._vp7gaqb7:focus-within, ._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
 ._1gavfnf5:hover{transition-delay:.2s}
-._1s5z1ylx:hover{transition-property:color}
-._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
 ._d0al11mm:hover{cursor:col-resize}
 ._d0aluf7j:hover{cursor:ew-resize}
-._le1bfnf5:hover{transition-duration:.2s}
 ._1gglglyw:active{transition:none}
 ._9h8h16c2:active{color:var(--ds-link-pressed,#05c)}
 @media (min-width:48rem){._181n1ule{display:block}}

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

@@ -1,4 +1,4 @@
-/* panel-splitter.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* panel-splitter.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -4,7 +4,6 @@
 ._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)}
 ._18m91wug{overflow-y:auto}
-._1bsb1adv{width:min(90%,365px)}
 ._1bsb1dxx{width:min(90%,var(--minWidth))}
 ._1e0cglyw{display:none}
 ._1pbykb7n{z-index:1}

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

@@ -1,4 +1,4 @@
-/* panel.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* panel.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -13,7 +13,6 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _skipLinksContext = require("../../context/skip-links/skip-links-context");
 var _constants = require("./constants");
@@ -26,6 +25,7 @@ var _useResizingWidthCssVarOnRootElement = require("./use-resizing-width-css-var
 var _useSafeDefaultWidth = require("./use-safe-default-width");
 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 panelSplitterResizingVar = '--n_pnlRsz';
+var fallbackDefaultWidth = 365;
 
 /**
  * We typically use the `defaultWidth` as the minimum resizing width,
@@ -35,14 +35,11 @@ var panelSplitterResizingVar = '--n_pnlRsz';
  */
 var fallbackResizeMinWidth = 400;
 var styles = {
-  root: "_nd5l1b6c _10fph9n0 _vchhusvi _1pbykb7n _4t3ieqxy _kqsw1if8 _152timx3 _bfhk1bhr _14b54rrg _4ap3vuon _1dhy1c6w _9sns1wug",
+  root: "_nd5l1b6c _10fph9n0 _vchhusvi _1pbykb7n _4t3ieqxy _kqsw1if8 _152timx3 _bfhk1bhr _1bsb1dxx _14b54rrg _4ap3vuon _1dhy1c6w _9sns1wug",
   border: "_191wglyw _16qs1cd0 _1w6ezgxb _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
-  hidden: "_1e0cglyw",
-  oldMobileWidth: "_1bsb1adv",
-  newMobileWidth: "_1bsb1dxx"
+  hidden: "_1e0cglyw"
 };
-var fallbackDefaultWidth = 365;
 
 /**
  * The Panel layout area is rendered to the right (inline end) of the Main area, or the Aside area if it is present.
@@ -152,8 +149,8 @@ function Panel(_ref) {
     id: id,
     "data-layout-slot": true,
     "aria-label": label,
-    className: (0, _runtime.ax)([styles.root, defaultWidth === 0 && styles.hidden, hasBorder && styles.border, (0, _platformFeatureFlags.fg)('platform_design_system_nav4_panel_mobile_width_fix') ? styles.newMobileWidth : styles.oldMobileWidth, xcss]),
-    style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _constants.panelVar, panelVariableWidth), '--minWidth', (0, _platformFeatureFlags.fg)('platform_design_system_nav4_panel_mobile_width_fix') ? "".concat(minWidth, "px") : undefined),
+    className: (0, _runtime.ax)([styles.root, defaultWidth === 0 && styles.hidden, hasBorder && styles.border, xcss]),
+    style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _constants.panelVar, panelVariableWidth), '--minWidth', "".concat(minWidth, "px")),
     "data-testid": testId,
     ref: ref
   }, dangerouslyHoistSlotSizes &&

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

@@ -1,4 +1,4 @@
-/* root.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* root.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -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-content.js

@@ -1,4 +1,4 @@
-/* side-nav-content.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* side-nav-content.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* side-nav-footer.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* side-nav-footer.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* side-nav-header.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* side-nav-header.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* side-nav.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* side-nav.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -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

@@ -1,4 +1,4 @@
-/* toggle-button.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* toggle-button.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -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-end.js

@@ -1,4 +1,4 @@
-/* top-nav-end.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* top-nav-end.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* top-nav-middle.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* top-nav-middle.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* top-nav-start.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* top-nav-start.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* top-nav.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* top-nav.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/ui/top-nav-items/custom-title.js

@@ -1,4 +1,4 @@
-/* custom-title.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* custom-title.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* app-logo.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* app-logo.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* custom-logo.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* custom-logo.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* logo-renderer.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* logo-renderer.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* search.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* search.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,3 @@
-
 ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._11q71c9b{background:var(--ds-top-bar-button-disabled-background)}
 ._11q71qds{background:var(--ds-top-bar-button-selected-background)}
@@ -33,36 +32,27 @@
 ._syaz1i3i{color:var(--ds-top-bar-button-disabled-text)}
 ._syaz1r31{color:currentColor}
 ._syazw5ct{color:var(--ds-top-bar-button-selected-text)}
-._vwz4idpf{line-height:0}._105315o7:visited{color:var(--ds-top-bar-button-primary-text)}
-._10531i3i:visited{color:var(--ds-top-bar-button-disabled-text)}
-._10531r31:visited{color:currentColor}
-._1053w5ct:visited{color:var(--ds-top-bar-button-selected-text)}
-._1a3b1r31:focus{text-decoration-color:currentColor}
-._4fprglyw:focus{text-decoration-line:none}
-._5goinqa1:focus{text-decoration-style:solid}
-._f8pj15o7:focus{color:var(--ds-top-bar-button-primary-text)}
-._f8pj1i3i:focus{color:var(--ds-top-bar-button-disabled-text)}
-._f8pj1r31:focus{color:currentColor}
-._f8pjw5ct:focus{color:var(--ds-top-bar-button-selected-text)}
+._vwz4idpf{line-height:0}
+._f8pj15o7:focus, ._105315o7:visited{color:var(--ds-top-bar-button-primary-text)}
+._f8pj1i3i:focus, ._10531i3i:visited{color:var(--ds-top-bar-button-disabled-text)}
+._f8pj1r31:focus, ._10531r31:visited{color:currentColor}
+._f8pjw5ct:focus, ._1053w5ct:visited{color:var(--ds-top-bar-button-selected-text)}
 ._19lc1c9b:hover{background:var(--ds-top-bar-button-disabled-background)}
 ._19lc1rps:hover{background:var(--ds-top-bar-button-background-hovered)}
 ._19lcjrv1:hover{background:var(--ds-top-bar-button-selected-background-hovered)}
 ._19lcp6hf:hover{background:var(--ds-top-bar-button-primary-background-hovered)}
-._1bnxglyw:hover{text-decoration-line:none}
 ._30l315o7:hover{color:var(--ds-top-bar-button-primary-text)}
 ._30l31i3i:hover{color:var(--ds-top-bar-button-disabled-text)}
 ._30l31r31:hover{color:currentColor}
 ._30l3w5ct:hover{color:var(--ds-top-bar-button-selected-text)}
-._9oik1r31:hover{text-decoration-color:currentColor}
-._jf4cnqa1:hover{text-decoration-style:solid}
 ._j6xt1c9b:active{background:var(--ds-top-bar-button-disabled-background)}
 ._j6xt5sko:active{background:var(--ds-top-bar-button-primary-background-pressed)}
 ._j6xtnh62:active{background:var(--ds-top-bar-button-selected-background-pressed)}
 ._j6xtqtgh:active{background:var(--ds-top-bar-button-background-pressed)}
-._1iohnqa1:active{text-decoration-style:solid}
-._1nrm1r31:active{text-decoration-color:currentColor}
+._1iohnqa1:active, ._5goinqa1:focus, ._jf4cnqa1:hover{text-decoration-style:solid}
+._1nrm1r31:active, ._1a3b1r31:focus, ._9oik1r31:hover{text-decoration-color:currentColor}
 ._9h8h15o7:active{color:var(--ds-top-bar-button-primary-text)}
 ._9h8h1i3i:active{color:var(--ds-top-bar-button-disabled-text)}
 ._9h8h1r31:active{color:currentColor}
 ._9h8hw5ct:active{color:var(--ds-top-bar-button-selected-text)}
-._c2waglyw:active{text-decoration-line:none}
+._c2waglyw:active, ._4fprglyw:focus, ._1bnxglyw:hover{text-decoration-line:none}

package/dist/cjs/ui/top-nav-items/themed/button.js

@@ -1,4 +1,4 @@
-/* button.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* button.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/es2019/components/badge-container.js

@@ -1,4 +1,4 @@
-/* badge-container.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* badge-container.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./badge-container.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";