@atlaskit/side-navigation 1.4.2 → 1.5.0

package/dist/cjs/components/NestingItem/index.js

@@ -23,12 +23,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@emotion/react");
 
+var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
+
 var _arrowRightCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-right-circle"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _constants = require("@atlaskit/theme/constants");
-
 var _styles = require("../../common/styles");
 
 var _index = require("../index");
@@ -51,19 +51,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var nestingItemStyles = (0, _react2.css)({
-  marginRight: (0, _constants.gridSize)(),
-  marginLeft: (0, _constants.gridSize)(),
-  // This padding bottom needs to match the section margin inside @atlaskit/menu.
-  paddingTop: (0, _constants.gridSize)() * 0.75,
-  paddingBottom: (0, _constants.gridSize)() * 0.75
-});
 /**
  * NestingItem will render itself differently depending in what context it is rendered in.
  * When not open - it will render itself as an item.
  * When open - it will render its children.
  */
-
 var NestingItem = function NestingItem(props) {
   var children = props.children,
       iconAfter = props.iconAfter,
@@ -138,8 +130,11 @@ var NestingItem = function NestingItem(props) {
   if (currentStackId === id) {
     return (0, _react2.jsx)(_context.NestedContext.Provider, {
       value: context
-    }, stack.length >= 1 && (0, _react2.jsx)("div", {
-      css: nestingItemStyles
+    }, stack.length >= 1 && (0, _react2.jsx)(_box.default, {
+      as: "div",
+      display: "block",
+      paddingBlock: "scale.075",
+      paddingInline: "scale.100"
     }, backButton), (0, _react2.jsx)(_index.NavigationContent, {
       testId: testId,
       showTopScrollIndicator: stack.length >= 1
@@ -151,10 +146,14 @@ var NestingItem = function NestingItem(props) {
   }
 
   var componentProps = _objectSpread(_objectSpread({
-    iconAfter: (0, _react2.jsx)(_react.Fragment, null, iconAfter ? (0, _react2.jsx)("span", {
-      "data-custom-icon": true
-    }, iconAfter) : null, (0, _react2.jsx)("span", {
-      "data-right-arrow": true
+    iconAfter: (0, _react2.jsx)(_react.Fragment, null, iconAfter ? (0, _react2.jsx)(_box.default, {
+      "data-custom-icon": true,
+      display: "inline",
+      as: "span"
+    }, iconAfter) : null, (0, _react2.jsx)(_box.default, {
+      "data-right-arrow": true,
+      display: "inline",
+      as: "span"
     }, (0, _react2.jsx)(_arrowRightCircle.default, {
       testId: testId && "".concat(testId, "--item--right-arrow"),
       secondaryColor: "var(--ds-surface, ".concat(_colors.N10, ")"),

package/dist/cjs/components/Section/heading-item.js

@@ -31,7 +31,7 @@ var HeadingItem = function HeadingItem(props) {
     return null;
   }
 
-  var cssFn = (0, _styles.overrideStyleFunction)(_styles.sectionHeaderStyle, props.cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides, @repo/internal/react/no-unsafe-spread-props
+  var cssFn = (0, _styles.overrideStyleFunction)(_styles.sectionHeaderSpacingStyles, props.cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides, @repo/internal/react/no-unsafe-spread-props
 
   return /*#__PURE__*/_react.default.createElement(_menu.HeadingItem, (0, _extends2.default)({}, props, {
     cssFn: cssFn

package/dist/cjs/components/Section/section.js

@@ -47,7 +47,7 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ,
     overrides: {
       HeadingItem: {
-        cssFn: _styles.sectionHeaderStyle
+        cssFn: _styles.sectionHeaderSpacingStyles
       }
     }
   }));

package/dist/cjs/components/Section/skeleton-heading-item.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _menu = require("@atlaskit/menu");
@@ -17,6 +19,10 @@ var _styles = require("../../common/styles");
 
 var _context = require("../NestableNavigationContent/context");
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 /**
  * __Skeleton heading item__
  *
@@ -35,10 +41,7 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(props) {
   return /*#__PURE__*/_react.default.createElement(_menu.SkeletonHeadingItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
   , (0, _extends2.default)({
     cssFn: function cssFn() {
-      return {
-        paddingLeft: _styles.ITEM_SIDE_PADDING,
-        paddingRight: _styles.ITEM_SIDE_PADDING
-      };
+      return _objectSpread({}, (0, _styles.sectionHeaderSpacingStyles)());
     } // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 
   }, props));

package/dist/cjs/components/SideNavigation/index.js

@@ -11,13 +11,12 @@ var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _constants = require("@atlaskit/theme/constants");
-
 /** @jsx jsx */
+var sidebarMinWidth = '240px';
 var sideNavStyles = (0, _react2.css)({
   display: 'flex',
   width: '100%',
-  minWidth: (0, _constants.gridSize)() * 30,
+  minWidth: sidebarMinWidth,
   height: '100%',
   position: 'relative',
   flexDirection: 'column',
@@ -39,12 +38,14 @@ var SideNavigation = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
       testId = props.testId,
       label = props.label;
-  return (0, _react2.jsx)("nav", {
-    ref: ref,
-    "data-testid": testId,
-    "aria-label": label,
-    css: sideNavStyles
-  }, children);
+  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    (0, _react2.jsx)("nav", {
+      ref: ref,
+      "data-testid": testId,
+      "aria-label": label,
+      css: sideNavStyles
+    }, children)
+  );
 });
 var _default = SideNavigation;
 exports.default = _default;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/side-navigation",
-	"version": "1.4.2",
+	"version": "1.5.0",
 	"sideEffects": false
 }

package/dist/es2019/common/styles.js

@@ -1,10 +1,6 @@
-import { B400, B50, N10, N30, N500 } from '@atlaskit/theme/colors';
-import { borderRadius as borderRadiusFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
-const gridSize = gridSizeFn();
+import { B400, B50, N30, N500 } from '@atlaskit/theme/colors';
+import { borderRadius as borderRadiusFn } from '@atlaskit/theme/constants';
 const borderRadius = borderRadiusFn();
-const itemIconSize = gridSize * 3;
-const leftIconRightSpacing = gridSize * 2;
-export const ITEM_SIDE_PADDING = gridSize * 1.25;
 /**
  * Allows chaining of style functions on top of base style functions
  * @param baseStyle the base custom cssFn
@@ -50,12 +46,12 @@ export const baseSideNavItemStyle = ({
   return {
     // This padding is set to ensure that the center of the left icon
     // is approximately center aligned with the horizontal app switcher.
-    padding: `${gridSize}px ${ITEM_SIDE_PADDING}px`,
+    padding: `${"var(--ds-scale-100, 8px)"} ${"var(--ds-scale-100, 10px)"}`,
     borderRadius,
     // -- TODO: DELETE THESE COLOR OVERRIDES WHEN CLEANING UP FALLBACK THEMING --
     // Menu and side navigation are now color aligned so they do not need this!
     // See: https://product-fabric.atlassian.net/browse/DSP-1684
-    backgroundColor: `var(--ds-surface, ${N10})`,
+    backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
     ...(!isDisabled && !isSelected && defaultStyles),
     ...(!isDisabled && isSelected && selectedStyles),
     // -- END TODO --------------------------------------------------------------
@@ -63,17 +59,18 @@ export const baseSideNavItemStyle = ({
       // TODO: Can this be moved into menu?
       // center align icons with app-switcher regardless of size
       display: 'flex',
-      height: itemIconSize,
-      width: itemIconSize,
+      height: "var(--ds-scale-300, 24px)",
+      width: "var(--ds-scale-300, 24px)",
       alignItems: 'center',
       justifyContent: 'center',
-      marginRight: leftIconRightSpacing
+      // this margin could be removed if the respective item had a more
+      // compositional API so an Inline could be used to separate elements instead
+      marginRight: "var(--ds-scale-200, 16px)"
     }
   };
 };
-export const sectionHeaderStyle = () => {
+export const sectionHeaderSpacingStyles = () => {
   return {
-    paddingLeft: `${ITEM_SIDE_PADDING}px`,
-    paddingRight: `${ITEM_SIDE_PADDING}px`
+    paddingInline: "var(--ds-scale-100, 10px)"
   };
 };

package/dist/es2019/components/Footer/index.js

@@ -2,15 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { N500 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
+import { Container } from '../Header';
 import { CustomItem } from '../Item';
 
-const Container = props => {
-  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  return /*#__PURE__*/React.createElement("div", props);
-};
-
 /**
- * __Header__
+ * __Footer__
  *
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
  * - [Code](https://atlassian.design/components/side-navigation/code)
@@ -24,8 +20,8 @@ const Footer = props => {
     alignItems: 'center',
     width: '100%',
     '[data-item-elem-before]': {
-      marginRight: 0,
-      marginBottom: '8px',
+      marginRight: "var(--ds-scale-0, 0px)",
+      marginBottom: "var(--ds-scale-100, 8px)",
       display: 'inline-block'
     },
     '[data-item-title]': {
@@ -35,20 +31,34 @@ const Footer = props => {
     '[data-item-description]': {
       textAlign: 'center',
       display: 'inline-block',
-      margin: '6px'
+      margin: "var(--ds-scale-075, 6px)"
     },
     // Will look interactive if the `component` is anything other than a div.
     'div&:hover': {
-      backgroundColor: 'transparent',
+      backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
       cursor: 'default'
     },
     'div&:active': {
-      backgroundColor: 'transparent',
+      backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
       color: `var(--ds-text-subtle, ${N500})`
     }
-  }), props.cssFn);
-  return /*#__PURE__*/React.createElement(CustomItem // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  , _extends({}, props, {
+  }), props.cssFn); // https://stackoverflow.com/a/39333479
+
+  const safeProps = (({
+    iconBefore,
+    onClick,
+    description,
+    children,
+    testId
+  }) => ({
+    iconBefore,
+    onClick,
+    description,
+    children,
+    testId
+  }))(props);
+
+  return /*#__PURE__*/React.createElement(CustomItem, _extends({}, safeProps, {
     component: props.component || Container // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     ,
     cssFn: cssFn

package/dist/es2019/components/Header/index.js

@@ -1,13 +1,49 @@
 import _extends from "@babel/runtime/helpers/extends";
+
+/* eslint-disable @repo/internal/react/use-primitives */
 import React, { forwardRef } from 'react';
+import Box from '@atlaskit/ds-explorations/box';
 import { N500 } from '@atlaskit/theme/colors';
 import { headingSizes } from '@atlaskit/theme/typography';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
+/**
+ * __Container__
+ *
+ * A container for Header and Footer that safely handles props to the child component
+ */
+
+export const Container = ({
+  children,
+  ...props
+}) => {
+  // https://stackoverflow.com/a/39333479
+  const safeProps = (({
+    className,
+    'data-testid': testId,
+    onClick,
+    onMouseDown,
+    onDragStart,
+    draggable,
+    ref,
+    tabIndex,
+    disabled
+  }) => ({
+    className,
+    testId,
+    onClick,
+    onMouseDown,
+    onDragStart,
+    draggable,
+    ref,
+    tabIndex,
+    disabled
+  }))(props);
 
-const Container = props => {
-  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  return /*#__PURE__*/React.createElement("div", props);
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "div",
+    display: "block"
+  }, safeProps), children);
 };
 
 /**
@@ -27,11 +63,11 @@ const Header = /*#__PURE__*/forwardRef((props, ref) => {
     },
     // Will look interactive if the `component` is anything other than a div.
     'div&:hover': {
-      backgroundColor: 'transparent',
+      backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
       cursor: 'default'
     },
     'div&:active': {
-      backgroundColor: 'transparent',
+      backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
       color: `var(--ds-text, ${N500})`
     }
   }), props.cssFn);

package/dist/es2019/components/Item/skeleton-item.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { SkeletonItem as SkelItem } from '@atlaskit/menu';
-import { ITEM_SIDE_PADDING } from '../../common/styles';
+import { sectionHeaderSpacingStyles } from '../../common/styles';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
 
 /**
  * __Skeleton item__
  *
- * A skeleton item can be used to reduce the perceived laoding time.
+ * A skeleton item can be used to reduce the perceived loading time.
  *
  * - [Examples](https://atlassian.design/components/side-navigation/examples#loading)
  * - [Code](https://atlassian.design/components/side-navigation/code)
@@ -23,12 +23,12 @@ const SkeletonItem = props => {
 
   return /*#__PURE__*/React.createElement(SkelItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
   , _extends({
-    cssFn: () => ({
-      paddingLeft: ITEM_SIDE_PADDING,
-      paddingRight: ITEM_SIDE_PADDING,
+    cssFn: () => ({ ...sectionHeaderSpacingStyles(),
+      // This doubles up & to get a higher specificity as well as to not overwite the base styles.
       '&&::before': {
-        // This doubles up & to get a higher specificity as well as to not overwite the base styles.
-        marginRight: 18
+        height: "var(--ds-scale-300, 20px)",
+        marginRight: "var(--ds-scale-200, 18px)",
+        width: "var(--ds-scale-300, 20px)"
       }
     }) // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 

package/dist/es2019/components/LoadingItems/index.js

@@ -38,7 +38,8 @@ const LoadingItems = ({
   return jsx(ExitingPersistence, null, jsx(FadeIn, {
     key: `loading-section-${isLoading}`,
     duration: mediumDurationMs
-  }, (motion, state) => jsx("span", _extends({}, motion, {
+  }, (motion, state) => // eslint-disable-next-line @repo/internal/react/use-primitives
+  jsx("span", _extends({}, motion, {
     "data-testid": testId && `${testId}--${state}`,
     css: [baseMotionStyles, state === 'entering' && enteringStyles]
   }), isLoading ? fallback : children)));

package/dist/es2019/components/NavigationContent/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable @repo/internal/react/use-primitives */
+
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { jsx } from '@emotion/react';
@@ -16,7 +18,8 @@ import { containerCSS, innerContainerCSS, outerContainerCSS } from './styles';
 const NavigationContent = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     showTopScrollIndicator,
-    children
+    children,
+    testId
   } = props;
   const {
     shouldRender
@@ -27,12 +30,14 @@ const NavigationContent = /*#__PURE__*/forwardRef((props, ref) => {
     return children;
   }
 
+  const typedRef = ref;
   return jsx("div", {
-    ref: ref,
+    ref: typedRef,
     css: outerContainerCSS({
       showTopScrollIndicator,
       scrollbarWidth: scrollbar.width
-    })
+    }),
+    "data-testid": testId
   }, jsx("div", {
     ref: scrollbar.ref,
     css: innerContainerCSS({

package/dist/es2019/components/NavigationContent/styles.js

@@ -7,17 +7,15 @@ const scrollIndicatorZIndex = 1;
 const scrollIndicatorHeight = 2;
 const scrollIndicatorBorderRadius = 1;
 const containerPadding = gridSize();
-const itemHeadingTopMargin = containerPadding * 2.5;
-const itemHeadingBottomMargin = containerPadding * 0.75; // Skeleton content is slightly shorter than the real content.
+const itemHeadingContentHeight = headingSizes.h100.lineHeight;
+const skeletonHeadingHeight = containerPadding;
+const skeletonHeadingMarginOffset = 3; // Skeleton content is slightly shorter than the real content.
 // Because of that we slightly increase the top margin to offset this so the
 // containing size both real and skeleton always equal approx 30px.
 
-const itemHeadingContentHeight = headingSizes.h100.lineHeight;
-const skeletonHeadingHeight = containerPadding;
-const skeletonHeadingMarginOffset = 3;
-const skeletonHeadingTopMargin = itemHeadingTopMargin + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset; // We want to move the entire body up by 3px without affecting the height of the skeleton container.
+const skeletonHeadingTopMargin = containerPadding * 2.5 + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset; // We want to move the entire body up by 3px without affecting the height of the skeleton container.
 
-const skeletonHeadingBottomMargin = itemHeadingBottomMargin + skeletonHeadingMarginOffset;
+const skeletonHeadingBottomMargin = containerPadding * 0.75 + skeletonHeadingMarginOffset;
 
 /**
  * This outer container css contains the "real" scroll indicators which are
@@ -104,13 +102,13 @@ export const containerCSS = opts => ({
   // so the spacing between matches what it would be if the indicator was a "block" element.
   // We use margin here so any child absolutely positioned elements are positioned correctly.
   marginTop: opts.showTopScrollIndicator ? scrollIndicatorHeight : 0,
-  marginLeft: containerPadding,
-  marginRight: containerPadding,
+  marginLeft: "var(--ds-scale-100, 8px)",
+  marginRight: "var(--ds-scale-100, 8px)",
   // Enables child absolutely positioned elements to be positioned relative to this element.
   position: 'relative',
   '& [data-ds--menu--heading-item]': {
-    marginTop: itemHeadingTopMargin,
-    marginBottom: itemHeadingBottomMargin
+    marginBottom: "var(--ds-scale-075, 6px)",
+    marginTop: "var(--ds-scale-200, 20px)"
   },
   '& [data-ds--menu--skeleton-heading-item]': {
     marginTop: skeletonHeadingTopMargin,

package/dist/es2019/components/NavigationFooter/index.js

@@ -1,11 +1,7 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/react';
-import { gridSize } from '@atlaskit/theme/constants';
-const footerStyles = css({
-  padding: gridSize(),
-  paddingBottom: gridSize() * 1.75,
-  position: 'relative'
-});
+import { jsx } from '@emotion/react';
+import Box from '@atlaskit/ds-explorations/box';
+
 /**
  * __Navigation footer__
  *
@@ -14,12 +10,16 @@ const footerStyles = css({
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-
 const NavigationFooter = ({
   children
 }) => {
-  return jsx("div", {
-    css: footerStyles
+  return jsx(Box, {
+    display: "block",
+    position: "relative",
+    padding: "scale.100",
+    UNSAFE_style: {
+      paddingBottom: "var(--ds-scale-200, 14px)"
+    }
   }, children);
 };
 

package/dist/es2019/components/NavigationHeader/index.js

@@ -1,12 +1,7 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/react';
-import { gridSize } from '@atlaskit/theme/constants';
-const navigationHeaderStyles = css({
-  paddingTop: gridSize() * 3,
-  paddingRight: gridSize(),
-  paddingBottom: gridSize(),
-  paddingLeft: gridSize()
-});
+import { jsx } from '@emotion/react';
+import Box from '@atlaskit/ds-explorations/box';
+
 /**
  * __Navigation header__
  *
@@ -15,14 +10,17 @@ const navigationHeaderStyles = css({
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-
 const NavigationHeader = props => {
   const {
     children
   } = props;
-  return jsx("div", {
+  return jsx(Box, {
+    display: "block",
     "data-navheader": true,
-    css: navigationHeaderStyles
+    padding: "scale.100",
+    UNSAFE_style: {
+      paddingTop: "var(--ds-scale-300, 24px)"
+    }
   }, children);
 };
 

package/dist/es2019/components/NestableNavigationContent/index.js

@@ -136,29 +136,32 @@ const NestableNavigationContent = props => {
     }
   };
 
-  return jsx("div", {
-    "data-testid": testId,
-    css: nestableNavigationContentStyles,
-    ref: containerRef,
-    tabIndex: -1,
-    onClick: manageFocus
-  }, jsx(ExitingPersistence, null, jsx(NestingMotion // Key is needed to have a unique react instance per stack name.
-  // This enables us to easily animate it in & out with exiting persistence.
-  , {
-    key: currentStackId,
-    enterFrom: transition === 'nesting' ? 'right' : 'left',
-    exitTo: transition === 'nesting' ? 'left' : 'right',
-    testId: testId && `${testId}-anim`
-  }, motion => jsx("div", _extends({
-    css: nestingRootStyles
-  }, motion), jsx(NestedContext.Provider, {
-    // This provider is inside the NestingMotion to ensure it keeps a stale
-    // reference to the previous value.
-    value: context
-  }, jsx(NestingItem, {
-    title: "",
-    id: ROOT_ID
-  }, children))))));
+  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    jsx("div", {
+      "data-testid": testId,
+      css: nestableNavigationContentStyles,
+      ref: containerRef,
+      tabIndex: -1,
+      onClick: manageFocus
+    }, jsx(ExitingPersistence, null, jsx(NestingMotion // Key is needed to have a unique react instance per stack name.
+    // This enables us to easily animate it in & out with exiting persistence.
+    , {
+      key: currentStackId,
+      enterFrom: transition === 'nesting' ? 'right' : 'left',
+      exitTo: transition === 'nesting' ? 'left' : 'right',
+      testId: testId && `${testId}-anim`
+    }, motion => // eslint-disable-next-line @repo/internal/react/use-primitives
+    jsx("div", _extends({
+      css: nestingRootStyles
+    }, motion), jsx(NestedContext.Provider, {
+      // This provider is inside the NestingMotion to ensure it keeps a stale
+      // reference to the previous value.
+      value: context
+    }, jsx(NestingItem, {
+      title: "",
+      id: ROOT_ID
+    }, children))))))
+  );
 };
 
 export default NestableNavigationContent;