@atlaskit/navigation-system 2.16.0 → 2.17.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlassian/navigation-system
 
+## 2.17.0
+
+### Minor Changes
+
+- [`dc96cee1f923a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dc96cee1f923a) -
+  Minor improvements to the side nav peek (flyout) animations. These changes are behind the
+  `navx-full-height-sidebar` feature flag.
+
+  - The timing functions for the peek and hide animations have been slightly tweaked to align with
+    the new full height sidebar animations
+  - The peek animation duration has been increased to 300ms from 200ms to align with the new full
+    height sidebar animations
+  - During the collapse animation, the flyout will now maintain its background color and box-shadow.
+    They were previously unset as soon as the animation started.
+
+- [`dc96cee1f923a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dc96cee1f923a) -
+  [ux] The sidebar will now animate when expanding and collapsing on supported browsers. Currently
+  Firefox is not supported. This change is behind the feature gate `navx-full-height-sidebar`.
+
+  The sidebar previously only animated when peeking (flyout mode). This change makes it animate on
+  regualar toggles as well. The `Main` layout area will still instantly "snap" into its new position
+  without any animations.
+
 ## 2.16.0
 
 ### Minor Changes

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

@@ -16,4 +16,4 @@
 ._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}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._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}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._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}}}
+@supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference) and (min-width:64rem){@starting-style{._121hjq3t{transform:translateX(-100%)}}._1ee1188d{transition-duration:.3s}._1t2c1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._14ckglyw{transform:none}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._1ee1fnf5{transition-duration:.2s}._1t2c1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._14ckjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._2dsh8iot{transition-property:transform,display}._15ld1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._kzn71gzg{grid-area:main}._1t2c1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._14ckjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){@starting-style{._121hjq3t{transform:translateX(-100%)}}._kzn7k0mc{grid-area:side-nav}._1t2c1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._14ckglyw{transform: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}}@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._sylc1a5r{transition-behavior:allow-discrete}._1tpv188d{transition-duration:.3s}}@media (prefers-reduced-motion:no-preference){._1h8i1gzg{grid-area:main}._ik8q1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._ik8q1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}}

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

@@ -54,10 +54,18 @@ var styles = {
   root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5cl7r9e _4ap3vuon _scbpglyw",
   flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
+  flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _2dsh8iot _15ld1a5r",
+  flyoutOpenFullHeightSidebar: "_1ee1188d _1t2c1ku9 _14ckglyw _121hjq3t",
+  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _1ee1fnf5 _1t2c1mm8 _14ckjq3t",
   flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
   hiddenMobileAndDesktop: "_1e0cglyw",
   hiddenMobileOnly: "_1e0cglyw _dm2518uv",
   hiddenDesktopOnly: "_dm25glyw",
+  animationBaseStyles: "_139f8iot _sylc1a5r _1tpv188d",
+  expandAnimationMobile: "_ik8q1ku9 _oyeijq3t",
+  collapseAnimationMobile: "_1h8i1gzg _ik8q1mm8 _1uwsjq3t",
+  expandAnimationDesktop: "_kzn7k0mc _1t2c1ku9 _14ckglyw _121hjq3t",
+  collapseAnimationDesktop: "_kzn71gzg _1t2c1mm8 _14ckjq3t",
   fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
 };
 var fallbackDefaultWidth = 320;
@@ -572,6 +580,18 @@ function SideNavInternal(_ref) {
     panelId: _constants.sideNavPanelSplitterId
   });
   var isFlyoutClosed = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'closed' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === undefined;
+
+  // Used to prevent sidebar expand animations from running on the initial render.
+  // Otherwise, the `@starting-style` rule will cause the sidebar to slide in initially.
+  var isFirstRenderRef = (0, _react.useRef)(true);
+  (0, _react.useEffect)(function () {
+    if (!(0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+      return;
+    }
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+    }
+  }, []);
   return /*#__PURE__*/React.createElement("nav", (0, _extends2.default)({
     id: id
   }, devTimeOnlyAttributes, {
@@ -580,7 +600,7 @@ function SideNavInternal(_ref) {
     style: (0, _defineProperty2.default)({}, _constants.sideNavVar, clampedWidth),
     ref: mergedRef,
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed, isFlyoutClosed && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebar])
+    className: (0, _runtime.ax)([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, !isFirstRenderRef.current && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.animationBaseStyles, isExpandedOnMobile && !isFirstRenderRef.current && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.expandAnimationMobile, !isExpandedOnMobile && !isFirstRenderRef.current && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.collapseAnimationMobile, isExpandedOnDesktop && !isFirstRenderRef.current && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.expandAnimationDesktop, !isExpandedOnDesktop && !isFirstRenderRef.current && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !(0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !(0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, isFlyoutClosed && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebar])
   }), /*#__PURE__*/React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.sideNavLiveWidthVar,
     value: "0px",

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

@@ -16,4 +16,4 @@
 ._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}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._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}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._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}}}
+@supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference) and (min-width:64rem){@starting-style{._121hjq3t{transform:translateX(-100%)}}._1ee1188d{transition-duration:.3s}._1t2c1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._14ckglyw{transform:none}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._1ee1fnf5{transition-duration:.2s}._1t2c1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._14ckjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._2dsh8iot{transition-property:transform,display}._15ld1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._kzn71gzg{grid-area:main}._1t2c1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._14ckjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){@starting-style{._121hjq3t{transform:translateX(-100%)}}._kzn7k0mc{grid-area:side-nav}._1t2c1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._14ckglyw{transform: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}}@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._sylc1a5r{transition-behavior:allow-discrete}._1tpv188d{transition-duration:.3s}}@media (prefers-reduced-motion:no-preference){._1h8i1gzg{grid-area:main}._ik8q1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._ik8q1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}}

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

@@ -41,10 +41,18 @@ const styles = {
   root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5cl7r9e _4ap3vuon _scbpglyw",
   flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
+  flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _2dsh8iot _15ld1a5r",
+  flyoutOpenFullHeightSidebar: "_1ee1188d _1t2c1ku9 _14ckglyw _121hjq3t",
+  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _1ee1fnf5 _1t2c1mm8 _14ckjq3t",
   flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
   hiddenMobileAndDesktop: "_1e0cglyw",
   hiddenMobileOnly: "_1e0cglyw _dm2518uv",
   hiddenDesktopOnly: "_dm25glyw",
+  animationBaseStyles: "_139f8iot _sylc1a5r _1tpv188d",
+  expandAnimationMobile: "_ik8q1ku9 _oyeijq3t",
+  collapseAnimationMobile: "_1h8i1gzg _ik8q1mm8 _1uwsjq3t",
+  expandAnimationDesktop: "_kzn7k0mc _1t2c1ku9 _14ckglyw _121hjq3t",
+  collapseAnimationDesktop: "_kzn71gzg _1t2c1mm8 _14ckjq3t",
   fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
 };
 const fallbackDefaultWidth = 320;
@@ -561,6 +569,18 @@ function SideNavInternal({
     panelId: sideNavPanelSplitterId
   });
   const isFlyoutClosed = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'closed' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === undefined;
+
+  // Used to prevent sidebar expand animations from running on the initial render.
+  // Otherwise, the `@starting-style` rule will cause the sidebar to slide in initially.
+  const isFirstRenderRef = useRef(true);
+  useEffect(() => {
+    if (!fg('navx-full-height-sidebar')) {
+      return;
+    }
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+    }
+  }, []);
   return /*#__PURE__*/React.createElement("nav", _extends({
     id: id
   }, devTimeOnlyAttributes, {
@@ -572,7 +592,7 @@ function SideNavInternal({
     },
     ref: mergedRef,
     "data-testid": testId,
-    className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed, isFlyoutClosed && fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
+    className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.animationBaseStyles, isExpandedOnMobile && !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.expandAnimationMobile, !isExpandedOnMobile && !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.collapseAnimationMobile, isExpandedOnDesktop && !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.expandAnimationDesktop, !isExpandedOnDesktop && !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !fg('navx-full-height-sidebar') && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !fg('navx-full-height-sidebar') && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && fg('navx-full-height-sidebar') && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && fg('navx-full-height-sidebar') && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, isFlyoutClosed && fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
   }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",

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

@@ -16,4 +16,4 @@
 ._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}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._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}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._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}}}
+@supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference) and (min-width:64rem){@starting-style{._121hjq3t{transform:translateX(-100%)}}._1ee1188d{transition-duration:.3s}._1t2c1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._14ckglyw{transform:none}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._1ee1fnf5{transition-duration:.2s}._1t2c1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._14ckjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._2dsh8iot{transition-property:transform,display}._15ld1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._kzn71gzg{grid-area:main}._1t2c1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._14ckjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){@starting-style{._121hjq3t{transform:translateX(-100%)}}._kzn7k0mc{grid-area:side-nav}._1t2c1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._14ckglyw{transform: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}}@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._sylc1a5r{transition-behavior:allow-discrete}._1tpv188d{transition-duration:.3s}}@media (prefers-reduced-motion:no-preference){._1h8i1gzg{grid-area:main}._ik8q1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._ik8q1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}}

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

@@ -45,10 +45,18 @@ var styles = {
   root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5cl7r9e _4ap3vuon _scbpglyw",
   flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
+  flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _2dsh8iot _15ld1a5r",
+  flyoutOpenFullHeightSidebar: "_1ee1188d _1t2c1ku9 _14ckglyw _121hjq3t",
+  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _1ee1fnf5 _1t2c1mm8 _14ckjq3t",
   flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
   hiddenMobileAndDesktop: "_1e0cglyw",
   hiddenMobileOnly: "_1e0cglyw _dm2518uv",
   hiddenDesktopOnly: "_dm25glyw",
+  animationBaseStyles: "_139f8iot _sylc1a5r _1tpv188d",
+  expandAnimationMobile: "_ik8q1ku9 _oyeijq3t",
+  collapseAnimationMobile: "_1h8i1gzg _ik8q1mm8 _1uwsjq3t",
+  expandAnimationDesktop: "_kzn7k0mc _1t2c1ku9 _14ckglyw _121hjq3t",
+  collapseAnimationDesktop: "_kzn71gzg _1t2c1mm8 _14ckjq3t",
   fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
 };
 var fallbackDefaultWidth = 320;
@@ -563,6 +571,18 @@ function SideNavInternal(_ref) {
     panelId: sideNavPanelSplitterId
   });
   var isFlyoutClosed = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'closed' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === undefined;
+
+  // Used to prevent sidebar expand animations from running on the initial render.
+  // Otherwise, the `@starting-style` rule will cause the sidebar to slide in initially.
+  var isFirstRenderRef = useRef(true);
+  useEffect(function () {
+    if (!fg('navx-full-height-sidebar')) {
+      return;
+    }
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+    }
+  }, []);
   return /*#__PURE__*/React.createElement("nav", _extends({
     id: id
   }, devTimeOnlyAttributes, {
@@ -571,7 +591,7 @@ function SideNavInternal(_ref) {
     style: _defineProperty({}, sideNavVar, clampedWidth),
     ref: mergedRef,
     "data-testid": testId,
-    className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed, isFlyoutClosed && fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
+    className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.animationBaseStyles, isExpandedOnMobile && !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.expandAnimationMobile, !isExpandedOnMobile && !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.collapseAnimationMobile, isExpandedOnDesktop && !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.expandAnimationDesktop, !isExpandedOnDesktop && !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !fg('navx-full-height-sidebar') && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !fg('navx-full-height-sidebar') && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && fg('navx-full-height-sidebar') && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && fg('navx-full-height-sidebar') && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, isFlyoutClosed && fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
   }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "2.16.0",
+	"version": "2.17.0",
 	"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.5.0",
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/ds-lib": "^5.1.0",
-		"@atlaskit/icon": "^28.4.0",
+		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",