@atlaskit/side-navigation 1.7.1 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/side-navigation
 
+## 1.8.0
+
+### Minor Changes
+
+- [`d518f0e34b9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d518f0e34b9) - [ux] We are testing a selected indicator change to menu, dropdown-menu, and side-navigation packages behind an internal feature flag. If successful this will be released in a later minor release.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.7.1
 
 ### Patch Changes

package/dist/cjs/components/Item/go-back-item.js

@@ -47,7 +47,7 @@ var GoBackItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onClick && onClick(e);
   }, [onClick, isInteracted]);
   return /*#__PURE__*/_react.default.createElement(_buttonItem.default, (0, _extends2.default)({
-    isSelected: isSelected || isInteracted
+    isSelected: isSelected
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     ,
     cssFn: cssFn,

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

@@ -130,7 +130,7 @@ var NestingItem = function NestingItem(props) {
       label: ""
     }))),
     onClick: onClickHandler,
-    isSelected: isSelected || isInteracted,
+    isSelected: isSelected,
     testId: testId && "".concat(testId, "--item")
   }, rest), {}, {
     children: title,

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _menu = require("@atlaskit/menu");
 var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
 
@@ -40,7 +41,9 @@ var SideNavigation = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     "data-testid": testId,
     "aria-label": label,
     css: sideNavStyles
-  }, children);
+  }, (0, _react2.jsx)(_menu.SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
+    value: "notch"
+  }, children));
 });
 var _default = SideNavigation;
 exports.default = _default;

package/dist/cjs/version.json

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

package/dist/es2019/components/Item/go-back-item.js

@@ -31,7 +31,7 @@ const GoBackItem = /*#__PURE__*/forwardRef(({
     onClick && onClick(e);
   }, [onClick, isInteracted]);
   return /*#__PURE__*/React.createElement(ButtonItem, _extends({
-    isSelected: isSelected || isInteracted
+    isSelected: isSelected
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     ,
     cssFn: cssFn,

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

@@ -110,7 +110,7 @@ const NestingItem = props => {
       label: ""
     }))),
     onClick: onClickHandler,
-    isSelected: isSelected || isInteracted,
+    isSelected: isSelected,
     testId: testId && `${testId}--item`,
     ...rest,
     children: title,

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
+import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
 import { N10, N500 } from '@atlaskit/theme/colors';
 const sidebarMinWidth = '240px';
 const sideNavStyles = css({
@@ -35,6 +36,8 @@ const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
     "data-testid": testId,
     "aria-label": label,
     css: sideNavStyles
-  }, children);
+  }, jsx(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
+    value: "notch"
+  }, children));
 });
 export default SideNavigation;

package/dist/es2019/version.json

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

package/dist/esm/components/Item/go-back-item.js

@@ -37,7 +37,7 @@ var GoBackItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClick && onClick(e);
   }, [onClick, isInteracted]);
   return /*#__PURE__*/React.createElement(ButtonItem, _extends({
-    isSelected: isSelected || isInteracted
+    isSelected: isSelected
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     ,
     cssFn: cssFn,

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

@@ -121,7 +121,7 @@ var NestingItem = function NestingItem(props) {
       label: ""
     }))),
     onClick: onClickHandler,
-    isSelected: isSelected || isInteracted,
+    isSelected: isSelected,
     testId: testId && "".concat(testId, "--item")
   }, rest), {}, {
     children: title,

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
+import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
 import { N10, N500 } from '@atlaskit/theme/colors';
 var sidebarMinWidth = '240px';
 var sideNavStyles = css({
@@ -33,6 +34,8 @@ var SideNavigation = /*#__PURE__*/forwardRef(function (props, ref) {
     "data-testid": testId,
     "aria-label": label,
     css: sideNavStyles
-  }, children);
+  }, jsx(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
+    value: "notch"
+  }, children));
 });
 export default SideNavigation;

package/dist/esm/version.json

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

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,55 @@
+import React from '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: React.FC<CustomItemComponentProps>;
+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: React.ForwardRefExoticComponent<HeaderProps & 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 all the time.
+     */
+    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: 8;
+        readonly right: number;
+        readonly height: 2;
+        readonly borderRadius: 1;
+        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: 1;
+        readonly flexShrink: 0;
+        readonly height: 2;
+        readonly left: 8;
+        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: 1;
+        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: 1;
+        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,16 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/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.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,24 @@
+import { MutableRefObject } from 'react';
+interface NestedContext {
+    currentStackId: string;
+    onNest: (id: string) => void;
+    onUnNest: () => void;
+    stack: string[];
+    parentId: string;
+    backButton?: React.ReactNode;
+    childIds: MutableRefObject<Set<string>>;
+}
+/**
+ * @internal
+ */
+export declare const NestedContext: import("react").Context<NestedContext | undefined>;
+export declare const useNestedContext: () => NestedContext;
+/**
+ * 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;
+};
+export {};

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

@@ -0,0 +1,74 @@
+/// <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;
+    /**
+     * 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,34 @@
+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;
+}
+/**
+ * __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": "1.7.1",
+  "version": "1.8.0",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
     "@atlaskit/ds-explorations": "^2.1.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/menu": "^1.6.0",
+    "@atlaskit/menu": "^1.7.0",
     "@atlaskit/motion": "^1.4.0",
     "@atlaskit/primitives": "^0.9.0",
     "@atlaskit/theme": "^12.5.0",
@@ -57,6 +57,7 @@
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@atlassian/feature-flags-test-utils": "*",
     "@testing-library/react": "^12.1.5",
     "@types/jest-axe": "^3.5.0",
     "ast-types": "^0.13.3",
@@ -85,6 +86,11 @@
       "deprecation": "no-deprecated-imports"
     }
   },
+  "platform-feature-flags": {
+    "platform.design-system-team.menu-selected-state-change_0see9": {
+      "type": "boolean"
+    }
+  },
   "homepage": "https://atlassian.design/components/side-navigation/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }