@atlaskit/side-navigation 3.0.0 → 3.0.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/side-navigation
 
+## 3.0.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.0.1
+
+### Patch Changes
+
+- [#42240](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42240) [`e5f784d7889`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e5f784d7889) - Add explicit `href` to link item.
+
 ## 3.0.0
 
 ### Major Changes

package/dist/cjs/components/Item/link-item.js

@@ -12,7 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _menu = require("@atlaskit/menu");
 var _styles = require("../../common/styles");
 var _context = require("../NestableNavigationContent/context");
-var _excluded = ["cssFn"];
+var _excluded = ["cssFn", "href"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
@@ -30,6 +30,7 @@ var LinkItem = /*#__PURE__*/(0, _react.forwardRef)(
 // Type needed on props to extract types with extract react types.
 function (_ref, ref) {
   var cssFn = _ref.cssFn,
+    href = _ref.href,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
     shouldRender = _useShouldNestedEleme.shouldRender;
@@ -40,7 +41,8 @@ function (_ref, ref) {
   // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
   return /*#__PURE__*/_react.default.createElement(_menu.LinkItem, (0, _extends2.default)({
     ref: ref,
-    cssFn: cssOverride
+    cssFn: cssOverride,
+    href: href
   }, rest));
 });
 var _default = exports.default = LinkItem;

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

@@ -18,6 +18,7 @@ const LinkItem = /*#__PURE__*/forwardRef(
 // Type needed on props to extract types with extract react types.
 ({
   cssFn,
+  href,
   ...rest
 }, ref) => {
   const {
@@ -30,7 +31,8 @@ const LinkItem = /*#__PURE__*/forwardRef(
   // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
   return /*#__PURE__*/React.createElement(Link, _extends({
     ref: ref,
-    cssFn: cssOverride
+    cssFn: cssOverride,
+    href: href
   }, rest));
 });
 export default LinkItem;

package/dist/esm/components/Item/link-item.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["cssFn"];
+var _excluded = ["cssFn", "href"];
 import React, { forwardRef } from 'react';
 import { LinkItem as Link } from '@atlaskit/menu';
 import { baseSideNavItemStyle, overrideStyleFunction } from '../../common/styles';
@@ -20,6 +20,7 @@ var LinkItem = /*#__PURE__*/forwardRef(
 // Type needed on props to extract types with extract react types.
 function (_ref, ref) {
   var cssFn = _ref.cssFn,
+    href = _ref.href,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useShouldNestedEleme = useShouldNestedElementRender(),
     shouldRender = _useShouldNestedEleme.shouldRender;
@@ -30,7 +31,8 @@ function (_ref, ref) {
   // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
   return /*#__PURE__*/React.createElement(Link, _extends({
     ref: ref,
-    cssFn: cssOverride
+    cssFn: cssOverride,
+    href: href
   }, rest));
 });
 export default LinkItem;

package/dist/types-ts4.5/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.5/common/styles.d.ts

@@ -0,0 +1,11 @@
+import { CSSFn, StatelessCSSFn } from '@atlaskit/menu';
+/**
+ * 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 sectionHeaderSpacingStyles: StatelessCSSFn;

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

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { HeaderProps } from '../Header';
+type NewFooterProps = Omit<HeaderProps, 'cssFn' | 'component' | 'onClick'>;
+type FooterFacadeProps = (HeaderProps & {
+    /**
+     * @private
+     * @deprecated
+     */
+    useDeprecatedApi?: true;
+}) | (NewFooterProps & {
+    /**
+     * @private
+     * @deprecated
+     */
+    useDeprecatedApi?: false;
+    cssFn?: never;
+    component?: never;
+    onClick?: never;
+});
+export type FooterProps = HeaderProps | NewFooterProps;
+/**
+ * __Footer__
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
+declare const FooterFacade: ({ useDeprecatedApi, description, iconBefore, testId, children, component, cssFn, onClick, }: FooterFacadeProps) => JSX.Element;
+export default FooterFacade;

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

@@ -0,0 +1,56 @@
+/// <reference types="react" />
+import { jsx } from '@emotion/react';
+import { CSSFn, CustomItemComponentProps } from '@atlaskit/menu';
+/**
+ * __Container__
+ *
+ * A container for Header and Footer that safely handles props to the child component
+ */
+export declare const Container: ({ children, "data-testid": testId, ...props }: CustomItemComponentProps) => jsx.JSX.Element;
+export type 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: import("react").ForwardRefExoticComponent<HeaderProps & import("react").RefAttributes<HTMLElement>>;
+export default Header;

package/dist/types-ts4.5/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.5/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.5/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;

package/dist/types-ts4.5/components/Item/index.d.ts

@@ -0,0 +1,10 @@
+export { default as ButtonItem } from './button-item';
+export type { ButtonItemProps } from './button-item';
+export { default as CustomItem } from './custom-item';
+export type { CustomItemProps, CustomItemComponentProps } from './custom-item';
+export { default as GoBackItem } from './go-back-item';
+export type { GoBackItemProps } from './go-back-item';
+export { default as LinkItem } from './link-item';
+export type { LinkItemProps } from './link-item';
+export { default as SkeletonItem } from './skeleton-item';
+export type { SkeletonItemProps } from './skeleton-item';

package/dist/types-ts4.5/components/Item/link-item.d.ts

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

package/dist/types-ts4.5/components/Item/skeleton-item.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { SkeletonItemProps } from '@atlaskit/menu';
+export type { SkeletonItemProps } from '@atlaskit/menu';
+/**
+ * __Skeleton item__
+ *
+ * A skeleton item can be used to reduce the perceived loading time.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#loading)
+ * - [Code](https://atlassian.design/components/side-navigation/code)
+ */
+declare const SkeletonItem: (props: SkeletonItemProps) => JSX.Element | null;
+export default SkeletonItem;

package/dist/types-ts4.5/components/LoadingItems/index.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+export interface LoadingItemsProps {
+    /**
+     * Child items that will be loaded asynchronously.
+     */
+    children: React.ReactNode;
+    /**
+     * Fallback you want to show when loading.
+     * You'll want to use the supplied [skeleton item](/packages/navigation/side-navigation/docs/skeleton-item)
+     * or [skeleton heading item](/packages/navigation/side-navigation/docs/skeleton-heading-item) components.
+     */
+    fallback: React.ReactNode;
+    /**
+     * Used to show either the loading fallback or the loaded contents.
+     * Will cross fade between children and fallback when this is flipped.
+     */
+    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`
+     */
+    testId?: string;
+}
+/**
+ * __Loading items__
+ *
+ * Loading items conditionally render based on the useShouldNestedElementRender() hook.
+ */
+declare const LoadingItems: ({ children, isLoading, fallback, testId, }: LoadingItemsProps) => JSX.Element;
+export default LoadingItems;

package/dist/types-ts4.5/components/NavigationContent/index.d.ts

@@ -0,0 +1,25 @@
+/** @jsx jsx */
+import { HTMLAttributes } from 'react';
+export interface NavigationContentProps {
+    children: React.ReactNode;
+    /**
+     * Forces the top scroll indicator to be shown.
+     */
+    showTopScrollIndicator?: 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.
+     */
+    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)
+ */
+declare const NavigationContent: import("react").ForwardRefExoticComponent<NavigationContentProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+export default NavigationContent;

package/dist/types-ts4.5/components/NavigationContent/styles.d.ts

@@ -0,0 +1,91 @@
+interface StyleOpts {
+    showTopScrollIndicator?: boolean;
+}
+/**
+ * This outer container css contains the "real" scroll indicators which are
+ * always rendered to the screen.
+ * They are "conditionally" shown from the users perspective using the inner container CSS
+ * which has other pseudo elements which "mask" the "real" scroll indicators.
+ */
+export declare const outerContainerCSS: (opts: StyleOpts & {
+    scrollbarWidth: number;
+}) => {
+    readonly display: "flex";
+    readonly height: "100%";
+    readonly overflow: "hidden";
+    readonly position: "relative";
+    readonly '&::before': {
+        readonly content: "''";
+        readonly display: "block";
+        readonly left: "var(--ds-space-100)";
+        readonly right: number;
+        readonly height: 2;
+        readonly borderRadius: "var(--ds-border-radius-050)";
+        readonly backgroundColor: "var(--ds-menu-seperator-color, var(--ds-border))";
+        readonly position: "absolute";
+        readonly zIndex: 1;
+    };
+    readonly '&::after': {
+        readonly content: "''";
+        readonly position: "absolute";
+        readonly display: "block";
+        readonly borderRadius: "var(--ds-border-radius-050)";
+        readonly flexShrink: 0;
+        readonly height: 2;
+        readonly left: "var(--ds-space-100)";
+        readonly right: number;
+        readonly bottom: 0;
+        readonly zIndex: 1;
+        readonly backgroundColor: "var(--ds-menu-seperator-color, var(--ds-border))";
+    };
+};
+/**
+ * This inner container css contains the "mask" logic for the scroll indicators.
+ * Essentially they cover (mask) the "real" scroll indicators when the user is scrolled
+ * to the top or bottom of the container.
+ */
+export declare const innerContainerCSS: (opts: StyleOpts) => {
+    readonly '&::after': {
+        readonly borderRadius: "var(--ds-border-radius-050)";
+        readonly content: "''";
+        readonly display: "block";
+        readonly flexShrink: 0;
+        readonly height: 2;
+        readonly marginTop: "auto";
+        readonly position: "relative";
+        readonly zIndex: 2;
+        readonly backgroundColor: "var(--ds-menu-scroll-indicator-color, var(--ds-surface))";
+    };
+    readonly '&::before'?: {
+        readonly borderRadius: "var(--ds-border-radius-050)";
+        readonly content: "''";
+        readonly left: 0;
+        readonly right: 0;
+        readonly height: 2;
+        readonly backgroundColor: "var(--ds-menu-scroll-indicator-color, var(--ds-surface))";
+        readonly position: "absolute";
+        readonly display: "block";
+        readonly zIndex: 2;
+    } | undefined;
+    readonly display: "flex";
+    readonly overflow: "auto";
+    readonly width: "100%";
+    readonly position: "relative";
+    readonly boxSizing: "border-box";
+    readonly flexDirection: "column";
+};
+export declare const containerCSS: (opts: StyleOpts) => {
+    readonly marginTop: 0 | 2;
+    readonly marginLeft: "var(--ds-space-100)";
+    readonly marginRight: "var(--ds-space-100)";
+    readonly position: "relative";
+    readonly '& [data-ds--menu--heading-item]': {
+        readonly marginBottom: "var(--ds-space-075)";
+        readonly marginTop: "var(--ds-space-200)";
+    };
+    readonly '& [data-ds--menu--skeleton-heading-item]': {
+        readonly marginTop: number;
+        readonly marginBottom: number;
+    };
+};
+export {};

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

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export interface NavigationFooterProps {
+    children: ReactNode;
+}
+/**
+ * __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)
+ */
+declare const NavigationFooter: ({ children }: NavigationFooterProps) => JSX.Element;
+export default NavigationFooter;

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export interface NavigationHeaderProps {
+    children: JSX.Element | JSX.Element[];
+}
+/**
+ * __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)
+ */
+declare const NavigationHeader: (props: NavigationHeaderProps) => jsx.JSX.Element;
+export default NavigationHeader;

package/dist/types-ts4.5/components/NestableNavigationContent/context.d.ts

@@ -0,0 +1,27 @@
+import { MutableRefObject } from 'react';
+/**
+ * @internal
+ */
+export interface NestedContextValue {
+    currentStackId: string;
+    onNest: (id: string) => void;
+    onUnNest: () => void;
+    stack: string[];
+    parentId: string;
+    backButton?: React.ReactNode;
+    childIds: MutableRefObject<Set<string>>;
+    forceShowTopScrollIndicator: boolean | undefined;
+}
+/**
+ * @internal
+ */
+export declare const NestedContext: import("react").Context<NestedContextValue | undefined>;
+export declare const useNestedContext: () => NestedContextValue;
+/**
+ * Used by children of the NestableNavigationContent component to see if they should render or not.
+ * If `shouldRender` returns `true` - return your nodes.
+ * If it returns `false` - either return `null` or `children` if you have children.
+ */
+export declare const useShouldNestedElementRender: () => {
+    shouldRender: boolean;
+};

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

@@ -0,0 +1,79 @@
+/// <reference types="react" />
+import { jsx } from '@emotion/react';
+export declare const ROOT_ID = "ATLASKIT_NESTED_ROOT";
+export interface NestableNavigationContentProps {
+    /**
+     * The NestableNavigationContent wraps the entire navigation hierarchy of a side-navigation.
+     * Using this component is only needed if you want to enable nested views with [nesting items](/packages/navigation/side-navigation/docs/nesting-item),
+     * else you should use [navigation content](/packages/navigation/side-navigation/docs/navigation-content) instead.
+     */
+    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`
+     */
+    testId?: string;
+    /**
+     * Forces the top scroll indicator to be shown. This prop should be used when needing to
+     * distinctly separate the side navigation header from the side navigation content.
+     */
+    showTopScrollIndicator?: boolean;
+    /**
+     * Array of the initial stack you want to show.
+     * Useful when wanting to set the initial nested view but not wanting to opt into controlled state.
+     * Make sure to have all intermediate navigation pages line up.
+     */
+    initialStack?: string[];
+    /**
+     * Enables you to control the stack of navigation views you want to show.
+     * Do not jump between controlled and uncontrolled else undefined behaviour will occur.
+     * This means either using `initialStack` OR `stack` but not both.
+     * Make sure your stack array has a stable reference and does not change between renders.
+     */
+    stack?: string[];
+    /**
+     * Allows you to react based on transitions between [nesting items](/packages/navigation/side-navigation/docs/nesting-item).
+     * It will be called everytime a user navigates from one [nesting item](/packages/navigation/side-navigation/docs/nesting-item) to another,
+     * both up or down the navigation hierarchy.
+     * This prop should be used with the `stack` prop for controlled behavior.
+     */
+    onChange?: (stack: string[]) => void;
+    /**
+     * Called when a nesting id that does not exist among `<NestingItem>`s is pushed to the stack. Use this callback to be notified when there is an undefined nesting state.
+     * Provides you with the stack which led to the undefined state, with the top of the stack (last item in array) being the invalid item.
+     */
+    onUnknownNest?: (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.
+     */
+    overrides?: {
+        /**
+         * Use this to override the default back button displayed when navigation is nested.
+         * You'll want to import the [go back item](/packages/navigation/docs/go-back-item) component and use it here.
+         * This will be displayed for all children [nesting items](/packages/navigation/side-navigation/docs/nesting-item) unless they define their own.
+         */
+        GoBackItem?: {
+            render?: (props: {
+                onClick: () => void;
+                testId?: string;
+            }) => React.ReactNode;
+        };
+    };
+}
+/**
+ * __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)
+ */
+declare const NestableNavigationContent: (props: NestableNavigationContentProps) => jsx.JSX.Element;
+export default NestableNavigationContent;

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

@@ -0,0 +1,22 @@
+/** @jsx jsx */
+import { Ref } from 'react';
+import { jsx } from '@emotion/react';
+import { Direction } from '@atlaskit/motion';
+interface ChildrenAsFunctionProps {
+    'data-enter-from': string;
+    'data-exit-to': string;
+    'data-testid'?: string;
+    className?: string;
+    ref: Ref<any>;
+}
+interface NestingMotionProps {
+    enterFrom: Direction;
+    exitTo: Direction;
+    children: (props: ChildrenAsFunctionProps) => React.ReactNode;
+    testId?: string;
+}
+/**
+ * @internal
+ */
+export declare const NestingMotion: (props: NestingMotionProps) => jsx.JSX.Element;
+export {};

package/dist/types-ts4.5/components/NestingItem/hack-for-ert.d.ts

@@ -0,0 +1,2 @@
+import { NestingItemProps } from './index';
+export default function (_: NestingItemProps): void;

package/dist/types-ts4.5/components/NestingItem/index.d.ts

@@ -0,0 +1,91 @@
+/** @jsx jsx */
+import React from 'react';
+import { CSSFn, CustomItemComponentProps, Overrides } from '@atlaskit/menu';
+interface NestingItemOverrides extends Overrides {
+    /**
+     * Use this to override the back button displayed when navigation is nested.
+     * You'll want to import the [go back item](/packages/navigation/side-navigation/docs/go-back-item) component and use it here.
+     * This will be displayed for all children nesting item components unless they define their own.
+     */
+    GoBackItem?: {
+        render?: (props: {
+            onClick: () => void;
+            testId?: string;
+        }) => React.ReactNode;
+    };
+}
+export interface NestingItemProps<TCustomComponentProps = CustomItemComponentProps> {
+    /**
+     * A **unique identifier** for the nesting item.
+     * Every nesting item component needs a unique id else undefined behavior will occur.
+     */
+    id: string;
+    /**
+     * Text to display when the nesting item is rendered as a interactable element.
+     */
+    title: React.ReactNode;
+    /**
+     * The view that should be shown when this nesting item is visible.
+     */
+    children: React.ReactNode;
+    /**
+     * Used to customize the rendered component when shown as an item.
+     * You can use this for example to change it to a SPA link.
+     */
+    component?: React.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`
+     */
+    testId?: string;
+    /**
+     * 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.
+     */
+    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;
+    /**
+     * Element to render after the item text.
+     * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
+     */
+    iconAfter?: 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;
+    /**
+     * Makes the element appear disabled as well as removing interactivity.
+     */
+    isDisabled?: boolean;
+    /**
+     * Makes the element appear selected.
+     */
+    isSelected?: boolean;
+    /**
+     * Custom overrides for the composed components.
+     */
+    overrides?: NestingItemOverrides;
+}
+/**
+ * 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.
+ */
+declare const NestingItem: <TCustomComponentProps extends CustomItemComponentProps>(props: NestingItemProps<TCustomComponentProps> & Omit<TCustomComponentProps, keyof CustomItemComponentProps>) => JSX.Element;
+export default NestingItem;

package/dist/types-ts4.5/components/NestingItem/styles.d.ts

@@ -0,0 +1,28 @@
+import { CSSFn } from '@atlaskit/menu';
+export declare const enabledCSS: {
+    "&:hover [data-custom-icon]": {
+        display: string;
+    };
+    "&:active [data-custom-icon]": {
+        display: string;
+    };
+    "&:focus [data-custom-icon]": {
+        display: string;
+    };
+    "& [data-custom-icon]": {
+        display: string;
+    };
+    "&:hover [data-right-arrow]": {
+        display: string;
+    };
+    "&:active [data-right-arrow]": {
+        display: string;
+    };
+    "&:focus [data-right-arrow]": {
+        display: string;
+    };
+    "& [data-right-arrow]": {
+        display: string;
+    };
+};
+export declare const nestingItemStyle: CSSFn;

package/dist/types-ts4.5/components/Section/heading-item.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { HeadingItemProps } from '@atlaskit/menu';
+export type { HeadingItemProps } from '@atlaskit/menu';
+/**
+ * __Heading item__
+ *
+ * Available for advanced use cases, for most situations providing a title to Section should be enough.
+ *
+ */
+declare const HeadingItem: (props: HeadingItemProps) => JSX.Element | null;
+export default HeadingItem;

package/dist/types-ts4.5/components/Section/index.d.ts

@@ -0,0 +1,6 @@
+export { default as HeadingItem } from './heading-item';
+export type { HeadingItemProps } from './heading-item';
+export { default as Section } from './section';
+export type { SectionProps } from './section';
+export { default as SkeletonHeadingItem } from './skeleton-heading-item';
+export type { SkeletonHeadingItemProps } from './skeleton-heading-item';

package/dist/types-ts4.5/components/Section/section.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+export interface SectionProps {
+    /**
+     * Children of the section,
+     * should generally be item or heading components.
+     */
+    children: React.ReactNode;
+    /**
+     * The text passed to heading.
+     * If a title is not provided no heading will be rendered.
+     */
+    title?: string;
+    /**
+     * Will render a border at the top of the section.
+     */
+    hasSeparator?: 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.
+     */
+    testId?: string;
+    /**
+     * Adds `<ul>` and `<li>` tags around the items for better semantic markup in a list of items.
+     *
+     */
+    isList?: boolean;
+}
+/**
+ * __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)
+ */
+declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>>;
+export default Section;

package/dist/types-ts4.5/components/Section/skeleton-heading-item.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { SkeletonHeadingItemProps } from '@atlaskit/menu';
+export type { SkeletonHeadingItemProps } from '@atlaskit/menu';
+/**
+ * __Skeleton heading item__
+ *
+ * A skeleton heading item for use in managing loading states.
+ *
+ * - [Examples](https://atlassian.design/components/side-navigation/examples#loading)
+ */
+declare const SkeletonHeadingItem: (props: SkeletonHeadingItemProps) => JSX.Element | null;
+export default SkeletonHeadingItem;

package/dist/types-ts4.5/components/SideNavigation/index.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+export interface SideNavigationProps {
+    /**
+     *  Describes the specific role of this navigation component for users viewing the page with a screen reader.
+     *  Differentiates from other navigation components on a page.
+     */
+    label: string;
+    /**
+     * Child navigation elements.
+     * You'll want to compose children from [navigation header](/packages/navigation/side-navigation/docs/navigation-header),
+     * [navigation content](/packages/navigation/side-navigation/docs/navigation-content) or [nestable navigation content](/packages/navigation/side-navigation/docs/nestable-navigation-content),
+     * and [navigation footer](/packages/navigation/side-navigation/docs/navigation-footer).
+     */
+    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.
+     */
+    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)
+ */
+declare const SideNavigation: import("react").ForwardRefExoticComponent<SideNavigationProps & import("react").RefAttributes<HTMLElement>>;
+export default SideNavigation;

package/dist/types-ts4.5/components/index.d.ts

@@ -0,0 +1,22 @@
+export { default as SideNavigation } from './SideNavigation';
+export type { SideNavigationProps } from './SideNavigation';
+export { Section, HeadingItem, SkeletonHeadingItem } from './Section';
+export type { HeadingItemProps, SectionProps, SkeletonHeadingItemProps, } from './Section';
+export { default as NestingItem } from './NestingItem';
+export type { NestingItemProps } from './NestingItem';
+export { default as NavigationContent } from './NavigationContent';
+export type { NavigationContentProps } from './NavigationContent';
+export { ButtonItem, GoBackItem, LinkItem, CustomItem, SkeletonItem, } from './Item';
+export type { CustomItemComponentProps, CustomItemProps, ButtonItemProps, GoBackItemProps, LinkItemProps, SkeletonItemProps, } from './Item';
+export { default as Footer } from './Footer';
+export type { FooterProps } from './Footer';
+export { default as Header } from './Header';
+export type { HeaderProps } from './Header';
+export { default as NavigationHeader } from './NavigationHeader';
+export type { NavigationHeaderProps } from './NavigationHeader';
+export { default as NavigationFooter } from './NavigationFooter';
+export type { NavigationFooterProps } from './NavigationFooter';
+export { default as LoadingItems } from './LoadingItems';
+export type { LoadingItemsProps } from './LoadingItems';
+export { default as NestableNavigationContent } from './NestableNavigationContent';
+export type { NestableNavigationContentProps } from './NestableNavigationContent';

package/dist/types-ts4.5/components/utils/hooks.d.ts

@@ -0,0 +1,5 @@
+import { MutableRefObject } from 'react';
+export declare const useChildIds: (currentStackId: string, committedStack: string[], onUnknownNest?: ((stack: string[]) => void) | undefined) => {
+    childIdsRef: MutableRefObject<Set<string>>;
+};
+export declare const useChildIdsEffect: (childIds: MutableRefObject<Set<string>>, id: string) => void;

package/dist/types-ts4.5/index.d.ts

@@ -0,0 +1,4 @@
+export { SideNavigation, Header, NavigationHeader, NavigationContent, Section, HeadingItem, SkeletonHeadingItem, NestableNavigationContent, NestingItem, ButtonItem, LinkItem, GoBackItem, CustomItem, SkeletonItem, Footer, NavigationFooter, LoadingItems, } from './components';
+export type { CustomItemComponentProps, CustomItemProps, LoadingItemsProps, ButtonItemProps, FooterProps, GoBackItemProps, HeaderProps, HeadingItemProps, LinkItemProps, NavigationContentProps, NavigationFooterProps, NavigationHeaderProps, NestableNavigationContentProps, NestingItemProps, SectionProps, SideNavigationProps, SkeletonHeadingItemProps, SkeletonItemProps, } from './components';
+export { useShouldNestedElementRender } from './components/NestableNavigationContent/context';
+export { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR, } from './common/constants';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,12 +26,12 @@
   "dependencies": {
     "@atlaskit/ds-explorations": "^3.0.0",
     "@atlaskit/ds-lib": "^2.2.0",
-    "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/menu": "^2.0.0",
+    "@atlaskit/icon": "^22.0.0",
+    "@atlaskit/menu": "^2.1.0",
     "@atlaskit/motion": "^1.5.0",
-    "@atlaskit/primitives": "^1.6.0",
+    "@atlaskit/primitives": "^1.10.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.25.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,230 @@
+## API Report File for "@atlaskit/side-navigation"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+/// <reference types="react" />
+
+import { ButtonItemProps } from '@atlaskit/menu';
+import { CSSFn } from '@atlaskit/menu';
+import { CustomItemComponentProps } from '@atlaskit/menu';
+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';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { SkeletonHeadingItemProps } from '@atlaskit/menu';
+import { SkeletonItemProps } from '@atlaskit/menu';
+
+// @public
+export const ButtonItem: React_2.ForwardRefExoticComponent<ButtonItemProps & React_2.RefAttributes<HTMLElement>>;
+
+export { ButtonItemProps }
+export { ButtonItemProps as GoBackItemProps }
+
+// @public
+export const CustomItem: CustomItemPropsHack;
+
+export { CustomItemComponentProps }
+
+export { CustomItemProps }
+
+// @public (undocumented)
+interface CustomItemPropsHack {
+    // (undocumented)
+    <TComponentProps extends {}>(props: CustomItemProps<TComponentProps> & {
+        ref?: any;
+    } & Omit<TComponentProps, keyof CustomItemComponentProps>): JSX.Element | null;
+}
+
+// @public
+export const Footer: ({ useDeprecatedApi, description, iconBefore, testId, children, component, cssFn, onClick, }: FooterFacadeProps) => JSX.Element;
+
+// @public (undocumented)
+type FooterFacadeProps = (HeaderProps & {
+    useDeprecatedApi?: true;
+}) | (NewFooterProps & {
+    useDeprecatedApi?: false;
+    cssFn?: never;
+    component?: never;
+    onClick?: never;
+});
+
+// @public (undocumented)
+export type FooterProps = HeaderProps | NewFooterProps;
+
+// @public
+export const GoBackItem: React_2.ForwardRefExoticComponent<ButtonItemProps & React_2.RefAttributes<HTMLElement>>;
+
+// @public
+export const Header: ForwardRefExoticComponent<HeaderProps & RefAttributes<HTMLElement>>;
+
+// @public (undocumented)
+export type HeaderProps = {
+    cssFn?: CSSFn;
+    iconBefore?: React.ReactNode;
+    onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;
+    description?: JSX.Element | string;
+    children?: React.ReactNode;
+    testId?: string;
+    component?: React.ComponentType<CustomItemComponentProps>;
+};
+
+// @public
+export const HeadingItem: (props: HeadingItemProps) => JSX.Element | null;
+
+export { HeadingItemProps }
+
+// @public
+export const LinkItem: React_2.ForwardRefExoticComponent<LinkItemProps & React_2.RefAttributes<HTMLElement>>;
+
+export { LinkItemProps }
+
+// @public
+export const LoadingItems: ({ children, isLoading, fallback, testId, }: LoadingItemsProps) => JSX.Element;
+
+// @public (undocumented)
+export interface LoadingItemsProps {
+    children: React.ReactNode;
+    fallback: React.ReactNode;
+    isLoading?: boolean;
+    testId?: string;
+}
+
+// @public
+export const NavigationContent: ForwardRefExoticComponent<NavigationContentProps & HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>>;
+
+// @public (undocumented)
+export interface NavigationContentProps {
+    // (undocumented)
+    children: React.ReactNode;
+    showTopScrollIndicator?: boolean;
+    testId?: string;
+}
+
+// @public
+export const NavigationFooter: ({ children }: NavigationFooterProps) => JSX.Element;
+
+// @public (undocumented)
+export interface NavigationFooterProps {
+    // (undocumented)
+    children: ReactNode;
+}
+
+// @public
+export const NavigationHeader: (props: NavigationHeaderProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+export interface NavigationHeaderProps {
+    // (undocumented)
+    children: JSX.Element | JSX.Element[];
+}
+
+// @public
+export const NestableNavigationContent: (props: NestableNavigationContentProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+export interface NestableNavigationContentProps {
+    children: JSX.Element | JSX.Element[];
+    initialStack?: string[];
+    onChange?: (stack: string[]) => void;
+    onUnknownNest?: (stack: string[]) => void;
+    // @deprecated
+    overrides?: {
+        GoBackItem?: {
+            render?: (props: {
+                onClick: () => void;
+                testId?: string;
+            }) => React.ReactNode;
+        };
+    };
+    showTopScrollIndicator?: boolean;
+    stack?: string[];
+    testId?: string;
+}
+
+// @public
+export const NestingItem: <TCustomComponentProps extends CustomItemComponentProps>(props: NestingItemProps<TCustomComponentProps> & Omit<TCustomComponentProps, keyof CustomItemComponentProps>) => JSX.Element;
+
+// @public (undocumented)
+interface NestingItemOverrides extends Overrides {
+    GoBackItem?: {
+        render?: (props: {
+            onClick: () => void;
+            testId?: string;
+        }) => React_2.ReactNode;
+    };
+}
+
+// @public (undocumented)
+export interface NestingItemProps<TCustomComponentProps = CustomItemComponentProps> {
+    children: React_2.ReactNode;
+    component?: React_2.ComponentType<TCustomComponentProps>;
+    cssFn?: CSSFn;
+    description?: JSX.Element | string;
+    iconAfter?: React_2.ReactNode;
+    iconBefore?: React_2.ReactNode;
+    id: string;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    onClick?: (event: React_2.KeyboardEvent | React_2.MouseEvent) => void;
+    overrides?: NestingItemOverrides;
+    testId?: string;
+    title: React_2.ReactNode;
+}
+
+// @public (undocumented)
+type NewFooterProps = Omit<HeaderProps, 'component' | 'cssFn' | 'onClick'>;
+
+// @public
+export const Section: React_2.ForwardRefExoticComponent<SectionProps & React_2.RefAttributes<HTMLElement>>;
+
+// @public (undocumented)
+export interface SectionProps {
+    children: React_2.ReactNode;
+    hasSeparator?: boolean;
+    isList?: boolean;
+    testId?: string;
+    title?: string;
+}
+
+// @public
+export const SideNavigation: ForwardRefExoticComponent<SideNavigationProps & RefAttributes<HTMLElement>>;
+
+// @public (undocumented)
+export interface SideNavigationProps {
+    children: JSX.Element | JSX.Element[];
+    label: string;
+    testId?: string;
+}
+
+// @public
+export const SkeletonHeadingItem: (props: SkeletonHeadingItemProps) => JSX.Element | null;
+
+export { SkeletonHeadingItemProps }
+
+// @public
+export const SkeletonItem: (props: SkeletonItemProps) => JSX.Element | null;
+
+export { SkeletonItemProps }
+
+// @public
+export const useShouldNestedElementRender: () => {
+    shouldRender: boolean;
+};
+
+// @public (undocumented)
+export const VAR_SCROLL_INDICATOR_COLOR = "--ds-menu-scroll-indicator-color";
+
+// @public (undocumented)
+export const VAR_SEPARATOR_COLOR = "--ds-menu-seperator-color";
+
+// (No @packageDocumentation comment for this package)
+
+```