@atlaskit/side-navigation 1.2.15 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/side-navigation
 
+## 1.3.1
+
+### Patch Changes
+
+- [`5f36f2ce46d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f36f2ce46d) - Adds a defensive `css()` function wrapping to many of the style calls in the side-navigation package. This is expected to help fix an issue with certain styles in side navigation not appearing if consumed when different versions of `@emotion` are present on the page.
+
+## 1.3.0
+
+### Minor Changes
+
+- [`02e2f7aacef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/02e2f7aacef) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.2.15
 
 ### Patch Changes

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

@@ -9,19 +9,30 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _motion = require("@atlaskit/motion");
 
 var _context = require("../NestableNavigationContent/context");
 
 /** @jsx jsx */
-
+var baseMotionStyles = (0, _react.css)({
+  position: 'absolute',
+  zIndex: 1,
+  top: 0,
+  right: 0,
+  left: 0
+});
+var enteringStyles = (0, _react.css)({
+  position: 'static',
+  zIndex: 2
+});
 /**
  * __Loading items__
  *
  * Loading items conditionally render based on the useShouldNestedElementRender() hook.
  */
+
 var LoadingItems = function LoadingItems(_ref) {
   var children = _ref.children,
       isLoading = _ref.isLoading,
@@ -35,20 +46,13 @@ var LoadingItems = function LoadingItems(_ref) {
     return children;
   }
 
-  return (0, _core.jsx)(_motion.ExitingPersistence, null, (0, _core.jsx)(_motion.FadeIn, {
+  return (0, _react.jsx)(_motion.ExitingPersistence, null, (0, _react.jsx)(_motion.FadeIn, {
     key: "loading-section-".concat(isLoading),
     duration: _motion.mediumDurationMs
   }, function (motion, state) {
-    return (0, _core.jsx)("span", (0, _extends2.default)({}, motion, {
+    return (0, _react.jsx)("span", (0, _extends2.default)({}, motion, {
       "data-testid": testId && "".concat(testId, "--").concat(state),
-      css: {
-        // Used to have the exiting section appear above the entering one.
-        position: state === 'entering' ? undefined : 'absolute',
-        zIndex: state === 'entering' ? 2 : 1,
-        top: 0,
-        left: 0,
-        right: 0
-      }
+      css: [baseMotionStyles, state === 'entering' && enteringStyles]
     }), isLoading ? fallback : children);
   }));
 };

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

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _useScrollbarWidth = _interopRequireDefault(require("@atlaskit/ds-lib/use-scrollbar-width"));
 
@@ -40,18 +40,18 @@ var NavigationContent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref
     return children;
   }
 
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     ref: ref,
     css: (0, _styles.outerContainerCSS)({
       showTopScrollIndicator: showTopScrollIndicator,
       scrollbarWidth: scrollbar.width
     })
-  }, (0, _core.jsx)("div", {
+  }, (0, _react2.jsx)("div", {
     ref: scrollbar.ref,
     css: (0, _styles.innerContainerCSS)({
       showTopScrollIndicator: showTopScrollIndicator
     })
-  }, (0, _core.jsx)("div", {
+  }, (0, _react2.jsx)("div", {
     css: (0, _styles.containerCSS)({
       showTopScrollIndicator: showTopScrollIndicator
     })

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

@@ -5,16 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
 /** @jsx jsx */
-var footerCSS = {
-  position: 'relative',
+var footerStyles = (0, _react.css)({
   padding: (0, _constants.gridSize)(),
-  paddingBottom: (0, _constants.gridSize)() * 1.75
-};
+  paddingBottom: (0, _constants.gridSize)() * 1.75,
+  position: 'relative'
+});
 /**
  * __Navigation footer__
  *
@@ -26,8 +26,8 @@ var footerCSS = {
 
 var NavigationFooter = function NavigationFooter(_ref) {
   var children = _ref.children;
-  return (0, _core.jsx)("div", {
-    css: footerCSS
+  return (0, _react.jsx)("div", {
+    css: footerStyles
   }, children);
 };
 

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

@@ -5,12 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
 /** @jsx jsx */
-
+var navigationHeaderStyles = (0, _react.css)({
+  paddingTop: (0, _constants.gridSize)() * 3,
+  paddingRight: (0, _constants.gridSize)(),
+  paddingBottom: (0, _constants.gridSize)(),
+  paddingLeft: (0, _constants.gridSize)()
+});
 /**
  * __Navigation header__
  *
@@ -19,16 +24,12 @@ var _constants = require("@atlaskit/theme/constants");
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
+
 var NavigationHeader = function NavigationHeader(props) {
   var children = props.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     "data-navheader": true,
-    css: {
-      paddingTop: (0, _constants.gridSize)() * 3,
-      paddingBottom: (0, _constants.gridSize)(),
-      paddingLeft: (0, _constants.gridSize)(),
-      paddingRight: (0, _constants.gridSize)()
-    }
+    css: navigationHeaderStyles
   }, children);
 };
 

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

@@ -13,7 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _motion = require("@atlaskit/motion");
 
@@ -29,7 +29,18 @@ var _nestingMotion = require("./nesting-motion");
 // Named so ERT doesn't pick up the override name as a type.
 var ROOT_ID = 'ATLASKIT_NESTED_ROOT';
 exports.ROOT_ID = ROOT_ID;
-
+var nestableNavigationContentStyles = (0, _react2.css)({
+  height: '100%',
+  position: 'relative',
+  outline: 'none'
+});
+var nestingRootStyles = (0, _react2.css)({
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  flexDirection: 'column'
+});
 /**
  * __Nestable navigation content__
  *
@@ -38,6 +49,7 @@ exports.ROOT_ID = ROOT_ID;
  * - [Examples](https://atlassian.design/components/side-navigation/examples#nested-navigation)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
+
 var NestableNavigationContent = function NestableNavigationContent(props) {
   var containerRef = (0, _react.useRef)(null);
   var children = props.children,
@@ -62,7 +74,7 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
 
   var backTestId = testId && "".concat(testId, "--go-back-item");
   var renderGoBackItem = overrides && overrides.GoBackItem && overrides.GoBackItem.render ? overrides.GoBackItem.render : function (props) {
-    return (0, _core.jsx)(_Item.GoBackItem, props, "Go back");
+    return (0, _react2.jsx)(_Item.GoBackItem, props, "Go back");
   };
   var onNestHandler = (0, _react.useCallback)(function (layerId) {
     onChange && onChange(committedStack.concat(layerId));
@@ -149,17 +161,13 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
     }
   };
 
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     "data-testid": testId,
-    css: {
-      position: 'relative',
-      height: '100%',
-      outline: 'none'
-    },
+    css: nestableNavigationContentStyles,
     ref: containerRef,
     tabIndex: -1,
     onClick: manageFocus
-  }, (0, _core.jsx)(_motion.ExitingPersistence, null, (0, _core.jsx)(_nestingMotion.NestingMotion // Key is needed to have a unique react instance per stack name.
+  }, (0, _react2.jsx)(_motion.ExitingPersistence, null, (0, _react2.jsx)(_nestingMotion.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,
@@ -167,19 +175,13 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
     exitTo: transition === 'nesting' ? 'left' : 'right',
     testId: testId && "".concat(testId, "-anim")
   }, function (motion) {
-    return (0, _core.jsx)("div", (0, _extends2.default)({
-      css: {
-        position: 'absolute',
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        flexDirection: 'column'
-      }
-    }, motion), (0, _core.jsx)(_context.NestedContext.Provider, {
+    return (0, _react2.jsx)("div", (0, _extends2.default)({
+      css: nestingRootStyles
+    }, motion), (0, _react2.jsx)(_context.NestedContext.Provider, {
       // This provider is inside the NestingMotion to ensure it keeps a stale
       // reference to the previous value.
       value: context
-    }, (0, _core.jsx)(_NestingItem.default, {
+    }, (0, _react2.jsx)(_NestingItem.default, {
       title: "",
       id: ROOT_ID
     }, children)));

package/dist/cjs/components/NestableNavigationContent/nesting-motion.js

@@ -9,7 +9,7 @@ exports.NestingMotion = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _motion = require("@atlaskit/motion");
 
@@ -25,7 +25,7 @@ var NestingMotion = function NestingMotion(props) {
       enterFrom = props.enterFrom,
       exitTo = props.exitTo,
       testId = props.testId;
-  return (0, _core.jsx)(_motion.SlideIn, {
+  return (0, _react.jsx)(_motion.SlideIn, {
     exitTo: exitTo,
     enterFrom: enterFrom,
     animationTimingFunction: function animationTimingFunction(_) {

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

@@ -21,7 +21,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _arrowRightCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-right-circle"));
 
@@ -49,11 +49,19 @@ 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,
@@ -121,17 +129,11 @@ var NestingItem = function NestingItem(props) {
   }, [isInteracted, onClick, onNest, id]);
 
   if (currentStackId === id) {
-    return (0, _core.jsx)(_context.NestedContext.Provider, {
+    return (0, _react2.jsx)(_context.NestedContext.Provider, {
       value: context
-    }, stack.length >= 1 && (0, _core.jsx)("div", {
-      css: {
-        marginLeft: (0, _constants.gridSize)(),
-        marginRight: (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
-      }
-    }, backButton), (0, _core.jsx)(_index.NavigationContent, {
+    }, stack.length >= 1 && (0, _react2.jsx)("div", {
+      css: nestingItemStyles
+    }, backButton), (0, _react2.jsx)(_index.NavigationContent, {
       testId: testId,
       showTopScrollIndicator: stack.length >= 1
     }, children));
@@ -142,11 +144,11 @@ var NestingItem = function NestingItem(props) {
   }
 
   var componentProps = _objectSpread(_objectSpread({
-    iconAfter: (0, _core.jsx)(_react.Fragment, null, iconAfter ? (0, _core.jsx)("span", {
+    iconAfter: (0, _react2.jsx)(_react.Fragment, null, iconAfter ? (0, _react2.jsx)("span", {
       "data-custom-icon": true
-    }, iconAfter) : null, (0, _core.jsx)("span", {
+    }, iconAfter) : null, (0, _react2.jsx)("span", {
       "data-right-arrow": true
-    }, (0, _core.jsx)(_arrowRightCircle.default, {
+    }, (0, _react2.jsx)(_arrowRightCircle.default, {
       testId: testId && "".concat(testId, "--item--right-arrow"),
       secondaryColor: "var(--ds-surface, ".concat(_colors.N10, ")"),
       label: ""
@@ -160,13 +162,13 @@ var NestingItem = function NestingItem(props) {
   });
 
   if (component) {
-    return (0, _core.jsx)(_index.CustomItem, (0, _extends2.default)({}, componentProps, {
+    return (0, _react2.jsx)(_index.CustomItem, (0, _extends2.default)({}, componentProps, {
       //@ts-expect-error TODO Fix legit TypeScript 3.9.6 improved inference error
       component: component
     }));
   }
 
-  return (0, _core.jsx)(_index.ButtonItem, componentProps);
+  return (0, _react2.jsx)(_index.ButtonItem, componentProps);
 };
 
 var _default = NestingItem;

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

@@ -7,14 +7,24 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
 /** @jsx jsx */
-
+var sideNavStyles = (0, _react2.css)({
+  display: 'flex',
+  width: '100%',
+  minWidth: (0, _constants.gridSize)() * 30,
+  height: '100%',
+  position: 'relative',
+  flexDirection: 'column',
+  backgroundColor: "var(--ds-surface, ".concat(_colors.N10, ")"),
+  color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
+  overflow: 'hidden'
+});
 /**
  * __Side navigation__
  *
@@ -24,25 +34,16 @@ var _constants = require("@atlaskit/theme/constants");
  * - [Code](https://atlassian.design/components/side-navigation/code)
  * - [Usage](https://atlassian.design/components/side-navigation/usage)
  */
+
 var SideNavigation = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
       testId = props.testId,
       label = props.label;
-  return (0, _core.jsx)("nav", {
+  return (0, _react2.jsx)("nav", {
     ref: ref,
     "data-testid": testId,
     "aria-label": label,
-    css: {
-      width: '100%',
-      height: '100%',
-      color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
-      minWidth: (0, _constants.gridSize)() * 30,
-      backgroundColor: "var(--ds-surface, ".concat(_colors.N10, ")"),
-      position: 'relative',
-      display: 'flex',
-      flexDirection: 'column',
-      overflow: 'hidden'
-    }
+    css: sideNavStyles
   }, children);
 });
 var _default = SideNavigation;

package/dist/cjs/version.json

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

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

@@ -1,15 +1,26 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { ExitingPersistence, FadeIn, mediumDurationMs } from '@atlaskit/motion';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
-
+const baseMotionStyles = css({
+  position: 'absolute',
+  zIndex: 1,
+  top: 0,
+  right: 0,
+  left: 0
+});
+const enteringStyles = css({
+  position: 'static',
+  zIndex: 2
+});
 /**
  * __Loading items__
  *
  * Loading items conditionally render based on the useShouldNestedElementRender() hook.
  */
+
 const LoadingItems = ({
   children,
   isLoading,
@@ -29,14 +40,7 @@ const LoadingItems = ({
     duration: mediumDurationMs
   }, (motion, state) => jsx("span", _extends({}, motion, {
     "data-testid": testId && `${testId}--${state}`,
-    css: {
-      // Used to have the exiting section appear above the entering one.
-      position: state === 'entering' ? undefined : 'absolute',
-      zIndex: state === 'entering' ? 2 : 1,
-      top: 0,
-      left: 0,
-      right: 0
-    }
+    css: [baseMotionStyles, state === 'entering' && enteringStyles]
   }), isLoading ? fallback : children)));
 };
 

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import useScrollbarWidth from '@atlaskit/ds-lib/use-scrollbar-width';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
 import { containerCSS, innerContainerCSS, outerContainerCSS } from './styles';

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

@@ -1,11 +1,11 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-const footerCSS = {
-  position: 'relative',
+const footerStyles = css({
   padding: gridSize(),
-  paddingBottom: gridSize() * 1.75
-};
+  paddingBottom: gridSize() * 1.75,
+  position: 'relative'
+});
 /**
  * __Navigation footer__
  *
@@ -19,7 +19,7 @@ const NavigationFooter = ({
   children
 }) => {
   return jsx("div", {
-    css: footerCSS
+    css: footerStyles
   }, children);
 };
 

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

@@ -1,7 +1,12 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-
+const navigationHeaderStyles = css({
+  paddingTop: gridSize() * 3,
+  paddingRight: gridSize(),
+  paddingBottom: gridSize(),
+  paddingLeft: gridSize()
+});
 /**
  * __Navigation header__
  *
@@ -10,18 +15,14 @@ import { gridSize } from '@atlaskit/theme/constants';
  * - [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", {
     "data-navheader": true,
-    css: {
-      paddingTop: gridSize() * 3,
-      paddingBottom: gridSize(),
-      paddingLeft: gridSize(),
-      paddingRight: gridSize()
-    }
+    css: navigationHeaderStyles
   }, children);
 };
 

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { ExitingPersistence } from '@atlaskit/motion';
 import { GoBackItem as GoBackButton } from '../Item';
 import { default as NestingItem } from '../NestingItem';
@@ -10,7 +10,18 @@ import { NestedContext } from './context';
 import { NestingMotion } from './nesting-motion'; // Named so ERT doesn't pick up the override name as a type.
 
 export const ROOT_ID = 'ATLASKIT_NESTED_ROOT';
-
+const nestableNavigationContentStyles = css({
+  height: '100%',
+  position: 'relative',
+  outline: 'none'
+});
+const nestingRootStyles = css({
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  flexDirection: 'column'
+});
 /**
  * __Nestable navigation content__
  *
@@ -19,6 +30,7 @@ export const ROOT_ID = 'ATLASKIT_NESTED_ROOT';
  * - [Examples](https://atlassian.design/components/side-navigation/examples#nested-navigation)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
+
 const NestableNavigationContent = props => {
   const containerRef = useRef(null);
   const {
@@ -120,11 +132,7 @@ const NestableNavigationContent = props => {
 
   return jsx("div", {
     "data-testid": testId,
-    css: {
-      position: 'relative',
-      height: '100%',
-      outline: 'none'
-    },
+    css: nestableNavigationContentStyles,
     ref: containerRef,
     tabIndex: -1,
     onClick: manageFocus
@@ -136,13 +144,7 @@ const NestableNavigationContent = props => {
     exitTo: transition === 'nesting' ? 'left' : 'right',
     testId: testId && `${testId}-anim`
   }, motion => jsx("div", _extends({
-    css: {
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      display: 'flex',
-      flexDirection: 'column'
-    }
+    css: nestingRootStyles
   }, motion), jsx(NestedContext.Provider, {
     // This provider is inside the NestingMotion to ensure it keeps a stale
     // reference to the previous value.

package/dist/es2019/components/NestableNavigationContent/nesting-motion.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { easeOut, SlideIn } from '@atlaskit/motion';
 
 /**

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import RightArrow from '@atlaskit/icon/glyph/arrow-right-circle';
 import { N10 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
@@ -11,12 +11,19 @@ import { ButtonItem, CustomItem, NavigationContent } from '../index';
 import { ROOT_ID } from '../NestableNavigationContent';
 import { NestedContext, useNestedContext } from '../NestableNavigationContent/context';
 import { nestingItemStyle } from './styles';
-
+const nestingItemStyles = css({
+  marginRight: gridSize(),
+  marginLeft: gridSize(),
+  // This padding bottom needs to match the section margin inside @atlaskit/menu.
+  paddingTop: gridSize() * 0.75,
+  paddingBottom: 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.
  */
+
 const NestingItem = props => {
   const {
     children,
@@ -79,13 +86,7 @@ const NestingItem = props => {
     return jsx(NestedContext.Provider, {
       value: context
     }, stack.length >= 1 && jsx("div", {
-      css: {
-        marginLeft: gridSize(),
-        marginRight: gridSize(),
-        // This padding bottom needs to match the section margin inside @atlaskit/menu.
-        paddingTop: gridSize() * 0.75,
-        paddingBottom: gridSize() * 0.75
-      }
+      css: nestingItemStyles
     }, backButton), jsx(NavigationContent, {
       testId: testId,
       showTopScrollIndicator: stack.length >= 1