@atlaskit/navigation-system 6.3.2 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlassian/navigation-system
 
+## 7.0.0
+
+### Major Changes
+
+- [`f48c03e011b92`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f48c03e011b92) -
+  Renamed `SideNavContent` to `SideNavBody` to align with other slot component naming.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 6.4.0
+
+### Minor Changes
+
+- [`12424cd3197be`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/12424cd3197be) -
+  Cleans up the `platform_dst_nav4_flyoutmenuitem_render_to_parent` feature gate. Flyout menu item
+  popups now always use `shouldRenderToParent` and are not rendered in a portal.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.3.2
 
 ### Patch Changes

package/constellation/layout/code.mdx

@@ -13,7 +13,7 @@ props:
     - TopNavEnd
     - SideNav
     - SideNavHeader
-    - SideNavContent
+    - SideNavBody
     - SideNavFooter
     - Main
     - MainStickyHeader
@@ -79,11 +79,11 @@ The top part of the side nav.
 
 <TSMorphProps exportName="SideNavHeader" packageName="@atlaskit/navigation-system" />
 
-### SideNavContent
+### SideNavBody
 
 The main content of the side nav, filling up the middle section. It acts as a scroll container.
 
-<TSMorphProps exportName="SideNavContent" packageName="@atlaskit/navigation-system" />
+<TSMorphProps exportName="SideNavBody" packageName="@atlaskit/navigation-system" />
 
 ### SideNavFooter
 

package/constellation/layout/examples.mdx

@@ -72,12 +72,12 @@ The `SideNav` has three layout components that you can use to position component
 nav flexbox.
 
 - `SideNavHeader`. The top part of the side nav.
-- `SideNavContent`. The middle part of the side nav. It acts as a scroll container. It will grow to
+- `SideNavBody`. The middle part of the side nav. It acts as a scroll container. It will grow to
   take up the available space — this is used to push the footer to the bottom of the side nav.
 - `SideNavFooter`. The bottom part of the side nav.
 
-Note: make sure to render `SideNavContent` to ensure that the footer is positioned at the bottom of
-the side nav, simulating a sticky footer.
+Note: make sure to render `SideNavBody` to ensure that the footer is positioned at the bottom of the
+side nav, simulating a sticky footer.
 
 #### Side nav collapse/expand
 

package/dist/cjs/entry-points/layout/side-nav.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "SideNav", {
     return _sideNav.SideNav;
   }
 });
-Object.defineProperty(exports, "SideNavContent", {
+Object.defineProperty(exports, "SideNavBody", {
   enumerable: true,
   get: function get() {
-    return _sideNavContent.SideNavContent;
+    return _sideNavContent.SideNavBody;
   }
 });
 Object.defineProperty(exports, "SideNavFooter", {

package/dist/cjs/index.js

@@ -141,10 +141,10 @@ Object.defineProperty(exports, "SideNav", {
     return _sideNav.SideNav;
   }
 });
-Object.defineProperty(exports, "SideNavContent", {
+Object.defineProperty(exports, "SideNavBody", {
   enumerable: true,
   get: function get() {
-    return _sideNavContent.SideNavContent;
+    return _sideNavContent.SideNavBody;
   }
 });
 Object.defineProperty(exports, "SideNavFooter", {

package/dist/cjs/ui/page-layout/constants.js

@@ -80,6 +80,6 @@ var openLayerObserverTopNavEndNamespace = exports.openLayerObserverTopNavEndName
 
 /**
  * CSS scroll timeline variable for the side nav content scroll indicator.
- * The scroll timeline is created in SideNavContent, and then used by TopNavStart to apply the scroll indicator line.
+ * The scroll timeline is created in SideNavBody, and then used by TopNavStart to apply the scroll indicator line.
  */
 var sideNavContentScrollTimelineVar = exports.sideNavContentScrollTimelineVar = '--sNcst';

package/dist/cjs/ui/page-layout/side-nav/side-nav-content.js

@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SideNavContent = void 0;
+exports.SideNavBody = void 0;
 require("./side-nav-content.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
@@ -22,7 +22,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * It will grow to take up the available space in the side nav — this is used to push the footer to the
  * bottom of the side nav.
  */
-var SideNavContent = exports.SideNavContent = /*#__PURE__*/(0, _react.forwardRef)(_SideNavContent);
+var SideNavBody = exports.SideNavBody = /*#__PURE__*/(0, _react.forwardRef)(_SideNavContent);
 
 // Placing this const below the function breaks Compiled!
 var styles = {

package/dist/cjs/ui/page-layout/side-nav/side-nav-header.js

@@ -23,14 +23,14 @@ var SideNavHeader = exports.SideNavHeader = function SideNavHeader(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     /**
      * This attribute is used to identify whether the SideNavHeader is mounted, to determine where the
-     * SideNavContent's scroll indicator line should be applied. This is for layering reasons -
+     * SideNavBody's scroll indicator line should be applied. This is for layering reasons -
      * if the scroll indicator line intersects with the top nav, it could incorrectly be hidden beneath
      * the top nav (depending on if a layer is open, which raises the top nav'z z-index).
      *
      * We are using a data attribute and CSS for this logic to ensure it is SSR safe.
      *
-     * - If SideNavHeader exists, the scroll indicator line is applied to the SideNavContent. This is safe
-     * because the SideNavHeader is between the SideNavContent and TopNavStart, so the scroll indicator line
+     * - If SideNavHeader exists, the scroll indicator line is applied to the SideNavBody. This is safe
+     * because the SideNavHeader is between the SideNavBody and TopNavStart, so the scroll indicator line
      * will not intersect with the top nav.
      *
      * - If SideNavHeader does not exist, the scroll indicator line is applied to TopNavStart. This ensures

package/dist/cjs/ui/page-layout/side-nav/side-nav.js

@@ -788,7 +788,7 @@ function SideNavInternal(_ref) {
 /**
  * The side navigation layout area. It will show on the left (inline start) of the screen.
  *
- * Use the side nav area components (`SideNavHeader`, `SideNavContent`, `SideNavFooter`) to position
+ * Use the side nav area components (`SideNavHeader`, `SideNavBody`, `SideNavFooter`) to position
  * content within areas of the side nav.
  *
  * You can optionally render a `PanelSplitter` as a child to make the side navigation slot resizable.

package/dist/cjs/ui/page-layout/top-nav/top-nav-start.js

@@ -45,7 +45,7 @@ var innerStyles = {
 };
 
 /**
- * The scroll indicator is usually applied in SideNavContent, but if there is no SideNavHeader it is
+ * The scroll indicator is usually applied in SideNavBody, but if there is no SideNavHeader it is
  * applied in TopNavStart instead for layering reasons. See the comment in SideNavHeader for more details.
  */
 var scrolledShadow = null;

package/dist/es2019/entry-points/layout/side-nav.js

@@ -1,6 +1,6 @@
 export { SideNav } from '../../ui/page-layout/side-nav/side-nav';
 export { SideNavHeader } from '../../ui/page-layout/side-nav/side-nav-header';
-export { SideNavContent } from '../../ui/page-layout/side-nav/side-nav-content';
+export { SideNavBody } from '../../ui/page-layout/side-nav/side-nav-content';
 export { SideNavFooter } from '../../ui/page-layout/side-nav/side-nav-footer';
 export { SideNavToggleButton } from '../../ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from '../../ui/page-layout/side-nav/use-toggle-side-nav';

package/dist/es2019/index.js

@@ -12,7 +12,7 @@ export { MainStickyHeader } from './ui/page-layout/main/main-sticky-header';
 export { SideNavToggleButton } from './ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from './ui/page-layout/side-nav/use-toggle-side-nav';
 export { SideNavHeader } from './ui/page-layout/side-nav/side-nav-header';
-export { SideNavContent } from './ui/page-layout/side-nav/side-nav-content';
+export { SideNavBody } from './ui/page-layout/side-nav/side-nav-content';
 export { SideNavFooter } from './ui/page-layout/side-nav/side-nav-footer';
 export { PanelSplitter } from './ui/page-layout/panel-splitter/panel-splitter';
 export { PanelSplitterProvider } from './ui/page-layout/panel-splitter/provider';

package/dist/es2019/ui/page-layout/constants.js

@@ -74,6 +74,6 @@ export const openLayerObserverTopNavEndNamespace = 'top-nav-end';
 
 /**
  * CSS scroll timeline variable for the side nav content scroll indicator.
- * The scroll timeline is created in SideNavContent, and then used by TopNavStart to apply the scroll indicator line.
+ * The scroll timeline is created in SideNavBody, and then used by TopNavStart to apply the scroll indicator line.
  */
 export const sideNavContentScrollTimelineVar = '--sNcst';

package/dist/es2019/ui/page-layout/side-nav/side-nav-content.js

@@ -14,7 +14,7 @@ import { useSideNavVisibility } from './use-side-nav-visibility';
  * It will grow to take up the available space in the side nav — this is used to push the footer to the
  * bottom of the side nav.
  */
-export const SideNavContent = /*#__PURE__*/forwardRef(_SideNavContent);
+export const SideNavBody = /*#__PURE__*/forwardRef(_SideNavContent);
 
 // Placing this const below the function breaks Compiled!
 const styles = {

package/dist/es2019/ui/page-layout/side-nav/side-nav-header.js

@@ -16,14 +16,14 @@ export const SideNavHeader = ({
   return /*#__PURE__*/React.createElement("div", {
     /**
      * This attribute is used to identify whether the SideNavHeader is mounted, to determine where the
-     * SideNavContent's scroll indicator line should be applied. This is for layering reasons -
+     * SideNavBody's scroll indicator line should be applied. This is for layering reasons -
      * if the scroll indicator line intersects with the top nav, it could incorrectly be hidden beneath
      * the top nav (depending on if a layer is open, which raises the top nav'z z-index).
      *
      * We are using a data attribute and CSS for this logic to ensure it is SSR safe.
      *
-     * - If SideNavHeader exists, the scroll indicator line is applied to the SideNavContent. This is safe
-     * because the SideNavHeader is between the SideNavContent and TopNavStart, so the scroll indicator line
+     * - If SideNavHeader exists, the scroll indicator line is applied to the SideNavBody. This is safe
+     * because the SideNavHeader is between the SideNavBody and TopNavStart, so the scroll indicator line
      * will not intersect with the top nav.
      *
      * - If SideNavHeader does not exist, the scroll indicator line is applied to TopNavStart. This ensures

package/dist/es2019/ui/page-layout/side-nav/side-nav.js

@@ -784,7 +784,7 @@ function SideNavInternal({
 /**
  * The side navigation layout area. It will show on the left (inline start) of the screen.
  *
- * Use the side nav area components (`SideNavHeader`, `SideNavContent`, `SideNavFooter`) to position
+ * Use the side nav area components (`SideNavHeader`, `SideNavBody`, `SideNavFooter`) to position
  * content within areas of the side nav.
  *
  * You can optionally render a `PanelSplitter` as a child to make the side navigation slot resizable.

package/dist/es2019/ui/page-layout/top-nav/top-nav-start.js

@@ -36,7 +36,7 @@ const innerStyles = {
 };
 
 /**
- * The scroll indicator is usually applied in SideNavContent, but if there is no SideNavHeader it is
+ * The scroll indicator is usually applied in SideNavBody, but if there is no SideNavHeader it is
  * applied in TopNavStart instead for layering reasons. See the comment in SideNavHeader for more details.
  */
 const scrolledShadow = null;

package/dist/esm/entry-points/layout/side-nav.js

@@ -1,6 +1,6 @@
 export { SideNav } from '../../ui/page-layout/side-nav/side-nav';
 export { SideNavHeader } from '../../ui/page-layout/side-nav/side-nav-header';
-export { SideNavContent } from '../../ui/page-layout/side-nav/side-nav-content';
+export { SideNavBody } from '../../ui/page-layout/side-nav/side-nav-content';
 export { SideNavFooter } from '../../ui/page-layout/side-nav/side-nav-footer';
 export { SideNavToggleButton } from '../../ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from '../../ui/page-layout/side-nav/use-toggle-side-nav';

package/dist/esm/index.js

@@ -12,7 +12,7 @@ export { MainStickyHeader } from './ui/page-layout/main/main-sticky-header';
 export { SideNavToggleButton } from './ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from './ui/page-layout/side-nav/use-toggle-side-nav';
 export { SideNavHeader } from './ui/page-layout/side-nav/side-nav-header';
-export { SideNavContent } from './ui/page-layout/side-nav/side-nav-content';
+export { SideNavBody } from './ui/page-layout/side-nav/side-nav-content';
 export { SideNavFooter } from './ui/page-layout/side-nav/side-nav-footer';
 export { PanelSplitter } from './ui/page-layout/panel-splitter/panel-splitter';
 export { PanelSplitterProvider } from './ui/page-layout/panel-splitter/provider';

package/dist/esm/ui/page-layout/constants.js

@@ -74,6 +74,6 @@ export var openLayerObserverTopNavEndNamespace = 'top-nav-end';
 
 /**
  * CSS scroll timeline variable for the side nav content scroll indicator.
- * The scroll timeline is created in SideNavContent, and then used by TopNavStart to apply the scroll indicator line.
+ * The scroll timeline is created in SideNavBody, and then used by TopNavStart to apply the scroll indicator line.
  */
 export var sideNavContentScrollTimelineVar = '--sNcst';

package/dist/esm/ui/page-layout/side-nav/side-nav-content.js

@@ -14,7 +14,7 @@ import { useSideNavVisibility } from './use-side-nav-visibility';
  * It will grow to take up the available space in the side nav — this is used to push the footer to the
  * bottom of the side nav.
  */
-export var SideNavContent = /*#__PURE__*/forwardRef(_SideNavContent);
+export var SideNavBody = /*#__PURE__*/forwardRef(_SideNavContent);
 
 // Placing this const below the function breaks Compiled!
 var styles = {

package/dist/esm/ui/page-layout/side-nav/side-nav-header.js

@@ -15,14 +15,14 @@ export var SideNavHeader = function SideNavHeader(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     /**
      * This attribute is used to identify whether the SideNavHeader is mounted, to determine where the
-     * SideNavContent's scroll indicator line should be applied. This is for layering reasons -
+     * SideNavBody's scroll indicator line should be applied. This is for layering reasons -
      * if the scroll indicator line intersects with the top nav, it could incorrectly be hidden beneath
      * the top nav (depending on if a layer is open, which raises the top nav'z z-index).
      *
      * We are using a data attribute and CSS for this logic to ensure it is SSR safe.
      *
-     * - If SideNavHeader exists, the scroll indicator line is applied to the SideNavContent. This is safe
-     * because the SideNavHeader is between the SideNavContent and TopNavStart, so the scroll indicator line
+     * - If SideNavHeader exists, the scroll indicator line is applied to the SideNavBody. This is safe
+     * because the SideNavHeader is between the SideNavBody and TopNavStart, so the scroll indicator line
      * will not intersect with the top nav.
      *
      * - If SideNavHeader does not exist, the scroll indicator line is applied to TopNavStart. This ensures

package/dist/esm/ui/page-layout/side-nav/side-nav.js

@@ -778,7 +778,7 @@ function SideNavInternal(_ref) {
 /**
  * The side navigation layout area. It will show on the left (inline start) of the screen.
  *
- * Use the side nav area components (`SideNavHeader`, `SideNavContent`, `SideNavFooter`) to position
+ * Use the side nav area components (`SideNavHeader`, `SideNavBody`, `SideNavFooter`) to position
  * content within areas of the side nav.
  *
  * You can optionally render a `PanelSplitter` as a child to make the side navigation slot resizable.

package/dist/esm/ui/page-layout/top-nav/top-nav-start.js

@@ -37,7 +37,7 @@ var innerStyles = {
 };
 
 /**
- * The scroll indicator is usually applied in SideNavContent, but if there is no SideNavHeader it is
+ * The scroll indicator is usually applied in SideNavBody, but if there is no SideNavHeader it is
  * applied in TopNavStart instead for layering reasons. See the comment in SideNavHeader for more details.
  */
 var scrolledShadow = null;

package/dist/types/entry-points/layout/side-nav.d.ts

@@ -1,6 +1,6 @@
 export { SideNav } from '../../ui/page-layout/side-nav/side-nav';
 export { SideNavHeader } from '../../ui/page-layout/side-nav/side-nav-header';
-export { SideNavContent } from '../../ui/page-layout/side-nav/side-nav-content';
+export { SideNavBody } from '../../ui/page-layout/side-nav/side-nav-content';
 export { SideNavFooter } from '../../ui/page-layout/side-nav/side-nav-footer';
 export { SideNavToggleButton } from '../../ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from '../../ui/page-layout/side-nav/use-toggle-side-nav';

package/dist/types/index.d.ts

@@ -12,7 +12,7 @@ export { MainStickyHeader } from './ui/page-layout/main/main-sticky-header';
 export { SideNavToggleButton, type SideNavVisibilityChangeAnalyticsAttributes, } from './ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from './ui/page-layout/side-nav/use-toggle-side-nav';
 export { SideNavHeader } from './ui/page-layout/side-nav/side-nav-header';
-export { SideNavContent } from './ui/page-layout/side-nav/side-nav-content';
+export { SideNavBody } from './ui/page-layout/side-nav/side-nav-content';
 export { SideNavFooter } from './ui/page-layout/side-nav/side-nav-footer';
 export { PanelSplitter } from './ui/page-layout/panel-splitter/panel-splitter';
 export { PanelSplitterProvider } from './ui/page-layout/panel-splitter/provider';

package/dist/types/ui/page-layout/constants.d.ts

@@ -50,6 +50,6 @@ export declare const openLayerObserverTopNavMiddleNamespace = "top-nav-middle";
 export declare const openLayerObserverTopNavEndNamespace = "top-nav-end";
 /**
  * CSS scroll timeline variable for the side nav content scroll indicator.
- * The scroll timeline is created in SideNavContent, and then used by TopNavStart to apply the scroll indicator line.
+ * The scroll timeline is created in SideNavBody, and then used by TopNavStart to apply the scroll indicator line.
  */
 export declare const sideNavContentScrollTimelineVar = "--sNcst";

package/dist/types/ui/page-layout/side-nav/side-nav-content.d.ts

@@ -9,7 +9,7 @@ import React, { type ReactNode } from 'react';
  * It will grow to take up the available space in the side nav — this is used to push the footer to the
  * bottom of the side nav.
  */
-export declare const SideNavContent: React.ForwardRefExoticComponent<React.PropsWithoutRef<SideNavContentProps> & React.RefAttributes<HTMLDivElement>>;
+export declare const SideNavBody: React.ForwardRefExoticComponent<React.PropsWithoutRef<SideNavContentProps> & React.RefAttributes<HTMLDivElement>>;
 type SideNavContentProps = {
     /**
      * The content of the layout area.

package/dist/types/ui/page-layout/side-nav/side-nav.d.ts

@@ -9,7 +9,7 @@ import { type VisibilityCallback } from './use-side-nav-visibility-callbacks';
 type SideNavProps = CommonSlotProps & {
     /**
      * The content of the layout area.
-     * Should include side nav layout areas as required: `SideNavHeader`, `SideNavContent`, `SideNavFooter`.
+     * Should include side nav layout areas as required: `SideNavHeader`, `SideNavBody`, `SideNavFooter`.
      * Within these, you can use side nav menu items.
      */
     children: React.ReactNode;
@@ -82,7 +82,7 @@ export declare const onPeekStartDelayMs = 500;
 /**
  * The side navigation layout area. It will show on the left (inline start) of the screen.
  *
- * Use the side nav area components (`SideNavHeader`, `SideNavContent`, `SideNavFooter`) to position
+ * Use the side nav area components (`SideNavHeader`, `SideNavBody`, `SideNavFooter`) to position
  * content within areas of the side nav.
  *
  * You can optionally render a `PanelSplitter` as a child to make the side navigation slot resizable.

package/dist/types-ts4.5/entry-points/layout/side-nav.d.ts

@@ -1,6 +1,6 @@
 export { SideNav } from '../../ui/page-layout/side-nav/side-nav';
 export { SideNavHeader } from '../../ui/page-layout/side-nav/side-nav-header';
-export { SideNavContent } from '../../ui/page-layout/side-nav/side-nav-content';
+export { SideNavBody } from '../../ui/page-layout/side-nav/side-nav-content';
 export { SideNavFooter } from '../../ui/page-layout/side-nav/side-nav-footer';
 export { SideNavToggleButton } from '../../ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from '../../ui/page-layout/side-nav/use-toggle-side-nav';

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

@@ -12,7 +12,7 @@ export { MainStickyHeader } from './ui/page-layout/main/main-sticky-header';
 export { SideNavToggleButton, type SideNavVisibilityChangeAnalyticsAttributes, } from './ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from './ui/page-layout/side-nav/use-toggle-side-nav';
 export { SideNavHeader } from './ui/page-layout/side-nav/side-nav-header';
-export { SideNavContent } from './ui/page-layout/side-nav/side-nav-content';
+export { SideNavBody } from './ui/page-layout/side-nav/side-nav-content';
 export { SideNavFooter } from './ui/page-layout/side-nav/side-nav-footer';
 export { PanelSplitter } from './ui/page-layout/panel-splitter/panel-splitter';
 export { PanelSplitterProvider } from './ui/page-layout/panel-splitter/provider';

package/dist/types-ts4.5/ui/page-layout/constants.d.ts

@@ -50,6 +50,6 @@ export declare const openLayerObserverTopNavMiddleNamespace = "top-nav-middle";
 export declare const openLayerObserverTopNavEndNamespace = "top-nav-end";
 /**
  * CSS scroll timeline variable for the side nav content scroll indicator.
- * The scroll timeline is created in SideNavContent, and then used by TopNavStart to apply the scroll indicator line.
+ * The scroll timeline is created in SideNavBody, and then used by TopNavStart to apply the scroll indicator line.
  */
 export declare const sideNavContentScrollTimelineVar = "--sNcst";

package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-content.d.ts

@@ -9,7 +9,7 @@ import React, { type ReactNode } from 'react';
  * It will grow to take up the available space in the side nav — this is used to push the footer to the
  * bottom of the side nav.
  */
-export declare const SideNavContent: React.ForwardRefExoticComponent<React.PropsWithoutRef<SideNavContentProps> & React.RefAttributes<HTMLDivElement>>;
+export declare const SideNavBody: React.ForwardRefExoticComponent<React.PropsWithoutRef<SideNavContentProps> & React.RefAttributes<HTMLDivElement>>;
 type SideNavContentProps = {
     /**
      * The content of the layout area.

package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav.d.ts

@@ -9,7 +9,7 @@ import { type VisibilityCallback } from './use-side-nav-visibility-callbacks';
 type SideNavProps = CommonSlotProps & {
     /**
      * The content of the layout area.
-     * Should include side nav layout areas as required: `SideNavHeader`, `SideNavContent`, `SideNavFooter`.
+     * Should include side nav layout areas as required: `SideNavHeader`, `SideNavBody`, `SideNavFooter`.
      * Within these, you can use side nav menu items.
      */
     children: React.ReactNode;
@@ -82,7 +82,7 @@ export declare const onPeekStartDelayMs = 500;
 /**
  * The side navigation layout area. It will show on the left (inline start) of the screen.
  *
- * Use the side nav area components (`SideNavHeader`, `SideNavContent`, `SideNavFooter`) to position
+ * Use the side nav area components (`SideNavHeader`, `SideNavBody`, `SideNavFooter`) to position
  * content within areas of the side nav.
  *
  * You can optionally render a `PanelSplitter` as a child to make the side navigation slot resizable.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "6.3.2",
+	"version": "7.0.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -72,11 +72,11 @@
 		"@atlaskit/layering": "^3.6.0",
 		"@atlaskit/logo": "^19.10.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/popup": "^4.13.0",
+		"@atlaskit/popup": "^4.14.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/primitives": "^18.0.0",
-		"@atlaskit/side-nav-items": "^1.10.0",
-		"@atlaskit/tokens": "^11.1.0",
+		"@atlaskit/side-nav-items": "^1.12.0",
+		"@atlaskit/tokens": "^11.2.0",
 		"@atlaskit/tooltip": "^21.0.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -160,9 +160,6 @@
 			"type": "boolean",
 			"referenceOnly": true
 		},
-		"platform_dst_nav4_flyoutmenuitem_render_to_parent": {
-			"type": "boolean"
-		},
 		"navx-full-height-sidebar": {
 			"type": "boolean"
 		},