@atlaskit/navigation-system 9.4.0 → 9.4.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlassian/navigation-system
 
+## 9.4.2
+
+### Patch Changes
+
+- [`8f6296fa87d19`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8f6296fa87d19) -
+  Deprecate the Aside export.
+- [`cc4a66306965d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cc4a66306965d) -
+  Cleanup feature gate `platform_dst_nav4_flyout_menu_slots_close_button`. Flyout menu slot
+  subcomponents (header, body, footer) and close button are now permanently enabled.
+- Updated dependencies
+
+## 9.4.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.4.0
 
 ### Minor Changes

package/constellation/layout/code.mdx

@@ -17,7 +17,6 @@ props:
     - SideNavFooter
     - Main
     - MainStickyHeader
-    - Aside
     - Panel
     - PanelSplitter
     - SideNavToggleButton
@@ -103,20 +102,9 @@ The sticky header of the main layout area.
 
 <TSMorphProps exportName="MainStickyHeader" packageName="@atlaskit/navigation-system" />
 
-### Aside
-
-<SectionMessage appearance="warning" title="Caution">
-	We are planning on deprecating the Aside component. Please use Panel instead.
-</SectionMessage>
-
-The Aside layout area is rendered to the right (inline end) of the Main area.
-
-<TSMorphProps exportName="Aside" packageName="@atlaskit/navigation-system" />
-
 ### Panel
 
-The Panel layout area is rendered to the right (inline end) of the Main area, or the Aside area if
-it is present. On small viewports, the Panel slot will become an overlay.
+The Panel layout area is rendered to the right (inline end) of the Main area. On small viewports, the Panel slot will become an overlay.
 
 <TSMorphProps exportName="Panel" packageName="@atlaskit/navigation-system" />
 

package/constellation/layout/examples.mdx

@@ -97,7 +97,7 @@ See the [custom theming](/components/navigation-system/layout/custom-theming) ta
 - Use the [side nav slots](#side-nav-slots) to position content within the side nav.
 - The side nav is [collapsable and expandable](#side-nav-collapseexpand),
   [resizable](#side-nav-resizing), [responsive](#side-nav-responsive), and offers
-  [flyout](#side-nav-flyout) behaviour.
+  [flyout](#side-nav-flyout) behavior.
 
 [View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
@@ -216,43 +216,9 @@ expand to fill available space.
 
 [View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
-### Aside
-
-<SectionMessage appearance="warning" title="Caution">
-	We plan to deprecate aside. Use panel instead.
-</SectionMessage>
-
-The aside area is rendered to the right of the main area.
-
-- The default width of the aside is 330px, and it is
-  [resizable](/components/navigation-system/layout/examples#aside-resizing) and
-  [responsive](/components/navigation-system/layout/examples#aside-responsive).
-- On large viewports the aside can be fixed, meaning it will have its own scroll container and not
-  use the body scroll.
-- On small viewports, the element will always use body scroll, to make it easier to scroll the page
-  when the content is tall.
-
-[View interactive example](https://go.atlassian.com/nav4-interactive-example)
-
-#### Aside resizing
-
-You can optionally render a [panel splitter](#resizable-areas) as a child to make the aside
-resizable.
-
-- The aside is resized using the drag handle. When you hover over the drag handle, the mouse pointer
-  changes to a resize cursor.
-- The aside can be resized to a minimum width of 120px and a maximum width equal to 50% of the
-  viewport width.
-- Persist the chosen width across page refreshes by providing it to the `defaultWidth` prop.
-
-#### Aside responsive
-
-At `s`, `xs`, and `xxs` breakpoints (i.e. viewports smaller than 1024px), the aside moves below the
-main area, and conforms to main width and behaviour.
-
 ### Panel
 
-The panel area is rendered to the right of the main and aside areas.
+The panel area is rendered to the right of the main area.
 
 - The default width of the panel is 365px, which can be modified using the `defaultWidth` prop.
 - The panel is
@@ -280,8 +246,7 @@ resizable.
 
 #### Panel responsive
 
-At `m` breakpoints (between 1024-1440px), the panel will overlay the aside area. At `s` breakpoints
-and below (less than 1024px) it will start to overlay the main area.
+At `s` breakpoints and below (less than 1024px) the panel will start to overlay the main area.
 
 ## Resizable areas
 
@@ -290,7 +255,6 @@ Render a `PanelSplitter` in a layout area to make it resizable.
 Resizing is supported for the following areas:
 
 - [Side nav](/components/navigation-system/layout/examples#side-nav): Use `SideNavPanelSplitter`
-- [Aside](/components/navigation-system/layout/examples#aside): Use `PanelSplitter`
 - [Panel](/components/navigation-system/layout/examples#panel): Use `PanelSplitter`
 
 [View interactive example](https://go.atlassian.com/nav4-interactive-example)
@@ -298,22 +262,21 @@ Resizing is supported for the following areas:
 | Area      | Default width      | Min width             | Max width                                              |
 | --------- | ------------------ | --------------------- | ------------------------------------------------------ |
 | `SideNav` | 320px              | 240px                 | 50% of viewport width                                  |
-| `Aside`   | 330px (modifiable) | 120px                 | 50% of viewport width                                  |
 | `Panel`   | 365px (modifiable) | Same as default width | 50% of content area (viewport minus the side nav area) |
 
 ## Responsive
 
-Layout areas respond to the viewport size. See default behaviour below, or the
+Layout areas respond to the viewport size. See default behavior below, or the
 [interactive example](https://go.atlassian.com/nav4-interactive-example).
 
-| Breakpoint | Viewport      | Side nav                    | Aside        | Panel                                                                |
-| ---------- | ------------- | --------------------------- | ------------ | -------------------------------------------------------------------- |
-| `xxs`      | 320 - 479px   | Collapsed; opens as overlay | Below main   | Collapsed; opens as overlay (over the main area)                     |
-| `xs`       | 480 - 767px   | Collapsed; opens as overlay | Below main   | Collapsed; opens as overlay (over the main area)                     |
-| `s`        | 768 - 1023px  | Collapsed; opens as overlay | Below main   | Collapsed; opens as overlay (over the main area)                     |
-| `m`        | 1024 - 1439px | Expanded (inline)           | Next to main | Collapsed; opens inline (or as overlay if the aside area is present) |
-| `l`        | 1440 - 1767px | Expanded (inline)           | Next to main | Collapsed; Opens inline                                              |
-| `xl`       | 1768+px       | Expanded (inline)           | Next to main | Collapsed; Opens inline                                              |
+| Breakpoint | Viewport      | Side nav                    | Panel            |
+| ---------- | ------------- | --------------------------- | ---------------- |
+| `xxs`      | 320 - 479px   | Collapsed; opens as overlay | Opens as overlay |
+| `xs`       | 480 - 767px   | Collapsed; opens as overlay | Opens as overlay |
+| `s`        | 768 - 1023px  | Collapsed; opens as overlay | Opens as overlay |
+| `m`        | 1024 - 1439px | Expanded (inline)           | Opens inline     |
+| `l`        | 1440 - 1767px | Expanded (inline)           | Opens inline     |
+| `xl`       | 1768+px       | Expanded (inline)           | Opens inline     |
 
 ## Custom skip links
 

package/constellation/layout/usage.mdx

@@ -71,29 +71,19 @@ When applying components to the navigational areas,
 	<li>
 		<strong>Main:</strong> Use for the page content. Expands to fill available space.
 	</li>
-	<li>
-		<strong>Aside:</strong> Optional. Use to display supporting or supplementary content. Is
-		resizable. <em>We plan to deprecate aside, please use panel instead.</em>
-	</li>
 	<li>
 		<strong>Panel:</strong> Optional. Use to display supporting or supplementary content. Is
 		resizable and collapsible.
 	</li>
 </ol>
 
-### The difference between aside, panel and modal dialog
-
-<SectionMessage appearance="warning" title="Caution">
-	We plan to deprecate aside. Use panel instead.
-</SectionMessage>
+### The difference between panel and modal dialog
 
-The main difference between aside, panel and modal dialog is their behaviours:
+The main difference between panel and modal dialog is their behaviors:
 
-- **Aside** is not collapsible, while **panel** can be collapsible.
-- **Panel** and **aside** present content alongside the **main** area, while a **modal dialog**
+- **Panel** presents content alongside the **main** area, while a **modal dialog**
   appears in a layer above the page.
-- On small viewports (1024px and below), the **panel** becomes an overlay, while the **aside** moves
-  below the **main** area.
+- **Panel** can be collapsed and resized. On small viewports (1024px and below), the **panel** becomes an overlay.
 
 #### Usage guidance
 
@@ -102,14 +92,13 @@ The main difference between aside, panel and modal dialog is their behaviours:
   connected to their primary task.
 - Use a **modal dialog** when you need the user to focus on a specific task, such as making a
   decision or completing an action, before they can return to their primary task.
-- Don’t use aside for new experiences. It is planned for deprecation.
 
 ## Accessibility
 
 - Always place slots in this order as direct children of the root: banner, top nav, side nav, main,
-  aside, panel. This determines the keyboard tab order, screen reader reading order, and skip link
+  panel. This determines the keyboard tab order, screen reader reading order, and skip link
   order.
-- Provide a unique, meaningful `label` for side nav, aside, panel, and top nav end. The label is
+- Provide a unique, meaningful `label` for side nav, panel, and top nav end. The label is
   exposed as the landmark's accessible name. Don't repeat the landmark's role in the label.
 - Slots provide landmark roles automatically. Don't add or duplicate landmark roles inside them.
 - Use custom skip links sparingly. Too many skip links makes the skip links menu noisy. Consider the
@@ -137,11 +126,11 @@ The main difference between aside, panel and modal dialog is their behaviours:
 		image={{
 			url: layoutDontLight,
 			urlDarkMode: layoutDontDark,
-			alt: 'A layout with a grid overlay on the Main area, but also on the Side nav, Aside and Panel areas.',
+			alt: 'A layout with a grid overlay on the Main area, but also on the Side nav and Panel areas.',
 		}}
 		isFullWidth
 	>
-		Don't include side nav, aside or panel areas as part of your grid.
+		Don't include side nav or panel areas as part of your grid.
 	</DoDont>
 </DoDontGrid>
 

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

@@ -63,7 +63,7 @@ var fallbackDefaultWidth = 330;
  *
  * You can optionally render a `PanelSplitter` as a child to make the aside area resizable.
  *
- * Note: We plan to deprecate the Aside component. Please use Panel instead.
+ * @deprecated Use `Panel` instead.
  */
 function Aside(_ref) {
   var children = _ref.children,

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

@@ -25,7 +25,9 @@ var ribbonVar = exports.ribbonVar = '--n_rbnW';
  */
 var sideNavLiveWidthVar = exports.sideNavLiveWidthVar = '--n_sNvlw';
 var sideNavPanelSplitterId = exports.sideNavPanelSplitterId = Symbol('SideNav PanelSplitter');
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var asidePanelSplitterId = exports.asidePanelSplitterId = Symbol('Aside PanelSplitter');
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var panelPanelSplitterId = exports.panelPanelSplitterId = Symbol('Panel PanelSplitter');
 
 // We aren't using template literals here because Compiled can't compiled them in platform ATM.
@@ -55,6 +57,7 @@ var UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_EN
  * For globally defined values such as flag, modal, etc, we can continue to
  * rely on accessing them through global means.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var localSlotLayers = exports.localSlotLayers = {
   ribbon: 4,
   // The side nav panel splitter is layered above the top nav when FHS is enabled.

package/dist/cjs/ui/top-nav-items/themed/color-utils/index.js

@@ -69,6 +69,7 @@ var flipLuminance = 0.179129;
 function isLight(color) {
   return relativeLuminanceW3C(color) >= flipLuminance;
 }
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 function getColorMode(backgroundColor) {
   if (relativeLuminanceW3C(backgroundColor) >= flipLuminance) {
     return 'light';
@@ -93,6 +94,8 @@ var textColor = {
     }
   }
 };
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 function getTextColor(backgroundColor) {
   var colorMode = getColorMode(backgroundColor);
   return textColor[colorMode];
@@ -107,6 +110,7 @@ function getTextColor(backgroundColor) {
  *
  * This has been simplified to assume the background has no transparency.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 function simpleAlphaComposite(_ref2) {
   var background = _ref2.background,
     foreground = _ref2.foreground;

package/dist/cjs/ui/top-nav-items/themed/has-custom-theme-context.js

@@ -14,6 +14,7 @@ var HasCustomThemeContext = exports.HasCustomThemeContext = /*#__PURE__*/(0, _re
 /**
  * Returns whether a custom theme is being applied.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 function useHasCustomTheme() {
   return (0, _react.useContext)(HasCustomThemeContext);
 }

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

@@ -52,7 +52,7 @@ const fallbackDefaultWidth = 330;
  *
  * You can optionally render a `PanelSplitter` as a child to make the aside area resizable.
  *
- * Note: We plan to deprecate the Aside component. Please use Panel instead.
+ * @deprecated Use `Panel` instead.
  */
 export function Aside({
   children,

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

@@ -19,7 +19,9 @@ export const ribbonVar = '--n_rbnW';
  */
 export const sideNavLiveWidthVar = '--n_sNvlw';
 export const sideNavPanelSplitterId = Symbol('SideNav PanelSplitter');
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export const asidePanelSplitterId = Symbol('Aside PanelSplitter');
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export const panelPanelSplitterId = Symbol('Panel PanelSplitter');
 
 // We aren't using template literals here because Compiled can't compiled them in platform ATM.
@@ -49,6 +51,7 @@ export const UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = `calc(var(${UNSAFE_a
  * For globally defined values such as flag, modal, etc, we can continue to
  * rely on accessing them through global means.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export const localSlotLayers = {
   ribbon: 4,
   // The side nav panel splitter is layered above the top nav when FHS is enabled.

package/dist/es2019/ui/top-nav-items/themed/color-utils/index.js

@@ -61,6 +61,7 @@ const flipLuminance = 0.179129;
 export function isLight(color) {
   return relativeLuminanceW3C(color) >= flipLuminance;
 }
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function getColorMode(backgroundColor) {
   if (relativeLuminanceW3C(backgroundColor) >= flipLuminance) {
     return 'light';
@@ -85,6 +86,8 @@ const textColor = {
     }
   }
 };
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function getTextColor(backgroundColor) {
   const colorMode = getColorMode(backgroundColor);
   return textColor[colorMode];
@@ -99,6 +102,7 @@ export function getTextColor(backgroundColor) {
  *
  * This has been simplified to assume the background has no transparency.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function simpleAlphaComposite({
   background,
   foreground

package/dist/es2019/ui/top-nav-items/themed/has-custom-theme-context.js

@@ -8,6 +8,7 @@ export const HasCustomThemeContext = /*#__PURE__*/createContext(false);
 /**
  * Returns whether a custom theme is being applied.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function useHasCustomTheme() {
   return useContext(HasCustomThemeContext);
 }

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

@@ -54,7 +54,7 @@ var fallbackDefaultWidth = 330;
  *
  * You can optionally render a `PanelSplitter` as a child to make the aside area resizable.
  *
- * Note: We plan to deprecate the Aside component. Please use Panel instead.
+ * @deprecated Use `Panel` instead.
  */
 export function Aside(_ref) {
   var children = _ref.children,

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

@@ -19,7 +19,9 @@ export var ribbonVar = '--n_rbnW';
  */
 export var sideNavLiveWidthVar = '--n_sNvlw';
 export var sideNavPanelSplitterId = Symbol('SideNav PanelSplitter');
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export var asidePanelSplitterId = Symbol('Aside PanelSplitter');
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export var panelPanelSplitterId = Symbol('Panel PanelSplitter');
 
 // We aren't using template literals here because Compiled can't compiled them in platform ATM.
@@ -49,6 +51,7 @@ export var UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = "calc(var(".concat(UNS
  * For globally defined values such as flag, modal, etc, we can continue to
  * rely on accessing them through global means.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export var localSlotLayers = {
   ribbon: 4,
   // The side nav panel splitter is layered above the top nav when FHS is enabled.

package/dist/esm/ui/top-nav-items/themed/color-utils/index.js

@@ -60,6 +60,7 @@ var flipLuminance = 0.179129;
 export function isLight(color) {
   return relativeLuminanceW3C(color) >= flipLuminance;
 }
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function getColorMode(backgroundColor) {
   if (relativeLuminanceW3C(backgroundColor) >= flipLuminance) {
     return 'light';
@@ -84,6 +85,8 @@ var textColor = {
     }
   }
 };
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function getTextColor(backgroundColor) {
   var colorMode = getColorMode(backgroundColor);
   return textColor[colorMode];
@@ -98,6 +101,7 @@ export function getTextColor(backgroundColor) {
  *
  * This has been simplified to assume the background has no transparency.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function simpleAlphaComposite(_ref2) {
   var background = _ref2.background,
     foreground = _ref2.foreground;

package/dist/esm/ui/top-nav-items/themed/has-custom-theme-context.js

@@ -8,6 +8,7 @@ export var HasCustomThemeContext = /*#__PURE__*/createContext(false);
 /**
  * Returns whether a custom theme is being applied.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function useHasCustomTheme() {
   return useContext(HasCustomThemeContext);
 }

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

@@ -5,7 +5,7 @@ import type { CommonSlotProps } from './types';
  *
  * You can optionally render a `PanelSplitter` as a child to make the aside area resizable.
  *
- * Note: We plan to deprecate the Aside component. Please use Panel instead.
+ * @deprecated Use `Panel` instead.
  */
 export declare function Aside({ children, xcss, defaultWidth: defaultWidthProp, label, skipLinkLabel, testId, id: providedId, }: CommonSlotProps & {
     /**

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

@@ -5,7 +5,7 @@ import type { CommonSlotProps } from './types';
  *
  * You can optionally render a `PanelSplitter` as a child to make the aside area resizable.
  *
- * Note: We plan to deprecate the Aside component. Please use Panel instead.
+ * @deprecated Use `Panel` instead.
  */
 export declare function Aside({ children, xcss, defaultWidth: defaultWidthProp, label, skipLinkLabel, testId, id: providedId, }: CommonSlotProps & {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "9.4.0",
+	"version": "9.4.2",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -35,16 +35,10 @@
 		"website": {
 			"name": "Navigation system",
 			"category": "Navigation",
-			"status": {
-				"type": "beta"
-			},
 			"subPages": [
 				{
 					"title": "Layout",
 					"id": "layout",
-					"status": {
-						"type": "beta"
-					},
 					"sortKey": 1
 				},
 				{
@@ -55,9 +49,6 @@
 				{
 					"title": "Top nav items",
 					"id": "top-nav-items",
-					"status": {
-						"type": "beta"
-					},
 					"sortKey": 3
 				}
 			]
@@ -72,16 +63,16 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.2.0",
 		"@atlaskit/app-provider": "^4.3.0",
-		"@atlaskit/avatar": "^25.14.0",
+		"@atlaskit/avatar": "^25.15.0",
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^7.0.0",
-		"@atlaskit/icon": "^34.5.0",
+		"@atlaskit/icon": "^35.0.0",
 		"@atlaskit/layering": "^3.7.0",
 		"@atlaskit/logo": "^20.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.5.0",
-		"@atlaskit/popup": "^4.19.0",
+		"@atlaskit/popup": "^4.20.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.8.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/side-nav-items": "^1.13.0",
@@ -105,15 +96,15 @@
 		"@atlaskit/badge": "^18.6.0",
 		"@atlaskit/banner": "^14.1.0",
 		"@atlaskit/breadcrumbs": "^16.1.0",
-		"@atlaskit/dropdown-menu": "^16.8.0",
-		"@atlaskit/flag": "^17.11.0",
+		"@atlaskit/dropdown-menu": "^16.9.0",
+		"@atlaskit/flag": "^17.12.0",
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/heading": "^5.4.0",
 		"@atlaskit/inline-dialog": "^18.1.0",
 		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/lozenge": "^13.8.0",
 		"@atlaskit/menu": "^8.5.0",
-		"@atlaskit/modal-dialog": "^15.0.0",
+		"@atlaskit/modal-dialog": "^15.1.0",
 		"@atlaskit/onboarding": "^14.6.0",
 		"@atlaskit/page-header": "^12.2.0",
 		"@atlaskit/page-layout": "^4.3.0",
@@ -123,18 +114,19 @@
 		"@atlaskit/skeleton": "^2.1.0",
 		"@atlaskit/spotlight": "^0.14.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/top-layer": "^0.6.0",
+		"@atlaskit/top-layer": "^0.8.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@atlassian/gemini": "^1.45.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/search-dialog": "^10.3.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.0.0",
-		"@atlassian/testing-library": "^0.5.0",
+		"@atlassian/testing-library": "^0.6.0",
 		"@axe-core/playwright": "^4.11.1",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
 		"raf-stub": "^2.0.1",
+		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
 	"techstack": {
@@ -174,9 +166,6 @@
 		"platform-dst-shape-theme-default": {
 			"type": "boolean"
 		},
-		"platform_dst_nav4_flyout_menu_slots_close_button": {
-			"type": "boolean"
-		},
 		"platform_dst_nav4_custom_theming_fhs_1": {
 			"type": "boolean"
 		},