@atlaskit/navigation-system 10.16.11 → 10.17.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlassian/navigation-system
 
+## 10.17.0
+
+### Minor Changes
+
+- [`c7333edc6dfa2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c7333edc6dfa2) -
+  Add content change motion to Panel behind the `platform-dst-motion-uplift-panel` feature flag.
+  Consumers can provide a contentKey to exit the previous content before entering the next while
+  preserving the panel shell.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.16.11
 
 ### Patch Changes

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

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

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

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

package/dist/cjs/components/list.js

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-/* skip-links-popup.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* skip-links-popup.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 ._nd5l1b6c{grid-area:main/aside/aside/aside}
-._y44v11az{animation:var(--ds-panel-content-enter,.15s cubic-bezier(.4,1,.6,1) FadeIn0to100 .1s)}
+._y44v1mph{animation:var(--ds-panel-content-enter,.15s cubic-bezier(.4,1,.6,1) FadeIn0to100)}
 ._y44vf1qi{animation:var(--ds-panel-content-exit,50ms cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
 ._191wglyw{border-inline-start:none}._10fph9n0{justify-self:end}
 ._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}

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

@@ -1,4 +1,4 @@
-/* panel.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* panel.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -14,7 +14,8 @@ var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
-var _useMotion2 = require("@atlaskit/motion/entering/use-motion");
+var _exitingPersistence = _interopRequireDefault(require("@atlaskit/motion/exiting-persistence"));
+var _useMotion3 = require("@atlaskit/motion/entering/use-motion");
 var _reanimate = require("@atlaskit/motion/reanimate");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _responsive = require("@atlaskit/primitives/responsive");
@@ -46,8 +47,19 @@ var styles = {
   hidden: "_1e0cglyw",
   entering: "_k1af1nn1 _10t81ia4 _xrrp147i _1wsa1ign _1vrh1a5r _1kmh1n9t _105abamb",
   exiting: "_k1af14vv _bq641n9t _105aeydr",
-  contentEntering: "_y44v11az",
-  contentExiting: "_y44vf1qi"
+  contentEntering: "_y44v1mph",
+  contentExiting: "_y44vf1qi",
+  contentChangeContainer: "_4t3i1osq"
+};
+var PanelContentMotion = function PanelContentMotion(_ref) {
+  var children = _ref.children;
+  var _useMotion = (0, _useMotion3.useMotion)(),
+    state = _useMotion.state,
+    ref = _useMotion.ref;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: (0, _runtime.ax)([styles.contentChangeContainer, state === 'entering' && styles.contentEntering, state === 'exiting' && styles.contentExiting])
+  }, children);
 };
 
 /**
@@ -57,20 +69,21 @@ var styles = {
  *
  * You can optionally render a `PanelSplitter` as a child to make the panel area resizable.
  */
-function Panel(_ref) {
-  var children = _ref.children,
-    _ref$defaultWidth = _ref.defaultWidth,
-    defaultWidthProp = _ref$defaultWidth === void 0 ? fallbackDefaultWidth : _ref$defaultWidth,
-    _ref$label = _ref.label,
-    label = _ref$label === void 0 ? 'Panel' : _ref$label,
-    _ref$skipLinkLabel = _ref.skipLinkLabel,
-    skipLinkLabel = _ref$skipLinkLabel === void 0 ? label : _ref$skipLinkLabel,
-    testId = _ref.testId,
-    providedId = _ref.id,
-    xcss = _ref.xcss,
-    _ref$hasBorder = _ref.hasBorder,
-    hasBorder = _ref$hasBorder === void 0 ? true : _ref$hasBorder,
-    maxWidth = _ref.maxWidth;
+function Panel(_ref2) {
+  var children = _ref2.children,
+    _ref2$defaultWidth = _ref2.defaultWidth,
+    defaultWidthProp = _ref2$defaultWidth === void 0 ? fallbackDefaultWidth : _ref2$defaultWidth,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? 'Panel' : _ref2$label,
+    _ref2$skipLinkLabel = _ref2.skipLinkLabel,
+    skipLinkLabel = _ref2$skipLinkLabel === void 0 ? label : _ref2$skipLinkLabel,
+    testId = _ref2.testId,
+    providedId = _ref2.id,
+    xcss = _ref2.xcss,
+    _ref2$hasBorder = _ref2.hasBorder,
+    hasBorder = _ref2$hasBorder === void 0 ? true : _ref2$hasBorder,
+    maxWidth = _ref2.maxWidth,
+    contentKey = _ref2.contentKey;
   var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
   var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
@@ -83,7 +96,7 @@ function Panel(_ref) {
   });
 
   // useMotion is applied only when the `platform-dst-motion-uplift-panel` gate is enabled.
-  var _useMotion = (0, _useMotion2.useMotion)({
+  var _useMotion2 = (0, _useMotion3.useMotion)({
       onFinish: function onFinish(state) {
         if (state === 'exiting' && defaultWidthRef.current === 0) {
           // Set width to 0 as animation is complete
@@ -92,9 +105,9 @@ function Panel(_ref) {
       },
       initialState: defaultWidth === 0 ? 'hidden' : undefined
     }),
-    state = _useMotion.state,
-    motionRef = _useMotion.ref,
-    reanimate = _useMotion.reanimate;
+    state = _useMotion2.state,
+    motionRef = _useMotion2.ref,
+    reanimate = _useMotion2.reanimate;
 
   /**
    * Don't show the skip link if the slot has 0 width.
@@ -226,5 +239,9 @@ function Panel(_ref) {
     position: "start"
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)([styles.scrollContainer, isMotionUpliftEnabled && state === 'entering' && styles.contentEntering, isMotionUpliftEnabled && state === 'exiting' && styles.contentExiting])
-  }, children)));
+  }, isMotionUpliftEnabled && contentKey !== undefined ? /*#__PURE__*/React.createElement(_exitingPersistence.default, {
+    exitThenEnter: true
+  }, /*#__PURE__*/React.createElement(PanelContentMotion, {
+    key: contentKey
+  }, children)) : children)));
 }

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

@@ -1,4 +1,4 @@
-/* ribbon.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* ribbon.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* root.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* root.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* side-nav-content.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* side-nav-content.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

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

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

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

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

@@ -1,4 +1,4 @@
-/* side-nav.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* side-nav.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-/* top-nav.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* top-nav.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-/* themed-anchor.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* themed-anchor.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

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

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

@@ -1,4 +1,4 @@
-/* themed-icon-button.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* themed-icon-button.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* themed-link-button.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* themed-link-button.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* themed-pressable.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* themed-pressable.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

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

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

@@ -1,4 +1,4 @@
-/* list-item.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* list-item.tsx generated by @compiled/babel-plugin v3.0.2 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';

package/dist/es2019/components/list.js

@@ -1,4 +1,4 @@
-/* list.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* list.tsx generated by @compiled/babel-plugin v3.0.2 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';

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

@@ -1,4 +1,4 @@
-/* skip-link.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* skip-link.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./skip-link.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';

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

@@ -1,4 +1,4 @@
-/* skip-links-container.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* skip-links-container.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./skip-links-container.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/skip-links/skip-links-popup.js

@@ -1,4 +1,4 @@
-/* skip-links-popup.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* skip-links-popup.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./skip-links-popup.compiled.css";
 import * as React from 'react';

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

@@ -1,4 +1,4 @@
-/* aside.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* aside.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./aside.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* banner.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* banner.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./banner.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* main-sticky-header.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* main-sticky-header.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./main-sticky-header.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';

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

@@ -1,4 +1,4 @@
-/* main.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* main.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./main.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* panel-splitter.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* panel-splitter.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./panel-splitter.compiled.css";
 import * as React from 'react';

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

@@ -1,5 +1,5 @@
 ._nd5l1b6c{grid-area:main/aside/aside/aside}
-._y44v11az{animation:var(--ds-panel-content-enter,.15s cubic-bezier(.4,1,.6,1) FadeIn0to100 .1s)}
+._y44v1mph{animation:var(--ds-panel-content-enter,.15s cubic-bezier(.4,1,.6,1) FadeIn0to100)}
 ._y44vf1qi{animation:var(--ds-panel-content-exit,50ms cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
 ._191wglyw{border-inline-start:none}._10fph9n0{justify-self:end}
 ._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}

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

@@ -1,9 +1,10 @@
-/* panel.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* panel.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./panel.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
 import { useMotion } from '@atlaskit/motion/entering/use-motion';
 import { Reanimate } from '@atlaskit/motion/reanimate';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
@@ -35,8 +36,21 @@ const styles = {
   hidden: "_1e0cglyw",
   entering: "_k1af1nn1 _10t81ia4 _xrrp147i _1wsa1ign _1vrh1a5r _1kmh1n9t _105abamb",
   exiting: "_k1af14vv _bq641n9t _105aeydr",
-  contentEntering: "_y44v11az",
-  contentExiting: "_y44vf1qi"
+  contentEntering: "_y44v1mph",
+  contentExiting: "_y44vf1qi",
+  contentChangeContainer: "_4t3i1osq"
+};
+const PanelContentMotion = ({
+  children
+}) => {
+  const {
+    state,
+    ref
+  } = useMotion();
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: ax([styles.contentChangeContainer, state === 'entering' && styles.contentEntering, state === 'exiting' && styles.contentExiting])
+  }, children);
 };
 
 /**
@@ -55,7 +69,8 @@ export function Panel({
   id: providedId,
   xcss,
   hasBorder = true,
-  maxWidth
+  maxWidth,
+  contentKey
 }) {
   const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
   const id = useLayoutId({
@@ -212,5 +227,9 @@ export function Panel({
     position: "start"
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([styles.scrollContainer, isMotionUpliftEnabled && state === 'entering' && styles.contentEntering, isMotionUpliftEnabled && state === 'exiting' && styles.contentExiting])
-  }, children)));
+  }, isMotionUpliftEnabled && contentKey !== undefined ? /*#__PURE__*/React.createElement(ExitingPersistence, {
+    exitThenEnter: true
+  }, /*#__PURE__*/React.createElement(PanelContentMotion, {
+    key: contentKey
+  }, children)) : children)));
 }

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

@@ -1,4 +1,4 @@
-/* ribbon.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* ribbon.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./ribbon.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* root.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* root.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./root.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef } from 'react';

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

@@ -1,4 +1,4 @@
-/* side-nav-content.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* side-nav-content.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./side-nav-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useMemo, useRef } from 'react';

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

@@ -1,4 +1,4 @@
-/* side-nav-footer.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* side-nav-footer.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./side-nav-footer.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* side-nav-header.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* side-nav-header.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./side-nav-header.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* side-nav.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* side-nav.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./side-nav.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* toggle-button.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* toggle-button.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./toggle-button.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';

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

@@ -1,4 +1,4 @@
-/* top-nav-end.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* top-nav-end.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./top-nav-end.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* top-nav-middle.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* top-nav-middle.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./top-nav-middle.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';

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

@@ -1,4 +1,4 @@
-/* top-nav-start.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* top-nav-start.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./top-nav-start.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';

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

@@ -1,4 +1,4 @@
-/* top-nav.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* top-nav.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./top-nav.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* custom-title.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* custom-title.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./custom-title.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* app-logo.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* app-logo.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./app-logo.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useRef } from 'react';

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

@@ -1,4 +1,4 @@
-/* custom-logo.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* custom-logo.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./custom-logo.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef } from 'react';