@atlaskit/navigation-system 2.19.1 → 2.21.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlassian/navigation-system
 
+## 2.21.0
+
+### Minor Changes
+
+- [`3476b9c121ef9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3476b9c121ef9) -
+  Side nav animations have been updated to support right-to-left (RTL) languages/text direction.
+  This change is behind the feature gate `navx-full-height-sidebar`.
+
+  This includes:
+
+  - `SideNav` peek animations
+  - `SideNav` expand and collapse animations
+  - `TopNavStart` reorder animations
+
+## 2.20.0
+
+### Minor Changes
+
+- [`bfed073f1849d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bfed073f1849d) -
+  Animations have been added to the `TopNavStart` component, as part of the full height sidebar
+  animations. The reorder of `TopNavStart`'s children elements (toggle button, app switcher, app
+  logo) when the side nav is toggled (on desktop) will have slide animations.
+
+  These changes are behind the feature gate `navx-full-height-sidebar`.
+
 ## 2.19.1
 
 ### Patch Changes

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

@@ -2,6 +2,7 @@
 ._nd5l1b6c{grid-area:main/aside/aside/aside}
 ._191wglyw{border-inline-start:none}
 ._t51zglyw{border-inline-end:none}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
+._15yekb7n{--animation-direction:1}
 ._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)}
@@ -14,9 +15,10 @@
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
-@media (prefers-reduced-motion:no-preference){._10t88iot{transition-property:transform,display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrp188d{transition-duration:.3s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}@starting-style{._1nu5jq3t{transform:translateX(-100%)}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
+[dir=rtl] ._65m41mrw{--animation-direction:-1}
+@media (prefers-reduced-motion:no-preference){._10t88iot{transition-property:transform,display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrp188d{transition-duration:.3s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
 @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}}
-@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1ujq3t{transform:translateX(-100%)}@starting-style{._s2egjq3t{transform:translateX(-100%)}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoi188d{transition-duration:.3s}._hjoifnf5{transition-duration:.2s}}
-@media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadijq3t{transform:translateX(-100%)}}
+@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoi188d{transition-duration:.3s}._hjoifnf5{transition-duration:.2s}}
+@media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
 @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

@@ -61,18 +61,19 @@ 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",
+  animationRTLSupport: "_15yekb7n _65m41mrw",
   flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _17ly8iot _177m1a5r",
-  flyoutOpenFullHeightSidebar: "_hjoi188d _vgub1ku9 _s2egjq3t",
-  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _hjoifnf5 _vgub1mm8 _hh1ujq3t",
+  flyoutOpenFullHeightSidebar: "_hjoi188d _vgub1ku9 _s2eg1p9u",
+  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _hjoifnf5 _vgub1mm8 _hh1u1p9u",
   flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
   hiddenMobileAndDesktop: "_1e0cglyw",
   hiddenMobileOnly: "_1e0cglyw _dm2518uv",
   hiddenDesktopOnly: "_dm25glyw",
   animationBaseStyles: "_10t88iot _1vrh1a5r _xrrp188d",
-  expandAnimationMobile: "_1xq51ku9 _1nu5jq3t",
-  collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadijq3t",
-  expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2egjq3t",
-  collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1ujq3t",
+  expandAnimationMobile: "_1xq51ku9 _1nu51p9u",
+  collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadi1p9u",
+  expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2eg1p9u",
+  collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1u1p9u",
   fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
 };
 var fallbackDefaultWidth = 320;
@@ -632,7 +633,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, shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && (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') && !isFirefox && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, 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, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && (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') && !isFirefox && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && (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/cjs/ui/page-layout/side-nav/toggle-button-context.js

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

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

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

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

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

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

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

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

@@ -1,9 +1,16 @@
 
 ._zulp1b66{gap:var(--ds-space-050,4px)}
-._yyhykb7n{grid-column:1}._1e0c1txw{display:flex}
+._zulp1kw7{gap:inherit}
+._yyhykb7n{grid-column:1}._15yekb7n{--animation-direction:1}
+._1e0c1kw7{display:inherit}
+._1e0c1txw{display:flex}
+._1ul9idpf{min-width:0}
 ._4cvr1h6o{align-items:center}
 ._4t3i1osq{height:100%}
+._ahbq1wug{margin-inline-start:auto}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._lcxv1wug{pointer-events:auto}
 ._vchhusvi{box-sizing:border-box}
+[dir=rtl] ._65m41mrw{--animation-direction:-1}
+@media (prefers-reduced-motion:no-preference){._10t81e03{transition-property:transform}._10t81rjc{transition-property:transform,opacity}._1xq51ytf{transition-timing-function:ease-in-out}._1xq55ucs{transition-timing-function:ease}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrp188d{transition-duration:.3s}._bgpzkb7n{opacity:1}}
 @media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}}

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

@@ -11,12 +11,24 @@ require("./top-nav-start.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _topNavStartContext = require("../../../context/top-nav-start/top-nav-start-context");
-var _toggleButtonProvider = require("../side-nav/toggle-button-provider");
 var _useSideNavVisibility3 = require("../side-nav/use-side-nav-visibility");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * Firefox does support these reorder animations, but only partially enabling layout animations would look odd.
+ *
+ * We are using JS to detect Firefox and disable animations, instead of using CSS, as Compiled currently does not merge duplicate
+ * CSS at-rules when at-rules are nested: https://github.com/atlassian-labs/compiled/blob/e04a325915e1d13010205089e4915de0e53bc2d4/packages/css/src/plugins/merge-duplicate-at-rules.ts#L5
+ * Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
+ */
+var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+
+// Placed in a variable, as the value is used in the translateX value for the children wrapper animation.
+var flexGap = "var(--ds-space-050, 4px)";
+
 /**
  * Styles for the TopNavStart element.
  *
@@ -39,10 +51,48 @@ var innerStyles = {
 var wrapperStyles = {
   root: "_vchhusvi",
   fullHeightSidebar: "_bozgutpp",
-  fullHeightSidebarCollapsed: "_15rip2n4",
   fullHeightSidebarExpanded: "_glte93mn _exxmpxbi"
 };
 
+/**
+ * We use a fixed translateX offset for the slide animation (used when the TopNavStart children elements are reordered).
+ * This fixed offset makes the elements appear to animate smoothly from the old to the new position.
+ * This offset is calculated based on:
+ * - 32px (2rem) width of the side nav toggle button (IconButton)
+ * - 4px gap ('space.050' token) of the flex container
+ *
+ * The benefit of hardcoding this offset is that we don't need to calculate it using JS each time the sidebar is toggled.
+ * However, it could become out of sync if the width of IconButton changes.
+ *
+ * The alternative is using JS to store the previous position of the children wrapper element, and calculate the offset based on
+ * the new position, and then transforming using that offset. This would prevent the animation from going out of sync.
+ */
+var childrenWrapperAnimationOffset = "calc(2rem + ".concat(flexGap, ")");
+var childrenWrapperStyles = {
+  root: "_zulp1kw7 _1e0c1kw7 _1ul9idpf _15yekb7n _65m41mrw",
+  animationBaseStyles: "_10t81e03",
+  finalPosition: "_mjvcz12g _xrrp188d",
+  expandAnimationStartPosition: "_mjvcyrjp",
+  collapseAnimationStartPosition: "_mjvco0k7"
+};
+
+/**
+ * We use a fixed translateX offset for the toggle button slide animation (used when the TopNavStart children elements are reordered).
+ * The specific value doesn't matter too much for the toggle button animation, so we are using `100%`, which will match the toggle button width.
+ *
+ * By combining the `translateX` animation with an `opacity` fade, the feel and experience is actually quite similar to animating the
+ * element from the exact old position (offset), and it avoids the additional complexity of needing to track and calculate the exact offset.
+ */
+var toggleButtonWrapperStyles = {
+  root: "_15yekb7n _65m41mrw _10t81rjc",
+  finalPosition: "_mjvcz12g _xrrp188d _bgpzkb7n",
+  expandAnimationStartPosition: "_mjvc1p9u _bgpzidpf",
+  collapseAnimationStartPosition: "_mjvc1efy _bgpzidpf",
+  expandAnimationTimingFunction: "_1xq51ytf",
+  collapseAnimationTimingFunction: "_1xq55ucs",
+  alignEnd: "_ahbq1wug"
+};
+
 /**
  * The consistent key used for the side nav toggle button to ensure it does not get remounted
  * when it is reordered.
@@ -122,15 +172,81 @@ function TopNavStart(_ref3) {
   (0, _compiled.UNSAFE_useMediaQuery)('above.md', function (event) {
     setIsDesktop(event.matches);
   });
+  var _useState3 = (0, _react.useState)({
+      type: 'idle'
+    }),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    animationState = _useState4[0],
+    setAnimationState = _useState4[1];
+
+  // Used to prevent the reorder animations from running on the initial render.
+  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;
+    }
+  }, []);
+
+  // Using a stable ref to avoid re-running the animation layout effect when the toggle button prop value changes, which
+  // can happen a lot (e.g. if the parent re-renders)
+  var sideNavToggleButtonStableRef = (0, _useStableRef.default)(sideNavToggleButton);
+  (0, _react.useLayoutEffect)(function () {
+    if (!(0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+      return;
+    }
+
+    /**
+     * This layout effect is used to animate the TopNavStart children elements to their new position after being reordered.
+     * It is called when the sidebar's desktop expansion state changes.
+     *
+     * It works by first setting a translateX offset on the elements, used as the start position of the slide animation.
+     * - For the toggle button, it's a fixed offset. It's combined with an opacity, so the exact offset doesn't matter too much.
+     * - For the children wrapper (wrapping everything except the toggle button), an offset was chosen to make the animation
+     * start position the exact same as the element's old position. See comments for `childrenWrapperStyles` for more details.
+     *
+     * On the next frame, the translateX offset is cleared, triggering the animation to the new position.
+     */
+
+    if (isFirstRenderRef.current) {
+      // No animations on initial render.
+      return;
+    }
+    if (!sideNavToggleButtonStableRef.current) {
+      // If there is no toggle button, there should be no re-order animations.
+      return;
+    }
+
+    // Set the translateX offsets so elements are ready to animate to their actual new position after being reordered
+    setAnimationState({
+      type: isExpandedOnDesktop ? 'expand' : 'collapse'
+    });
+    requestAnimationFrame(function () {
+      // Clear translateX offsets on next frame to trigger animation to new position in a re-render
+      setAnimationState({
+        type: 'idle'
+      });
+    });
+
+    // This layout effect is called when the sidebar's desktop expansion state changes.
+  }, [isExpandedOnDesktop, sideNavToggleButtonStableRef]);
   var TopNavStartInner = (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') ? TopNavStartInnerFHS : TopNavStartInnerOld;
   return /*#__PURE__*/_react.default.createElement(TopNavStartInner, {
     ref: elementRef,
     testId: testId
-  }, !(0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/_react.default.createElement(_toggleButtonProvider.SideNavToggleButtonSlotProvider, {
-    key: sideNavToggleButtonKey
-  }, sideNavToggleButton), sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/_react.default.createElement(_toggleButtonProvider.SideNavToggleButtonSlotProvider, {
-    key: sideNavToggleButtonKey
-  }, sideNavToggleButton), children, sideNavToggleButton && isDesktop && isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/_react.default.createElement(_toggleButtonProvider.SideNavToggleButtonSlotProvider, {
-    key: sideNavToggleButtonKey
+  }, !(0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && sideNavToggleButton, sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/_react.default.createElement("div", {
+    key: sideNavToggleButtonKey,
+    className: (0, _runtime.ax)([!isFirefox && toggleButtonWrapperStyles.root, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox &&
+    // Timing function is applied when the browser animates to the idle position.
+    animationState.type === 'idle' && toggleButtonWrapperStyles.collapseAnimationTimingFunction, !isFirefox && animationState.type === 'collapse' && toggleButtonWrapperStyles.collapseAnimationStartPosition])
+  }, sideNavToggleButton), (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)([childrenWrapperStyles.root, !isFirefox && childrenWrapperStyles.animationBaseStyles, !isFirefox && animationState.type === 'idle' && childrenWrapperStyles.finalPosition, !isFirefox && animationState.type === 'expand' && childrenWrapperStyles.expandAnimationStartPosition, !isFirefox && animationState.type === 'collapse' && childrenWrapperStyles.collapseAnimationStartPosition])
+  }, children) : children, sideNavToggleButton && isDesktop && isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/_react.default.createElement("div", {
+    key: sideNavToggleButtonKey,
+    className: (0, _runtime.ax)([!isFirefox && toggleButtonWrapperStyles.root, toggleButtonWrapperStyles.alignEnd, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox &&
+    // Timing function is applied when the browser animates to the idle position.
+    animationState.type === 'idle' && toggleButtonWrapperStyles.expandAnimationTimingFunction, !isFirefox && animationState.type === 'expand' && toggleButtonWrapperStyles.expandAnimationStartPosition])
   }, sideNavToggleButton));
 }

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

@@ -2,6 +2,7 @@
 ._nd5l1b6c{grid-area:main/aside/aside/aside}
 ._191wglyw{border-inline-start:none}
 ._t51zglyw{border-inline-end:none}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
+._15yekb7n{--animation-direction:1}
 ._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)}
@@ -14,9 +15,10 @@
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
-@media (prefers-reduced-motion:no-preference){._10t88iot{transition-property:transform,display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrp188d{transition-duration:.3s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}@starting-style{._1nu5jq3t{transform:translateX(-100%)}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
+[dir=rtl] ._65m41mrw{--animation-direction:-1}
+@media (prefers-reduced-motion:no-preference){._10t88iot{transition-property:transform,display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrp188d{transition-duration:.3s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
 @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}}
-@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1ujq3t{transform:translateX(-100%)}@starting-style{._s2egjq3t{transform:translateX(-100%)}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoi188d{transition-duration:.3s}._hjoifnf5{transition-duration:.2s}}
-@media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadijq3t{transform:translateX(-100%)}}
+@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoi188d{transition-duration:.3s}._hjoifnf5{transition-duration:.2s}}
+@media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
 @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

@@ -48,18 +48,19 @@ 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",
+  animationRTLSupport: "_15yekb7n _65m41mrw",
   flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _17ly8iot _177m1a5r",
-  flyoutOpenFullHeightSidebar: "_hjoi188d _vgub1ku9 _s2egjq3t",
-  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _hjoifnf5 _vgub1mm8 _hh1ujq3t",
+  flyoutOpenFullHeightSidebar: "_hjoi188d _vgub1ku9 _s2eg1p9u",
+  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _hjoifnf5 _vgub1mm8 _hh1u1p9u",
   flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
   hiddenMobileAndDesktop: "_1e0cglyw",
   hiddenMobileOnly: "_1e0cglyw _dm2518uv",
   hiddenDesktopOnly: "_dm25glyw",
   animationBaseStyles: "_10t88iot _1vrh1a5r _xrrp188d",
-  expandAnimationMobile: "_1xq51ku9 _1nu5jq3t",
-  collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadijq3t",
-  expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2egjq3t",
-  collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1ujq3t",
+  expandAnimationMobile: "_1xq51ku9 _1nu51p9u",
+  collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadi1p9u",
+  expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2eg1p9u",
+  collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1u1p9u",
   fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
 };
 const fallbackDefaultWidth = 320;
@@ -624,7 +625,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, shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && 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') && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, 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, fg('navx-full-height-sidebar') && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && 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') && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && 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/es2019/ui/page-layout/side-nav/toggle-button-context.js

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

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

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

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

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

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

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

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

@@ -1,9 +1,16 @@
 
 ._zulp1b66{gap:var(--ds-space-050,4px)}
-._yyhykb7n{grid-column:1}._1e0c1txw{display:flex}
+._zulp1kw7{gap:inherit}
+._yyhykb7n{grid-column:1}._15yekb7n{--animation-direction:1}
+._1e0c1kw7{display:inherit}
+._1e0c1txw{display:flex}
+._1ul9idpf{min-width:0}
 ._4cvr1h6o{align-items:center}
 ._4t3i1osq{height:100%}
+._ahbq1wug{margin-inline-start:auto}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._lcxv1wug{pointer-events:auto}
 ._vchhusvi{box-sizing:border-box}
+[dir=rtl] ._65m41mrw{--animation-direction:-1}
+@media (prefers-reduced-motion:no-preference){._10t81e03{transition-property:transform}._10t81rjc{transition-property:transform,opacity}._1xq51ytf{transition-timing-function:ease-in-out}._1xq55ucs{transition-timing-function:ease}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrp188d{transition-duration:.3s}._bgpzkb7n{opacity:1}}
 @media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}}

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

@@ -2,12 +2,24 @@
 import "./top-nav-start.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery } from '@atlaskit/primitives/compiled';
 import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-context';
-import { SideNavToggleButtonSlotProvider } from '../side-nav/toggle-button-provider';
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 
+/**
+ * Firefox does support these reorder animations, but only partially enabling layout animations would look odd.
+ *
+ * We are using JS to detect Firefox and disable animations, instead of using CSS, as Compiled currently does not merge duplicate
+ * CSS at-rules when at-rules are nested: https://github.com/atlassian-labs/compiled/blob/e04a325915e1d13010205089e4915de0e53bc2d4/packages/css/src/plugins/merge-duplicate-at-rules.ts#L5
+ * Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
+ */
+const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+
+// Placed in a variable, as the value is used in the translateX value for the children wrapper animation.
+const flexGap = "var(--ds-space-050, 4px)";
+
 /**
  * Styles for the TopNavStart element.
  *
@@ -30,10 +42,48 @@ const innerStyles = {
 const wrapperStyles = {
   root: "_vchhusvi",
   fullHeightSidebar: "_bozgutpp",
-  fullHeightSidebarCollapsed: "_15rip2n4",
   fullHeightSidebarExpanded: "_glte93mn _exxmpxbi"
 };
 
+/**
+ * We use a fixed translateX offset for the slide animation (used when the TopNavStart children elements are reordered).
+ * This fixed offset makes the elements appear to animate smoothly from the old to the new position.
+ * This offset is calculated based on:
+ * - 32px (2rem) width of the side nav toggle button (IconButton)
+ * - 4px gap ('space.050' token) of the flex container
+ *
+ * The benefit of hardcoding this offset is that we don't need to calculate it using JS each time the sidebar is toggled.
+ * However, it could become out of sync if the width of IconButton changes.
+ *
+ * The alternative is using JS to store the previous position of the children wrapper element, and calculate the offset based on
+ * the new position, and then transforming using that offset. This would prevent the animation from going out of sync.
+ */
+const childrenWrapperAnimationOffset = `calc(2rem + ${flexGap})`;
+const childrenWrapperStyles = {
+  root: "_zulp1kw7 _1e0c1kw7 _1ul9idpf _15yekb7n _65m41mrw",
+  animationBaseStyles: "_10t81e03",
+  finalPosition: "_mjvcz12g _xrrp188d",
+  expandAnimationStartPosition: "_mjvcyrjp",
+  collapseAnimationStartPosition: "_mjvco0k7"
+};
+
+/**
+ * We use a fixed translateX offset for the toggle button slide animation (used when the TopNavStart children elements are reordered).
+ * The specific value doesn't matter too much for the toggle button animation, so we are using `100%`, which will match the toggle button width.
+ *
+ * By combining the `translateX` animation with an `opacity` fade, the feel and experience is actually quite similar to animating the
+ * element from the exact old position (offset), and it avoids the additional complexity of needing to track and calculate the exact offset.
+ */
+const toggleButtonWrapperStyles = {
+  root: "_15yekb7n _65m41mrw _10t81rjc",
+  finalPosition: "_mjvcz12g _xrrp188d _bgpzkb7n",
+  expandAnimationStartPosition: "_mjvc1p9u _bgpzidpf",
+  collapseAnimationStartPosition: "_mjvc1efy _bgpzidpf",
+  expandAnimationTimingFunction: "_1xq51ytf",
+  collapseAnimationTimingFunction: "_1xq55ucs",
+  alignEnd: "_ahbq1wug"
+};
+
 /**
  * The consistent key used for the side nav toggle button to ensure it does not get remounted
  * when it is reordered.
@@ -115,15 +165,78 @@ export function TopNavStart({
   UNSAFE_useMediaQuery('above.md', event => {
     setIsDesktop(event.matches);
   });
+  const [animationState, setAnimationState] = useState({
+    type: 'idle'
+  });
+
+  // Used to prevent the reorder animations from running on the initial render.
+  const isFirstRenderRef = useRef(true);
+  useEffect(() => {
+    if (!fg('navx-full-height-sidebar')) {
+      return;
+    }
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+    }
+  }, []);
+
+  // Using a stable ref to avoid re-running the animation layout effect when the toggle button prop value changes, which
+  // can happen a lot (e.g. if the parent re-renders)
+  const sideNavToggleButtonStableRef = useStableRef(sideNavToggleButton);
+  useLayoutEffect(() => {
+    if (!fg('navx-full-height-sidebar')) {
+      return;
+    }
+
+    /**
+     * This layout effect is used to animate the TopNavStart children elements to their new position after being reordered.
+     * It is called when the sidebar's desktop expansion state changes.
+     *
+     * It works by first setting a translateX offset on the elements, used as the start position of the slide animation.
+     * - For the toggle button, it's a fixed offset. It's combined with an opacity, so the exact offset doesn't matter too much.
+     * - For the children wrapper (wrapping everything except the toggle button), an offset was chosen to make the animation
+     * start position the exact same as the element's old position. See comments for `childrenWrapperStyles` for more details.
+     *
+     * On the next frame, the translateX offset is cleared, triggering the animation to the new position.
+     */
+
+    if (isFirstRenderRef.current) {
+      // No animations on initial render.
+      return;
+    }
+    if (!sideNavToggleButtonStableRef.current) {
+      // If there is no toggle button, there should be no re-order animations.
+      return;
+    }
+
+    // Set the translateX offsets so elements are ready to animate to their actual new position after being reordered
+    setAnimationState({
+      type: isExpandedOnDesktop ? 'expand' : 'collapse'
+    });
+    requestAnimationFrame(() => {
+      // Clear translateX offsets on next frame to trigger animation to new position in a re-render
+      setAnimationState({
+        type: 'idle'
+      });
+    });
+
+    // This layout effect is called when the sidebar's desktop expansion state changes.
+  }, [isExpandedOnDesktop, sideNavToggleButtonStableRef]);
   const TopNavStartInner = fg('navx-full-height-sidebar') ? TopNavStartInnerFHS : TopNavStartInnerOld;
   return /*#__PURE__*/React.createElement(TopNavStartInner, {
     ref: elementRef,
     testId: testId
-  }, !fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {
-    key: sideNavToggleButtonKey
-  }, sideNavToggleButton), sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {
-    key: sideNavToggleButtonKey
-  }, sideNavToggleButton), children, sideNavToggleButton && isDesktop && isExpandedOnDesktop && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {
-    key: sideNavToggleButtonKey
+  }, !fg('navx-full-height-sidebar') && sideNavToggleButton, sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement("div", {
+    key: sideNavToggleButtonKey,
+    className: ax([!isFirefox && toggleButtonWrapperStyles.root, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox &&
+    // Timing function is applied when the browser animates to the idle position.
+    animationState.type === 'idle' && toggleButtonWrapperStyles.collapseAnimationTimingFunction, !isFirefox && animationState.type === 'collapse' && toggleButtonWrapperStyles.collapseAnimationStartPosition])
+  }, sideNavToggleButton), fg('navx-full-height-sidebar') ? /*#__PURE__*/React.createElement("div", {
+    className: ax([childrenWrapperStyles.root, !isFirefox && childrenWrapperStyles.animationBaseStyles, !isFirefox && animationState.type === 'idle' && childrenWrapperStyles.finalPosition, !isFirefox && animationState.type === 'expand' && childrenWrapperStyles.expandAnimationStartPosition, !isFirefox && animationState.type === 'collapse' && childrenWrapperStyles.collapseAnimationStartPosition])
+  }, children) : children, sideNavToggleButton && isDesktop && isExpandedOnDesktop && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement("div", {
+    key: sideNavToggleButtonKey,
+    className: ax([!isFirefox && toggleButtonWrapperStyles.root, toggleButtonWrapperStyles.alignEnd, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox &&
+    // Timing function is applied when the browser animates to the idle position.
+    animationState.type === 'idle' && toggleButtonWrapperStyles.expandAnimationTimingFunction, !isFirefox && animationState.type === 'expand' && toggleButtonWrapperStyles.expandAnimationStartPosition])
   }, sideNavToggleButton));
 }

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

@@ -2,6 +2,7 @@
 ._nd5l1b6c{grid-area:main/aside/aside/aside}
 ._191wglyw{border-inline-start:none}
 ._t51zglyw{border-inline-end:none}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
+._15yekb7n{--animation-direction:1}
 ._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)}
@@ -14,9 +15,10 @@
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
-@media (prefers-reduced-motion:no-preference){._10t88iot{transition-property:transform,display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrp188d{transition-duration:.3s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}@starting-style{._1nu5jq3t{transform:translateX(-100%)}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
+[dir=rtl] ._65m41mrw{--animation-direction:-1}
+@media (prefers-reduced-motion:no-preference){._10t88iot{transition-property:transform,display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrp188d{transition-duration:.3s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
 @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}}
-@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1ujq3t{transform:translateX(-100%)}@starting-style{._s2egjq3t{transform:translateX(-100%)}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoi188d{transition-duration:.3s}._hjoifnf5{transition-duration:.2s}}
-@media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadijq3t{transform:translateX(-100%)}}
+@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoi188d{transition-duration:.3s}._hjoifnf5{transition-duration:.2s}}
+@media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
 @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

@@ -52,18 +52,19 @@ 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",
+  animationRTLSupport: "_15yekb7n _65m41mrw",
   flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _17ly8iot _177m1a5r",
-  flyoutOpenFullHeightSidebar: "_hjoi188d _vgub1ku9 _s2egjq3t",
-  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _hjoifnf5 _vgub1mm8 _hh1ujq3t",
+  flyoutOpenFullHeightSidebar: "_hjoi188d _vgub1ku9 _s2eg1p9u",
+  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _hjoifnf5 _vgub1mm8 _hh1u1p9u",
   flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
   hiddenMobileAndDesktop: "_1e0cglyw",
   hiddenMobileOnly: "_1e0cglyw _dm2518uv",
   hiddenDesktopOnly: "_dm25glyw",
   animationBaseStyles: "_10t88iot _1vrh1a5r _xrrp188d",
-  expandAnimationMobile: "_1xq51ku9 _1nu5jq3t",
-  collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadijq3t",
-  expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2egjq3t",
-  collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1ujq3t",
+  expandAnimationMobile: "_1xq51ku9 _1nu51p9u",
+  collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadi1p9u",
+  expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2eg1p9u",
+  collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1u1p9u",
   fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
 };
 var fallbackDefaultWidth = 320;
@@ -623,7 +624,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, shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && 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') && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, 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, fg('navx-full-height-sidebar') && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && 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') && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && 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/toggle-button-context.js

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

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

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

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

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

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

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

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

@@ -1,9 +1,16 @@
 
 ._zulp1b66{gap:var(--ds-space-050,4px)}
-._yyhykb7n{grid-column:1}._1e0c1txw{display:flex}
+._zulp1kw7{gap:inherit}
+._yyhykb7n{grid-column:1}._15yekb7n{--animation-direction:1}
+._1e0c1kw7{display:inherit}
+._1e0c1txw{display:flex}
+._1ul9idpf{min-width:0}
 ._4cvr1h6o{align-items:center}
 ._4t3i1osq{height:100%}
+._ahbq1wug{margin-inline-start:auto}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._lcxv1wug{pointer-events:auto}
 ._vchhusvi{box-sizing:border-box}
+[dir=rtl] ._65m41mrw{--animation-direction:-1}
+@media (prefers-reduced-motion:no-preference){._10t81e03{transition-property:transform}._10t81rjc{transition-property:transform,opacity}._1xq51ytf{transition-timing-function:ease-in-out}._1xq55ucs{transition-timing-function:ease}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrp188d{transition-duration:.3s}._bgpzkb7n{opacity:1}}
 @media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}}

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

@@ -3,12 +3,24 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./top-nav-start.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery } from '@atlaskit/primitives/compiled';
 import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-context';
-import { SideNavToggleButtonSlotProvider } from '../side-nav/toggle-button-provider';
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 
+/**
+ * Firefox does support these reorder animations, but only partially enabling layout animations would look odd.
+ *
+ * We are using JS to detect Firefox and disable animations, instead of using CSS, as Compiled currently does not merge duplicate
+ * CSS at-rules when at-rules are nested: https://github.com/atlassian-labs/compiled/blob/e04a325915e1d13010205089e4915de0e53bc2d4/packages/css/src/plugins/merge-duplicate-at-rules.ts#L5
+ * Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
+ */
+var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+
+// Placed in a variable, as the value is used in the translateX value for the children wrapper animation.
+var flexGap = "var(--ds-space-050, 4px)";
+
 /**
  * Styles for the TopNavStart element.
  *
@@ -31,10 +43,48 @@ var innerStyles = {
 var wrapperStyles = {
   root: "_vchhusvi",
   fullHeightSidebar: "_bozgutpp",
-  fullHeightSidebarCollapsed: "_15rip2n4",
   fullHeightSidebarExpanded: "_glte93mn _exxmpxbi"
 };
 
+/**
+ * We use a fixed translateX offset for the slide animation (used when the TopNavStart children elements are reordered).
+ * This fixed offset makes the elements appear to animate smoothly from the old to the new position.
+ * This offset is calculated based on:
+ * - 32px (2rem) width of the side nav toggle button (IconButton)
+ * - 4px gap ('space.050' token) of the flex container
+ *
+ * The benefit of hardcoding this offset is that we don't need to calculate it using JS each time the sidebar is toggled.
+ * However, it could become out of sync if the width of IconButton changes.
+ *
+ * The alternative is using JS to store the previous position of the children wrapper element, and calculate the offset based on
+ * the new position, and then transforming using that offset. This would prevent the animation from going out of sync.
+ */
+var childrenWrapperAnimationOffset = "calc(2rem + ".concat(flexGap, ")");
+var childrenWrapperStyles = {
+  root: "_zulp1kw7 _1e0c1kw7 _1ul9idpf _15yekb7n _65m41mrw",
+  animationBaseStyles: "_10t81e03",
+  finalPosition: "_mjvcz12g _xrrp188d",
+  expandAnimationStartPosition: "_mjvcyrjp",
+  collapseAnimationStartPosition: "_mjvco0k7"
+};
+
+/**
+ * We use a fixed translateX offset for the toggle button slide animation (used when the TopNavStart children elements are reordered).
+ * The specific value doesn't matter too much for the toggle button animation, so we are using `100%`, which will match the toggle button width.
+ *
+ * By combining the `translateX` animation with an `opacity` fade, the feel and experience is actually quite similar to animating the
+ * element from the exact old position (offset), and it avoids the additional complexity of needing to track and calculate the exact offset.
+ */
+var toggleButtonWrapperStyles = {
+  root: "_15yekb7n _65m41mrw _10t81rjc",
+  finalPosition: "_mjvcz12g _xrrp188d _bgpzkb7n",
+  expandAnimationStartPosition: "_mjvc1p9u _bgpzidpf",
+  collapseAnimationStartPosition: "_mjvc1efy _bgpzidpf",
+  expandAnimationTimingFunction: "_1xq51ytf",
+  collapseAnimationTimingFunction: "_1xq55ucs",
+  alignEnd: "_ahbq1wug"
+};
+
 /**
  * The consistent key used for the side nav toggle button to ensure it does not get remounted
  * when it is reordered.
@@ -114,15 +164,81 @@ export function TopNavStart(_ref3) {
   UNSAFE_useMediaQuery('above.md', function (event) {
     setIsDesktop(event.matches);
   });
+  var _useState3 = useState({
+      type: 'idle'
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    animationState = _useState4[0],
+    setAnimationState = _useState4[1];
+
+  // Used to prevent the reorder animations from running on the initial render.
+  var isFirstRenderRef = useRef(true);
+  useEffect(function () {
+    if (!fg('navx-full-height-sidebar')) {
+      return;
+    }
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+    }
+  }, []);
+
+  // Using a stable ref to avoid re-running the animation layout effect when the toggle button prop value changes, which
+  // can happen a lot (e.g. if the parent re-renders)
+  var sideNavToggleButtonStableRef = useStableRef(sideNavToggleButton);
+  useLayoutEffect(function () {
+    if (!fg('navx-full-height-sidebar')) {
+      return;
+    }
+
+    /**
+     * This layout effect is used to animate the TopNavStart children elements to their new position after being reordered.
+     * It is called when the sidebar's desktop expansion state changes.
+     *
+     * It works by first setting a translateX offset on the elements, used as the start position of the slide animation.
+     * - For the toggle button, it's a fixed offset. It's combined with an opacity, so the exact offset doesn't matter too much.
+     * - For the children wrapper (wrapping everything except the toggle button), an offset was chosen to make the animation
+     * start position the exact same as the element's old position. See comments for `childrenWrapperStyles` for more details.
+     *
+     * On the next frame, the translateX offset is cleared, triggering the animation to the new position.
+     */
+
+    if (isFirstRenderRef.current) {
+      // No animations on initial render.
+      return;
+    }
+    if (!sideNavToggleButtonStableRef.current) {
+      // If there is no toggle button, there should be no re-order animations.
+      return;
+    }
+
+    // Set the translateX offsets so elements are ready to animate to their actual new position after being reordered
+    setAnimationState({
+      type: isExpandedOnDesktop ? 'expand' : 'collapse'
+    });
+    requestAnimationFrame(function () {
+      // Clear translateX offsets on next frame to trigger animation to new position in a re-render
+      setAnimationState({
+        type: 'idle'
+      });
+    });
+
+    // This layout effect is called when the sidebar's desktop expansion state changes.
+  }, [isExpandedOnDesktop, sideNavToggleButtonStableRef]);
   var TopNavStartInner = fg('navx-full-height-sidebar') ? TopNavStartInnerFHS : TopNavStartInnerOld;
   return /*#__PURE__*/React.createElement(TopNavStartInner, {
     ref: elementRef,
     testId: testId
-  }, !fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {
-    key: sideNavToggleButtonKey
-  }, sideNavToggleButton), sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {
-    key: sideNavToggleButtonKey
-  }, sideNavToggleButton), children, sideNavToggleButton && isDesktop && isExpandedOnDesktop && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {
-    key: sideNavToggleButtonKey
+  }, !fg('navx-full-height-sidebar') && sideNavToggleButton, sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement("div", {
+    key: sideNavToggleButtonKey,
+    className: ax([!isFirefox && toggleButtonWrapperStyles.root, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox &&
+    // Timing function is applied when the browser animates to the idle position.
+    animationState.type === 'idle' && toggleButtonWrapperStyles.collapseAnimationTimingFunction, !isFirefox && animationState.type === 'collapse' && toggleButtonWrapperStyles.collapseAnimationStartPosition])
+  }, sideNavToggleButton), fg('navx-full-height-sidebar') ? /*#__PURE__*/React.createElement("div", {
+    className: ax([childrenWrapperStyles.root, !isFirefox && childrenWrapperStyles.animationBaseStyles, !isFirefox && animationState.type === 'idle' && childrenWrapperStyles.finalPosition, !isFirefox && animationState.type === 'expand' && childrenWrapperStyles.expandAnimationStartPosition, !isFirefox && animationState.type === 'collapse' && childrenWrapperStyles.collapseAnimationStartPosition])
+  }, children) : children, sideNavToggleButton && isDesktop && isExpandedOnDesktop && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement("div", {
+    key: sideNavToggleButtonKey,
+    className: ax([!isFirefox && toggleButtonWrapperStyles.root, toggleButtonWrapperStyles.alignEnd, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox &&
+    // Timing function is applied when the browser animates to the idle position.
+    animationState.type === 'idle' && toggleButtonWrapperStyles.expandAnimationTimingFunction, !isFirefox && animationState.type === 'expand' && toggleButtonWrapperStyles.expandAnimationStartPosition])
   }, sideNavToggleButton));
 }

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

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

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

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

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "2.19.1",
+	"version": "2.21.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -67,7 +67,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
-		"@atlaskit/avatar": "^25.3.0",
+		"@atlaskit/avatar": "^25.4.0",
 		"@atlaskit/button": "^23.5.0",
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/ds-lib": "^5.1.0",