@atlaskit/navigation-system 10.5.7 → 10.6.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlassian/navigation-system
 
+## 10.6.0
+
+### Minor Changes
+
+- [`95ff9f0742fb9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/95ff9f0742fb9) -
+  [ux] Added motion to `Panel` entry and exit behind the `platform-dst-motion-uplift-panel` feature
+  gate.
+
+  When the gate is enabled, `Panel` animates on entry automatically. To get the exit animation,
+  consumers must render the conditionally-mounted `Panel` inside an `ExitingPersistence` boundary so
+  the panel stays mounted until its exit motion finishes:
+
+  ```tsx
+  import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
+  import { Panel } from '@atlaskit/navigation-system/layout/panel';
+
+  function Example({ isPanelOpen }: { isPanelOpen: boolean }) {
+  	return (
+  		<ExitingPersistence>
+  			{isPanelOpen && <Panel defaultWidth={320}>{/* panel content */}</Panel>}
+  		</ExitingPersistence>
+  	);
+  }
+  ```
+
+  Without the `ExitingPersistence` wrapper the panel is removed immediately on close and the exit
+  animation is skipped. Entry animation works with or without the wrapper.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.5.7
 
 ### Patch Changes

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

@@ -1,11 +1,15 @@
 
 ._nd5l1b6c{grid-area:main/aside/aside/aside}
+._y44v1s3l{animation:var(--ds-panel-enter,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}
+._y44vqhwn{animation:var(--ds-panel-exit,.2s cubic-bezier(.6,0,.8,.6) SlideOut100PercentRight)}
 ._191wglyw{border-inline-start:none}._10fph9n0{justify-self:end}
 ._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._18m91wug{overflow-y:auto}
 ._1bsb1dxx{width:min(90%,var(--minWidth))}
 ._1e0cglyw{display:none}
+._1o51eoah{animation-fill-mode:backwards}
+._1o51q7pw{animation-fill-mode:forwards}
 ._1pbykb7n{z-index:1}
 ._1reo1wug{overflow-x:auto}
 ._4t3i1osq{height:100%}

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

@@ -13,6 +13,9 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react2 = require("@compiled/react");
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _useMotion2 = require("@atlaskit/motion/use-motion");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _useSkipLinkInternal = require("../../context/skip-links/use-skip-link-internal");
@@ -40,7 +43,9 @@ var styles = {
   root: "_nd5l1b6c _10fph9n0 _vchhusvi _1pbykb7n _4t3ieqxy _kqsw1if8 _152timx3 _bfhk1bhr _1bsb1dxx _14b54rrg _4ap3vuon _1dhy1c6w _9sns1wug",
   border: "_191wglyw _16qs130s _1w6eia51 _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
-  hidden: "_1e0cglyw"
+  hidden: "_1e0cglyw",
+  entering: "_y44v1s3l _1o51eoah",
+  exiting: "_y44vqhwn _1o51q7pw"
 };
 
 /**
@@ -67,6 +72,20 @@ function Panel(_ref) {
   var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
   });
+
+  // useMotion is applied only when the `platform-dst-motion-uplift-panel` gate is enabled.
+  var _useMotion = (0, _useMotion2.useMotion)({
+      onFinish: function onFinish(state) {
+        if (state === 'exiting' && defaultWidthRef.current === 0) {
+          // Set width to 0 as animation is complete
+          setWidth(0);
+        }
+      }
+    }),
+    state = _useMotion.state,
+    motionRef = _useMotion.ref,
+    reanimate = _useMotion.reanimate;
+  var isMotionUpliftEnabled = (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-panel');
   var defaultWidth = (0, _useSafeDefaultWidth.useSafeDefaultWidth)({
     defaultWidthProp: defaultWidthProp,
     fallbackDefaultWidth: fallbackDefaultWidth,
@@ -93,6 +112,15 @@ function Panel(_ref) {
   // Used to track the previous value of the `defaultWidth` prop, for logging dev warnings when it changes.
   var defaultWidthRef = (0, _react.useRef)(defaultWidth);
 
+  // `mergeRefs` returns a new callback ref on every call, and combined with a new array literal
+  // this would cause React to detach/re-attach the ref on every render. Memoise it so the merged
+  // ref is stable across renders.
+  var mergedRef = (0, _react.useMemo)(function () {
+    return isMotionUpliftEnabled ? (0, _mergeRefs.default)([ref, motionRef]) : ref;
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isMotionUpliftEnabled, motionRef]);
+
   /**
    * TODO: Remove this useEffect once the `width: 0` usage is removed from Jira.
    * It updates the width state based on changes to `defaultWidth`, as a temporary stopgap to support Jira's current usage.
@@ -102,13 +130,23 @@ function Panel(_ref) {
     if (defaultWidthRef.current === defaultWidth) {
       return;
     }
+    if (isMotionUpliftEnabled) {
+      if (defaultWidth === 0) {
+        reanimate(_useMotion2.Reanimate.exit);
+        defaultWidthRef.current = defaultWidth;
+        // Set width to 0 once the exit animation is complete
+        return;
+      } else if (defaultWidthRef.current === 0) {
+        reanimate(_useMotion2.Reanimate.enter);
+      }
+    }
     defaultWidthRef.current = defaultWidth;
     setWidth(defaultWidth);
     if (process.env.NODE_ENV !== 'production') {
       // eslint-disable-next-line no-console
       console.warn('Page Layout warning\n\n', 'The value of the `defaultWidth` prop on the `Panel` layout slot component has changed. This should not be changed after the component has been mounted.\n\n', 'In the future, changes to the `defaultWidth` prop will not be respected. It is only supported as a stopgap to enable migration from Nav3 to Nav4.\n\n');
     }
-  }, [defaultWidth]);
+  }, [defaultWidth, isMotionUpliftEnabled, reanimate]);
   var sideNavRef = (0, _useSideNavRef.useSideNavRef)();
 
   /**
@@ -152,11 +190,15 @@ function Panel(_ref) {
   return /*#__PURE__*/React.createElement("section", {
     id: id,
     "data-layout-slot": true,
-    "aria-label": label,
-    className: (0, _runtime.ax)([styles.root, defaultWidth === 0 && styles.hidden, hasBorder && styles.border, xcss]),
+    "aria-label": label
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: (0, _runtime.ax)([styles.root, !isMotionUpliftEnabled && defaultWidth === 0 && styles.hidden, hasBorder && styles.border, isMotionUpliftEnabled ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
+    (0, _react2.cx)(xcss, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting) : xcss]),
     style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _constants.panelVar, panelVariableWidth), '--minWidth', "".concat(minWidth, "px")),
     "data-testid": testId,
-    ref: ref
+    ref: mergedRef
   }, dangerouslyHoistSlotSizes &&
   /*#__PURE__*/
   // ------ START UNSAFE STYLES ------

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

@@ -1,11 +1,15 @@
 
 ._nd5l1b6c{grid-area:main/aside/aside/aside}
+._y44v1s3l{animation:var(--ds-panel-enter,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}
+._y44vqhwn{animation:var(--ds-panel-exit,.2s cubic-bezier(.6,0,.8,.6) SlideOut100PercentRight)}
 ._191wglyw{border-inline-start:none}._10fph9n0{justify-self:end}
 ._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._18m91wug{overflow-y:auto}
 ._1bsb1dxx{width:min(90%,var(--minWidth))}
 ._1e0cglyw{display:none}
+._1o51eoah{animation-fill-mode:backwards}
+._1o51q7pw{animation-fill-mode:forwards}
 ._1pbykb7n{z-index:1}
 ._1reo1wug{overflow-x:auto}
 ._4t3i1osq{height:100%}

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

@@ -2,7 +2,10 @@
 import "./panel.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { cx } from '@compiled/react';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { useMotion, Reanimate } from '@atlaskit/motion/use-motion';
 import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
 import { media } from '@atlaskit/primitives/responsive';
@@ -29,7 +32,9 @@ const styles = {
   root: "_nd5l1b6c _10fph9n0 _vchhusvi _1pbykb7n _4t3ieqxy _kqsw1if8 _152timx3 _bfhk1bhr _1bsb1dxx _14b54rrg _4ap3vuon _1dhy1c6w _9sns1wug",
   border: "_191wglyw _16qs130s _1w6eia51 _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
-  hidden: "_1e0cglyw"
+  hidden: "_1e0cglyw",
+  entering: "_y44v1s3l _1o51eoah",
+  exiting: "_y44vqhwn _1o51q7pw"
 };
 
 /**
@@ -53,6 +58,21 @@ export function Panel({
   const id = useLayoutId({
     providedId
   });
+
+  // useMotion is applied only when the `platform-dst-motion-uplift-panel` gate is enabled.
+  const {
+    state,
+    ref: motionRef,
+    reanimate
+  } = useMotion({
+    onFinish: state => {
+      if (state === 'exiting' && defaultWidthRef.current === 0) {
+        // Set width to 0 as animation is complete
+        setWidth(0);
+      }
+    }
+  });
+  const isMotionUpliftEnabled = fg('platform-dst-motion-uplift-panel');
   const defaultWidth = useSafeDefaultWidth({
     defaultWidthProp,
     fallbackDefaultWidth,
@@ -76,6 +96,13 @@ export function Panel({
   // Used to track the previous value of the `defaultWidth` prop, for logging dev warnings when it changes.
   const defaultWidthRef = useRef(defaultWidth);
 
+  // `mergeRefs` returns a new callback ref on every call, and combined with a new array literal
+  // this would cause React to detach/re-attach the ref on every render. Memoise it so the merged
+  // ref is stable across renders.
+  const mergedRef = useMemo(() => isMotionUpliftEnabled ? mergeRefs([ref, motionRef]) : ref,
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isMotionUpliftEnabled, motionRef]);
+
   /**
    * TODO: Remove this useEffect once the `width: 0` usage is removed from Jira.
    * It updates the width state based on changes to `defaultWidth`, as a temporary stopgap to support Jira's current usage.
@@ -85,13 +112,23 @@ export function Panel({
     if (defaultWidthRef.current === defaultWidth) {
       return;
     }
+    if (isMotionUpliftEnabled) {
+      if (defaultWidth === 0) {
+        reanimate(Reanimate.exit);
+        defaultWidthRef.current = defaultWidth;
+        // Set width to 0 once the exit animation is complete
+        return;
+      } else if (defaultWidthRef.current === 0) {
+        reanimate(Reanimate.enter);
+      }
+    }
     defaultWidthRef.current = defaultWidth;
     setWidth(defaultWidth);
     if (process.env.NODE_ENV !== 'production') {
       // eslint-disable-next-line no-console
       console.warn('Page Layout warning\n\n', 'The value of the `defaultWidth` prop on the `Panel` layout slot component has changed. This should not be changed after the component has been mounted.\n\n', 'In the future, changes to the `defaultWidth` prop will not be respected. It is only supported as a stopgap to enable migration from Nav3 to Nav4.\n\n');
     }
-  }, [defaultWidth]);
+  }, [defaultWidth, isMotionUpliftEnabled, reanimate]);
   const sideNavRef = useSideNavRef();
 
   /**
@@ -135,15 +172,19 @@ export function Panel({
   return /*#__PURE__*/React.createElement("section", {
     id: id,
     "data-layout-slot": true,
-    "aria-label": label,
-    className: ax([styles.root, defaultWidth === 0 && styles.hidden, hasBorder && styles.border, xcss]),
+    "aria-label": label
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: ax([styles.root, !isMotionUpliftEnabled && defaultWidth === 0 && styles.hidden, hasBorder && styles.border, isMotionUpliftEnabled ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
+    cx(xcss, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting) : xcss]),
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values
       [panelVar]: panelVariableWidth,
       '--minWidth': `${minWidth}px`
     },
     "data-testid": testId,
-    ref: ref
+    ref: mergedRef
   }, dangerouslyHoistSlotSizes &&
   /*#__PURE__*/
   // ------ START UNSAFE STYLES ------

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

@@ -1,11 +1,15 @@
 
 ._nd5l1b6c{grid-area:main/aside/aside/aside}
+._y44v1s3l{animation:var(--ds-panel-enter,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}
+._y44vqhwn{animation:var(--ds-panel-exit,.2s cubic-bezier(.6,0,.8,.6) SlideOut100PercentRight)}
 ._191wglyw{border-inline-start:none}._10fph9n0{justify-self:end}
 ._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._18m91wug{overflow-y:auto}
 ._1bsb1dxx{width:min(90%,var(--minWidth))}
 ._1e0cglyw{display:none}
+._1o51eoah{animation-fill-mode:backwards}
+._1o51q7pw{animation-fill-mode:forwards}
 ._1pbykb7n{z-index:1}
 ._1reo1wug{overflow-x:auto}
 ._4t3i1osq{height:100%}

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

@@ -4,7 +4,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./panel.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { cx } from '@compiled/react';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { useMotion, Reanimate } from '@atlaskit/motion/use-motion';
 import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
 import { media } from '@atlaskit/primitives/responsive';
@@ -31,7 +34,9 @@ var styles = {
   root: "_nd5l1b6c _10fph9n0 _vchhusvi _1pbykb7n _4t3ieqxy _kqsw1if8 _152timx3 _bfhk1bhr _1bsb1dxx _14b54rrg _4ap3vuon _1dhy1c6w _9sns1wug",
   border: "_191wglyw _16qs130s _1w6eia51 _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
-  hidden: "_1e0cglyw"
+  hidden: "_1e0cglyw",
+  entering: "_y44v1s3l _1o51eoah",
+  exiting: "_y44vqhwn _1o51q7pw"
 };
 
 /**
@@ -58,6 +63,20 @@ export function Panel(_ref) {
   var id = useLayoutId({
     providedId: providedId
   });
+
+  // useMotion is applied only when the `platform-dst-motion-uplift-panel` gate is enabled.
+  var _useMotion = useMotion({
+      onFinish: function onFinish(state) {
+        if (state === 'exiting' && defaultWidthRef.current === 0) {
+          // Set width to 0 as animation is complete
+          setWidth(0);
+        }
+      }
+    }),
+    state = _useMotion.state,
+    motionRef = _useMotion.ref,
+    reanimate = _useMotion.reanimate;
+  var isMotionUpliftEnabled = fg('platform-dst-motion-uplift-panel');
   var defaultWidth = useSafeDefaultWidth({
     defaultWidthProp: defaultWidthProp,
     fallbackDefaultWidth: fallbackDefaultWidth,
@@ -84,6 +103,15 @@ export function Panel(_ref) {
   // Used to track the previous value of the `defaultWidth` prop, for logging dev warnings when it changes.
   var defaultWidthRef = useRef(defaultWidth);
 
+  // `mergeRefs` returns a new callback ref on every call, and combined with a new array literal
+  // this would cause React to detach/re-attach the ref on every render. Memoise it so the merged
+  // ref is stable across renders.
+  var mergedRef = useMemo(function () {
+    return isMotionUpliftEnabled ? mergeRefs([ref, motionRef]) : ref;
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isMotionUpliftEnabled, motionRef]);
+
   /**
    * TODO: Remove this useEffect once the `width: 0` usage is removed from Jira.
    * It updates the width state based on changes to `defaultWidth`, as a temporary stopgap to support Jira's current usage.
@@ -93,13 +121,23 @@ export function Panel(_ref) {
     if (defaultWidthRef.current === defaultWidth) {
       return;
     }
+    if (isMotionUpliftEnabled) {
+      if (defaultWidth === 0) {
+        reanimate(Reanimate.exit);
+        defaultWidthRef.current = defaultWidth;
+        // Set width to 0 once the exit animation is complete
+        return;
+      } else if (defaultWidthRef.current === 0) {
+        reanimate(Reanimate.enter);
+      }
+    }
     defaultWidthRef.current = defaultWidth;
     setWidth(defaultWidth);
     if (process.env.NODE_ENV !== 'production') {
       // eslint-disable-next-line no-console
       console.warn('Page Layout warning\n\n', 'The value of the `defaultWidth` prop on the `Panel` layout slot component has changed. This should not be changed after the component has been mounted.\n\n', 'In the future, changes to the `defaultWidth` prop will not be respected. It is only supported as a stopgap to enable migration from Nav3 to Nav4.\n\n');
     }
-  }, [defaultWidth]);
+  }, [defaultWidth, isMotionUpliftEnabled, reanimate]);
   var sideNavRef = useSideNavRef();
 
   /**
@@ -143,11 +181,15 @@ export function Panel(_ref) {
   return /*#__PURE__*/React.createElement("section", {
     id: id,
     "data-layout-slot": true,
-    "aria-label": label,
-    className: ax([styles.root, defaultWidth === 0 && styles.hidden, hasBorder && styles.border, xcss]),
+    "aria-label": label
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: ax([styles.root, !isMotionUpliftEnabled && defaultWidth === 0 && styles.hidden, hasBorder && styles.border, isMotionUpliftEnabled ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
+    cx(xcss, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting) : xcss]),
     style: _defineProperty(_defineProperty({}, panelVar, panelVariableWidth), '--minWidth', "".concat(minWidth, "px")),
     "data-testid": testId,
-    ref: ref
+    ref: mergedRef
   }, dangerouslyHoistSlotSizes &&
   /*#__PURE__*/
   // ------ START UNSAFE STYLES ------

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "10.5.7",
+	"version": "10.6.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -62,6 +62,7 @@
 		"@atlaskit/icon": "^37.0.0",
 		"@atlaskit/layering": "^4.1.0",
 		"@atlaskit/logo": "^21.4.0",
+		"@atlaskit/motion": "^7.4.0",
 		"@atlaskit/platform-feature-flags": "^2.0.0",
 		"@atlaskit/platform-feature-flags-react": "^1.1.0",
 		"@atlaskit/popup": "^5.1.0",
@@ -109,7 +110,7 @@
 		"@atlaskit/textfield": "^9.1.0",
 		"@atlaskit/top-layer": "^1.8.0",
 		"@atlassian/feature-flags-test-utils": "^1.2.0",
-		"@atlassian/gemini": "^1.49.0",
+		"@atlassian/gemini": "^1.50.0",
 		"@atlassian/search-dialog": "^10.5.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.1.0",
@@ -129,7 +130,8 @@
 			"dom-events": "use-bind-event-listener",
 			"design-tokens": [
 				"color",
-				"spacing"
+				"spacing",
+				"motion"
 			],
 			"deprecation": "no-deprecated-imports",
 			"imports": [
@@ -171,6 +173,10 @@
 			"type": "boolean",
 			"referenceOnly": true
 		},
+		"platform-dst-motion-uplift-panel": {
+			"type": "boolean",
+			"referenceOnly": true
+		},
 		"platform-ads-nav-fixed-height": {
 			"type": "boolean"
 		}