@atlaskit/side-navigation 1.2.14 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
 ## 1.2.14
 
 ### 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.14",
+	"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.14",
+	"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.14",
+	"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/common/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const VAR_SEPARATOR_COLOR = "--ds-menu-seperator-color";
+export declare const VAR_SCROLL_INDICATOR_COLOR = "--ds-menu-scroll-indicator-color";

package/dist/types-ts4.0/common/styles.d.ts

@@ -0,0 +1,12 @@
+import { CSSFn, StatelessCSSFn } from '@atlaskit/menu';
+export declare const ITEM_SIDE_PADDING: number;
+/**
+ * Allows chaining of style functions on top of base style functions
+ * @param baseStyle the base custom cssFn
+ * @param newStyle a new cssFn to be applied after the base style
+ *
+ * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
+ */
+export declare const overrideStyleFunction: <TState>(baseStyle: CSSFn<TState>, newStyle?: CSSFn<TState> | undefined) => CSSFn<TState>;
+export declare const baseSideNavItemStyle: CSSFn;
+export declare const sectionHeaderStyle: StatelessCSSFn;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { HeaderProps } from '../Header';
+export type { HeaderProps as FooterProps } from '../Header';
+/**
+ * __Header__
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
+declare const Footer: (props: HeaderProps) => JSX.Element;
+export default Footer;

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { CSSFn, CustomItemComponentProps } from '@atlaskit/menu';
+export interface HeaderProps {
+    /**
+     * A function that can be used to override the styles of the component.
+     * It receives the current styles and state and expects a styles object.
+     * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
+     */
+    cssFn?: CSSFn;
+    /**
+     * Element to render before the item text.
+     * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
+     */
+    iconBefore?: React.ReactNode;
+    /**
+     * Event that is triggered when the element is clicked.
+     */
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Description of the item.
+     * This will render smaller text below the primary text of the item as well as slightly increasing the height of the item.
+     */
+    description?: string | JSX.Element;
+    /**
+     * Primary content for the item.
+     */
+    children?: React.ReactNode;
+    /**
+     * 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.
+     */
+    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.
+     */
+    component?: React.ComponentType<CustomItemComponentProps>;
+}
+/**
+ * __Header__
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
+declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
+export default Header;

package/dist/types-ts4.0/components/Item/button-item.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ButtonItemProps } from '@atlaskit/menu';
+export type { ButtonItemProps } 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)
+ */
+declare const ButtonItem: React.ForwardRefExoticComponent<ButtonItemProps & React.RefAttributes<HTMLElement>>;
+export default ButtonItem;

package/dist/types-ts4.0/components/Item/custom-item.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { CustomItemComponentProps, CustomItemProps } from '@atlaskit/menu';
+export type { CustomItemComponentProps, CustomItemProps } from '@atlaskit/menu';
+interface CustomItemPropsHack {
+    <TComponentProps extends {}>(props: CustomItemProps<TComponentProps> & {
+        ref?: any;
+    } & Omit<TComponentProps, keyof CustomItemComponentProps>): JSX.Element | null;
+}
+/**
+ * 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.
+ */
+declare const CustomItem: CustomItemPropsHack;
+export default CustomItem;

package/dist/types-ts4.0/components/Item/go-back-item.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { ButtonItemProps } from '@atlaskit/menu';
+export type { ButtonItemProps as GoBackItemProps } from '@atlaskit/menu';
+/**
+ * __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)
+ */
+declare const GoBackItem: React.ForwardRefExoticComponent<ButtonItemProps & React.RefAttributes<HTMLElement>>;
+export default GoBackItem;