@atlaskit/side-navigation 1.2.15 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/side-navigation
 
+## 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,7 +9,7 @@ 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");
 
@@ -35,11 +35,11 @@ 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.

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,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -26,7 +26,7 @@ var footerCSS = {
 
 var NavigationFooter = function NavigationFooter(_ref) {
   var children = _ref.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: footerCSS
   }, children);
 };

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -21,7 +21,7 @@ var _constants = require("@atlaskit/theme/constants");
  */
 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,

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");
 
@@ -62,7 +62,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,7 +149,7 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
     }
   };
 
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     "data-testid": testId,
     css: {
       position: 'relative',
@@ -159,7 +159,7 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
     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,7 +167,7 @@ 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)({
+    return (0, _react2.jsx)("div", (0, _extends2.default)({
       css: {
         position: 'absolute',
         width: '100%',
@@ -175,11 +175,11 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
         display: 'flex',
         flexDirection: 'column'
       }
-    }, motion), (0, _core.jsx)(_context.NestedContext.Provider, {
+    }, 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"));
 
@@ -121,9 +121,9 @@ 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", {
+    }, stack.length >= 1 && (0, _react2.jsx)("div", {
       css: {
         marginLeft: (0, _constants.gridSize)(),
         marginRight: (0, _constants.gridSize)(),
@@ -131,7 +131,7 @@ var NestingItem = function NestingItem(props) {
         paddingTop: (0, _constants.gridSize)() * 0.75,
         paddingBottom: (0, _constants.gridSize)() * 0.75
       }
-    }, backButton), (0, _core.jsx)(_index.NavigationContent, {
+    }, backButton), (0, _react2.jsx)(_index.NavigationContent, {
       testId: testId,
       showTopScrollIndicator: stack.length >= 1
     }, children));
@@ -142,11 +142,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 +160,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,7 +7,7 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -28,7 +28,7 @@ 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,

package/dist/cjs/version.json

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

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { ExitingPersistence, FadeIn, mediumDurationMs } from '@atlaskit/motion';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
 

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,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
 const footerCSS = {
   position: 'relative',

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
 
 /**

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 { jsx } from '@emotion/react';
 import { ExitingPersistence } from '@atlaskit/motion';
 import { GoBackItem as GoBackButton } from '../Item';
 import { default as NestingItem } from '../NestingItem';

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 { 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';

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { N10, N500 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 

package/dist/es2019/version.json

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

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { ExitingPersistence, FadeIn, mediumDurationMs } from '@atlaskit/motion';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
 

package/dist/esm/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/esm/components/NavigationFooter/index.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
 var footerCSS = {
   position: 'relative',

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
 
 /**

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/core';
+import { jsx } from '@emotion/react';
 import { ExitingPersistence } from '@atlaskit/motion';
 import { GoBackItem as GoBackButton } from '../Item';
 import { default as NestingItem } from '../NestingItem';

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

@@ -5,7 +5,7 @@ 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) { _defineProperty(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; }
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { easeOut, SlideIn } from '@atlaskit/motion';
 
 /**

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/core';
+import { 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';

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { N10, N500 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 

package/dist/esm/version.json

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

package/dist/types/components/NavigationFooter/index.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 export interface NavigationFooterProps {
     children: ReactNode;
 }
@@ -11,5 +12,5 @@ export interface NavigationFooterProps {
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const NavigationFooter: ({ children }: NavigationFooterProps) => JSX.Element;
+declare const NavigationFooter: ({ children }: NavigationFooterProps) => jsx.JSX.Element;
 export default NavigationFooter;

package/dist/types/components/NavigationHeader/index.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 export interface NavigationHeaderProps {
     children: JSX.Element | JSX.Element[];
 }
@@ -10,5 +12,5 @@ export interface NavigationHeaderProps {
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const NavigationHeader: (props: NavigationHeaderProps) => JSX.Element;
+declare const NavigationHeader: (props: NavigationHeaderProps) => jsx.JSX.Element;
 export default NavigationHeader;

package/dist/types/components/NestableNavigationContent/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { jsx } from '@emotion/react';
 export declare const ROOT_ID = "ATLASKIT_NESTED_ROOT";
 export interface NestableNavigationContentProps {
     /**
@@ -64,5 +65,5 @@ export interface NestableNavigationContentProps {
  * - [Examples](https://atlassian.design/components/side-navigation/examples#nested-navigation)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const NestableNavigationContent: (props: NestableNavigationContentProps) => JSX.Element;
+declare const NestableNavigationContent: (props: NestableNavigationContentProps) => jsx.JSX.Element;
 export default NestableNavigationContent;

package/dist/types/components/NestableNavigationContent/nesting-motion.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { Ref } from 'react';
+import { jsx } from '@emotion/react';
 import { Direction } from '@atlaskit/motion';
 interface ChildrenAsFunctionProps {
     'data-enter-from': string;
@@ -17,5 +18,5 @@ interface NestingMotionProps {
 /**
  * @internal
  */
-export declare const NestingMotion: (props: NestingMotionProps) => JSX.Element;
+export declare const NestingMotion: (props: NestingMotionProps) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.0/components/NavigationFooter/index.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 export interface NavigationFooterProps {
     children: ReactNode;
 }
@@ -11,5 +12,5 @@ export interface NavigationFooterProps {
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const NavigationFooter: ({ children }: NavigationFooterProps) => JSX.Element;
+declare const NavigationFooter: ({ children }: NavigationFooterProps) => jsx.JSX.Element;
 export default NavigationFooter;

package/dist/types-ts4.0/components/NavigationHeader/index.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 export interface NavigationHeaderProps {
     children: JSX.Element | JSX.Element[];
 }
@@ -10,5 +12,5 @@ export interface NavigationHeaderProps {
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const NavigationHeader: (props: NavigationHeaderProps) => JSX.Element;
+declare const NavigationHeader: (props: NavigationHeaderProps) => jsx.JSX.Element;
 export default NavigationHeader;

package/dist/types-ts4.0/components/NestableNavigationContent/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { jsx } from '@emotion/react';
 export declare const ROOT_ID = "ATLASKIT_NESTED_ROOT";
 export interface NestableNavigationContentProps {
     /**
@@ -64,5 +65,5 @@ export interface NestableNavigationContentProps {
  * - [Examples](https://atlassian.design/components/side-navigation/examples#nested-navigation)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const NestableNavigationContent: (props: NestableNavigationContentProps) => JSX.Element;
+declare const NestableNavigationContent: (props: NestableNavigationContentProps) => jsx.JSX.Element;
 export default NestableNavigationContent;

package/dist/types-ts4.0/components/NestableNavigationContent/nesting-motion.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { Ref } from 'react';
+import { jsx } from '@emotion/react';
 import { Direction } from '@atlaskit/motion';
 interface ChildrenAsFunctionProps {
     'data-enter-from': string;
@@ -17,5 +18,5 @@ interface NestingMotionProps {
 /**
  * @internal
  */
-export declare const NestingMotion: (props: NestingMotionProps) => JSX.Element;
+export declare const NestingMotion: (props: NestingMotionProps) => jsx.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "1.2.15",
+  "version": "1.3.0",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,13 +32,13 @@
   },
   "dependencies": {
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/icon": "^21.11.0",
     "@atlaskit/menu": "^1.3.0",
     "@atlaskit/motion": "^1.2.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0"
@@ -47,9 +47,9 @@
     "@atlaskit/atlassian-navigation": "^2.2.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/logo": "^13.9.0",
-    "@atlaskit/onboarding": "^10.5.0",
-    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/logo": "^13.10.0",
+    "@atlaskit/onboarding": "^10.6.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/select": "^15.7.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",

package/report.api.md

@@ -1,6 +1,8 @@
-## API Report File for "@atlaskit/side-navigation"
+## API Report File for "@atlaskit/side-navigation".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 /// <reference types="react" />
@@ -12,6 +14,7 @@ import { CustomItemProps } from '@atlaskit/menu';
 import { ForwardRefExoticComponent } from 'react';
 import { HeadingItemProps } from '@atlaskit/menu';
 import { HTMLAttributes } from 'react';
+import { jsx } from '@emotion/react';
 import { LinkItemProps } from '@atlaskit/menu';
 import { Overrides } from '@atlaskit/menu';
 import { default as React_2 } from 'react';
@@ -20,6 +23,15 @@ import { RefAttributes } from 'react';
 import { SkeletonHeadingItemProps } from '@atlaskit/menu';
 import { SkeletonItemProps } from '@atlaskit/menu';
 
+/**
+ * __Button item__
+ *
+ * A button item renders an item wrapped in a button tag, used primarily when an
+ * action does something other than changing routes.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#button-item)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 export declare const ButtonItem: React_2.ForwardRefExoticComponent<
   ButtonItemProps & React_2.RefAttributes<HTMLElement>
 >;
@@ -31,13 +43,13 @@ export { ButtonItemProps as GoBackItemProps };
  * Used to support any custom items needed by products alongside the Header and Footer patterns.
  * Specific implementation of headers and footers are provided in the examples folder.
  */
-export declare const CustomItem: CustomItemType;
+export declare const CustomItem: CustomItemPropsHack;
 
 export { CustomItemComponentProps };
 
 export { CustomItemProps };
 
-declare interface CustomItemType {
+declare interface CustomItemPropsHack {
   <TComponentProps extends {}>(
     props: CustomItemProps<TComponentProps> & {
       ref?: any;
@@ -45,12 +57,33 @@ declare interface CustomItemType {
   ): JSX.Element | null;
 }
 
+/**
+ * __Header__
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 export declare const Footer: (props: HeaderProps) => JSX.Element;
 
+/**
+ * __Go back item__
+ *
+ * A go back item is used to provide a customized "go back" button in nested
+ * navigations.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#go-back-item)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 export declare const GoBackItem: React_2.ForwardRefExoticComponent<
   ButtonItemProps & React_2.RefAttributes<HTMLElement>
 >;
 
+/**
+ * __Header__
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 export declare const Header: React_2.ForwardRefExoticComponent<
   HeaderProps & React_2.RefAttributes<HTMLElement>
 >;
@@ -87,29 +120,51 @@ declare interface HeaderProps {
    */
   testId?: string;
   /**
-     * Custom component to render as an item.
-     * This can be both a functional component or a class component.
-     * **Will return `null` if no component is defined.**
-
-     * **NOTE:** Make sure the reference for this component does not change between renders else undefined behavior may happen.
-     */
+   * Custom component to render as an item.
+   * This can be both a functional component or a class component.
+   * __Will return `null` if no component is defined.__
+   *
+   * __NOTE:__ Make sure the reference for this component does not change between renders else undefined behavior may happen.
+   */
   component?: React_2.ComponentType<CustomItemComponentProps>;
 }
 export { HeaderProps as FooterProps };
 export { HeaderProps };
 
+/**
+ * __Heading item__
+ *
+ * Available for advanced use cases, for most situations providing a title to Section should be enough.
+ *
+ */
 export declare const HeadingItem: (
   props: HeadingItemProps,
 ) => JSX.Element | null;
 
 export { HeadingItemProps };
 
+/**
+ * __Link item__
+ *
+ * Renders an item wrapped in an anchor tag, useful when you have an item that
+ * should change routes using native browser navigation. For SPA transitions use
+ * a [custom item](https://atlassian.design/components/side-navigation/examples#custom-item)
+ * with the respective router logic.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#link-item)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 export declare const LinkItem: React_2.ForwardRefExoticComponent<
   LinkItemProps & React_2.RefAttributes<HTMLElement>
 >;
 
 export { LinkItemProps };
 
+/**
+ * __Loading items__
+ *
+ * Loading items conditionally render based on the useShouldNestedElementRender() hook.
+ */
 export declare const LoadingItems: ({
   children,
   isLoading,
@@ -134,17 +189,25 @@ export declare interface LoadingItemsProps {
    */
   isLoading?: boolean;
   /**
-     * A `testId` prop is provided for specified elements,
-     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-
-     * Will set these elements when defined:
-     * - The entering container - `{testId}--entering`
-     * - The exiting container - `{testId}--exiting`
-     */
+   * A `testId` prop is provided for specified elements,
+   * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+   * serving as a hook for automated tests.
+   *
+   * Will set these elements when defined:
+   * - The entering container - `{testId}--entering`
+   * - The exiting container - `{testId}--exiting`
+   */
   testId?: string;
 }
 
+/**
+ * __Navigation content__
+ *
+ * A navigation content is used as the container for navigation items.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#content)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 export declare const NavigationContent: ForwardRefExoticComponent<
   NavigationContentProps &
     HTMLAttributes<HTMLElement> &
@@ -165,25 +228,49 @@ export declare interface NavigationContentProps {
   testId?: string;
 }
 
+/**
+ * __Navigation footer__
+ *
+ * Allows for customisation of the footer.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 export declare const NavigationFooter: ({
   children,
-}: NavigationFooterProps) => JSX.Element;
+}: NavigationFooterProps) => jsx.JSX.Element;
 
 export declare interface NavigationFooterProps {
   children: ReactNode;
 }
 
+/**
+ * __Navigation header__
+ *
+ * Allows for customisation of the header.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 export declare const NavigationHeader: (
   props: NavigationHeaderProps,
-) => JSX.Element;
+) => jsx.JSX.Element;
 
 export declare interface NavigationHeaderProps {
   children: JSX.Element | JSX.Element[];
 }
 
+/**
+ * __Nestable navigation content__
+ *
+ * The container for navigation items with nested views
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#nested-navigation)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 export declare const NestableNavigationContent: (
   props: NestableNavigationContentProps,
-) => JSX.Element;
+) => jsx.JSX.Element;
 
 export declare interface NestableNavigationContentProps {
   /**
@@ -193,14 +280,14 @@ export declare interface NestableNavigationContentProps {
    */
   children: JSX.Element | JSX.Element[];
   /**
-     * A `testId` prop is provided for specified elements,
-     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-
-     * Will set these elements when defined:
-     * - This wrapper - `{testId}`
-     * - The back item (displayed when inside a nested view) - `{testId}--go-back-item`
-     */
+   * A `testId` prop is provided for specified elements,
+   * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+   * serving as a hook for automated tests.
+   *
+   * Will set these elements when defined:
+   * - This wrapper - `{testId}`
+   * - The back item (displayed when inside a nested view) - `{testId}--go-back-item`
+   */
   testId?: string;
   /**
    * Array of the initial stack you want to show.
@@ -223,10 +310,10 @@ export declare interface NestableNavigationContentProps {
    */
   onChange?: (stack: string[]) => void;
   /**
-     Custom overrides for the composed components.
-
-     @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
-     */
+   * Custom overrides for the composed components.
+   *
+   *   @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
+   */
   overrides?: {
     /**
      * Use this to override the default back button displayed when navigation is nested.
@@ -288,16 +375,16 @@ export declare interface NestingItemProps<
    */
   component?: React_2.ComponentType<TCustomComponentProps>;
   /**
-     * A `testId` prop is provided for specified elements,
-     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-
-     * Will set these elements when defined:
-     * - The container - `{testId}--container`
-     * - The nesting item - `{testId}--item`
-     * - The go back item - `{testId}--go-back-item` (only used if you pass in a override).
-     * - The nesting item default right arrow icon - `{testId}--item--right-arrow`
-     */
+   * A `testId` prop is provided for specified elements,
+   * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+   * serving as a hook for automated tests.
+   *
+   * Will set these elements when defined:
+   * - The container - `{testId}--container`
+   * - The nesting item - `{testId}--item`
+   * - The go back item - `{testId}--go-back-item` (only used if you pass in a override).
+   * - The nesting item default right arrow icon - `{testId}--item--right-arrow`
+   */
   testId?: string;
   /**
    * A function that can be used to override the styles of the component.
@@ -337,6 +424,15 @@ export declare interface NestingItemProps<
   overrides?: NestingItemOverrides;
 }
 
+/**
+ * __Section__
+ *
+ * Used to separate items into sections. Using the title prop makes a section
+ * implicitly group the items for screen readers with no additional work required.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#section)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 export declare const Section: React_2.ForwardRefExoticComponent<
   SectionProps & React_2.RefAttributes<HTMLElement>
 >;
@@ -364,6 +460,15 @@ export declare interface SectionProps {
   testId?: string;
 }
 
+/**
+ * __Side navigation__
+ *
+ * A highly composable side navigation component that supports nested views.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ * - [Usage](https://atlassian.design/components/side-navigation/usage)
+ */
 export declare const SideNavigation: ForwardRefExoticComponent<
   SideNavigationProps & RefAttributes<HTMLElement>
 >;
@@ -389,12 +494,27 @@ export declare interface SideNavigationProps {
   testId?: string;
 }
 
+/**
+ * __Skeleton heading item__
+ *
+ * A skeleton heading item for use in managing loading states.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#loading)
+ */
 export declare const SkeletonHeadingItem: (
   props: SkeletonHeadingItemProps,
 ) => JSX.Element | null;
 
 export { SkeletonHeadingItemProps };
 
+/**
+ * __Skeleton item__
+ *
+ * A skeleton item can be used to reduce the perceived laoding time.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#loading)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
 export declare const SkeletonItem: (
   props: SkeletonItemProps,
 ) => JSX.Element | null;