@atlaskit/side-navigation 1.3.0 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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

@@ -16,12 +16,23 @@ 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,
@@ -41,14 +52,7 @@ var LoadingItems = function LoadingItems(_ref) {
   }, function (motion, state) {
     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/NavigationFooter/index.js

@@ -10,11 +10,11 @@ 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__
  *
@@ -27,7 +27,7 @@ var footerCSS = {
 var NavigationFooter = function NavigationFooter(_ref) {
   var children = _ref.children;
   return (0, _react.jsx)("div", {
-    css: footerCSS
+    css: footerStyles
   }, children);
 };
 

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

@@ -10,7 +10,12 @@ 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, _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

@@ -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,
@@ -151,11 +163,7 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
 
   return (0, _react2.jsx)("div", {
     "data-testid": testId,
-    css: {
-      position: 'relative',
-      height: '100%',
-      outline: 'none'
-    },
+    css: nestableNavigationContentStyles,
     ref: containerRef,
     tabIndex: -1,
     onClick: manageFocus
@@ -168,13 +176,7 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
     testId: testId && "".concat(testId, "-anim")
   }, function (motion) {
     return (0, _react2.jsx)("div", (0, _extends2.default)({
-      css: {
-        position: 'absolute',
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        flexDirection: 'column'
-      }
+      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.

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

@@ -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,
@@ -124,13 +132,7 @@ var NestingItem = function NestingItem(props) {
     return (0, _react2.jsx)(_context.NestedContext.Provider, {
       value: context
     }, stack.length >= 1 && (0, _react2.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
-      }
+      css: nestingItemStyles
     }, backButton), (0, _react2.jsx)(_index.NavigationContent, {
       testId: testId,
       showTopScrollIndicator: stack.length >= 1

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

@@ -14,7 +14,17 @@ 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,6 +34,7 @@ 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,
@@ -32,17 +43,7 @@ var SideNavigation = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     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.3.0",
+	"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/react';
+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/NavigationFooter/index.js

@@ -1,11 +1,11 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+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/react';
+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/react';
+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/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/react';
+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

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

@@ -1,9 +1,19 @@
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { N10, N500 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
-
+const sideNavStyles = css({
+  display: 'flex',
+  width: '100%',
+  minWidth: gridSize() * 30,
+  height: '100%',
+  position: 'relative',
+  flexDirection: 'column',
+  backgroundColor: `var(--ds-surface, ${N10})`,
+  color: `var(--ds-text-subtle, ${N500})`,
+  overflow: 'hidden'
+});
 /**
  * __Side navigation__
  *
@@ -13,6 +23,7 @@ import { gridSize } from '@atlaskit/theme/constants';
  * - [Code](https://atlassian.design/components/side-navigation/code)
  * - [Usage](https://atlassian.design/components/side-navigation/usage)
  */
+
 const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
@@ -23,17 +34,7 @@ const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref,
     "data-testid": testId,
     "aria-label": label,
-    css: {
-      width: '100%',
-      height: '100%',
-      color: `var(--ds-text-subtle, ${N500})`,
-      minWidth: gridSize() * 30,
-      backgroundColor: `var(--ds-surface, ${N10})`,
-      position: 'relative',
-      display: 'flex',
-      flexDirection: 'column',
-      overflow: 'hidden'
-    }
+    css: sideNavStyles
   }, children);
 });
 export default SideNavigation;

package/dist/es2019/version.json

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

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

@@ -1,15 +1,26 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { ExitingPersistence, FadeIn, mediumDurationMs } from '@atlaskit/motion';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
-
+var baseMotionStyles = css({
+  position: 'absolute',
+  zIndex: 1,
+  top: 0,
+  right: 0,
+  left: 0
+});
+var enteringStyles = 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,
@@ -29,14 +40,7 @@ var LoadingItems = function LoadingItems(_ref) {
   }, function (motion, state) {
     return jsx("span", _extends({}, 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/esm/components/NavigationFooter/index.js

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

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

@@ -1,7 +1,12 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-
+var navigationHeaderStyles = css({
+  paddingTop: gridSize() * 3,
+  paddingRight: gridSize(),
+  paddingBottom: gridSize(),
+  paddingLeft: gridSize()
+});
 /**
  * __Navigation header__
  *
@@ -10,16 +15,12 @@ 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)
  */
+
 var NavigationHeader = function NavigationHeader(props) {
   var children = props.children;
   return jsx("div", {
     "data-navheader": true,
-    css: {
-      paddingTop: gridSize() * 3,
-      paddingBottom: gridSize(),
-      paddingLeft: gridSize(),
-      paddingRight: gridSize()
-    }
+    css: navigationHeaderStyles
   }, children);
 };
 

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

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /** @jsx jsx */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { ExitingPersistence } from '@atlaskit/motion';
 import { GoBackItem as GoBackButton } from '../Item';
 import { default as NestingItem } from '../NestingItem';
@@ -11,7 +11,18 @@ import { NestedContext } from './context';
 import { NestingMotion } from './nesting-motion'; // Named so ERT doesn't pick up the override name as a type.
 
 export var ROOT_ID = 'ATLASKIT_NESTED_ROOT';
-
+var nestableNavigationContentStyles = css({
+  height: '100%',
+  position: 'relative',
+  outline: 'none'
+});
+var nestingRootStyles = css({
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  flexDirection: 'column'
+});
 /**
  * __Nestable navigation content__
  *
@@ -20,6 +31,7 @@ export var ROOT_ID = 'ATLASKIT_NESTED_ROOT';
  * - [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 = useRef(null);
   var children = props.children,
@@ -133,11 +145,7 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
 
   return jsx("div", {
     "data-testid": testId,
-    css: {
-      position: 'relative',
-      height: '100%',
-      outline: 'none'
-    },
+    css: nestableNavigationContentStyles,
     ref: containerRef,
     tabIndex: -1,
     onClick: manageFocus
@@ -150,13 +158,7 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
     testId: testId && "".concat(testId, "-anim")
   }, function (motion) {
     return 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/esm/components/NestingItem/index.js

@@ -11,7 +11,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
-import { jsx } from '@emotion/react';
+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';
@@ -20,12 +20,19 @@ import { ButtonItem, CustomItem, NavigationContent } from '../index';
 import { ROOT_ID } from '../NestableNavigationContent';
 import { NestedContext, useNestedContext } from '../NestableNavigationContent/context';
 import { nestingItemStyle } from './styles';
-
+var 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.
  */
+
 var NestingItem = function NestingItem(props) {
   var children = props.children,
       iconAfter = props.iconAfter,
@@ -96,13 +103,7 @@ var NestingItem = function 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

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

@@ -1,9 +1,19 @@
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { N10, N500 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
-
+var sideNavStyles = css({
+  display: 'flex',
+  width: '100%',
+  minWidth: gridSize() * 30,
+  height: '100%',
+  position: 'relative',
+  flexDirection: 'column',
+  backgroundColor: "var(--ds-surface, ".concat(N10, ")"),
+  color: "var(--ds-text-subtle, ".concat(N500, ")"),
+  overflow: 'hidden'
+});
 /**
  * __Side navigation__
  *
@@ -13,6 +23,7 @@ import { gridSize } from '@atlaskit/theme/constants';
  * - [Code](https://atlassian.design/components/side-navigation/code)
  * - [Usage](https://atlassian.design/components/side-navigation/usage)
  */
+
 var SideNavigation = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       testId = props.testId,
@@ -21,17 +32,7 @@ var SideNavigation = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref,
     "data-testid": testId,
     "aria-label": label,
-    css: {
-      width: '100%',
-      height: '100%',
-      color: "var(--ds-text-subtle, ".concat(N500, ")"),
-      minWidth: gridSize() * 30,
-      backgroundColor: "var(--ds-surface, ".concat(N10, ")"),
-      position: 'relative',
-      display: 'flex',
-      flexDirection: 'column',
-      overflow: 'hidden'
-    }
+    css: sideNavStyles
   }, children);
 });
 export default SideNavigation;

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,13 +15,15 @@
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "dist/types-ts4.0/*"
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
       ]
     }
   },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",