@atlaskit/navigation-system 9.4.1 → 9.4.3

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlassian/navigation-system
 
+## 9.4.3
+
+### Patch Changes
+
+- [`f9eceea16e433`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f9eceea16e433) -
+  Fix `Root` safety-rail selector hiding native top-layer elements (`<dialog>` and elements with the
+  `popover` attribute) rendered as direct children of `Root`. These elements are now excluded from
+  the `display: none !important` rule so the browser can promote them into the top layer when
+  opened. Adds VR coverage for both cases.
+
+## 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

package/constellation/layout/code.mdx

@@ -17,7 +17,6 @@ props:
     - SideNavFooter
     - Main
     - MainStickyHeader
-    - Aside
     - Panel
     - PanelSplitter
     - SideNavToggleButton
@@ -103,20 +102,10 @@ 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,20 @@ 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**
-  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** presents content alongside the **main** area, while a **modal dialog** appears in a
+  layer above the page.
+- **Panel** can be collapsed and resized. On small viewports (1024px and below), the **panel**
+  becomes an overlay.
 
 #### Usage guidance
 
@@ -102,15 +93,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
-  order.
-- Provide a unique, meaningful `label` for side nav, aside, 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.
+  panel. This determines the keyboard tab order, screen reader reading order, and skip link order.
+- 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
   utility of each one before adding it.
@@ -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/components/skip-links/skip-link.js

@@ -13,7 +13,6 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _focusElement = require("./focus-element");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 var styles = {
   skipLinkListItem: "_1pfhze3t",
   skipLinkListItemNew: "_1rjcu2gc"

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/page-layout/root.compiled.css

@@ -2,6 +2,7 @@
 ._1e0c11p5{display:grid}
 ._1lmcq9em{grid-template-areas:"banner" "top-bar" "main" "aside"}
 ._1tke1kxc{min-height:100vh}
+._1tvnagmp >:not([data-layout-slot]):not(dialog):not([popover]){display:none!important}
 ._2z0516ab{grid-template-rows:auto auto 1fr auto}
 ._yv0ei47z{grid-template-columns:minmax(0,1fr)}
 @media (min-width:64rem){._12fk1aio{grid-template-areas:"banner banner banner banner" "ribbon top-bar top-bar top-bar" "ribbon side-nav main aside"}._12qzrxre{grid-template-rows:auto auto 3fr}._1rqteala{grid-template-columns:auto auto minmax(0,1fr) auto}}

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

@@ -23,7 +23,9 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // ID of the root element that the banner and top bar slots hoist their sizes to. Only internally exported.
 var gridRootId = exports.gridRootId = 'unsafe-design-system-page-layout-root';
 var styles = {
-  root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _1ciragmp _12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco"
+  root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco",
+  safetyRail: "_1ciragmp",
+  safetyRailWithTopLayer: "_1tvnagmp"
 };
 
 /**
@@ -47,9 +49,12 @@ function Root(_ref) {
   (0, _react.useEffect)(function () {
     if (process.env.NODE_ENV !== 'production') {
       var IGNORED_ELEMENTS = ['SCRIPT', 'STYLE'];
+      var topLayerGateOn = (0, _platformFeatureFlags.fg)('platform-dst-top-layer');
       if (ref.current) {
         Array.from(ref.current.children).forEach(function (child) {
-          if (!IGNORED_ELEMENTS.includes(child.tagName) && !child.hasAttribute('data-layout-slot')) {
+          // Top-layer elements are allowed as direct children when the gate is on.
+          var isTopLayerElement = topLayerGateOn && (child.tagName.toLowerCase() === 'dialog' || child.hasAttribute('popover'));
+          if (!IGNORED_ELEMENTS.includes(child.tagName) && !child.hasAttribute('data-layout-slot') && !isTopLayerElement) {
             // eslint-disable-next-line no-console
             console.error("Page Layout Error\n\nThis element has been forcibly hidden:\n\n", child, "\n\nAn element was rendered as a child of the page layout root that isn't a page layout component! Resolve this error by moving it into a page layout component.\n\nThis message will not be displayed in production.\n");
           }
@@ -69,7 +74,7 @@ function Root(_ref) {
     testId: testId
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
-    className: (0, _runtime.ax)([styles.root, xcss]),
+    className: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('platform-dst-top-layer') ? styles.safetyRailWithTopLayer : styles.safetyRail, xcss]),
     id: gridRootId,
     "data-testid": testId
   }, children)))))))));

package/dist/cjs/ui/top-nav-items/nav-logo/custom-logo.js

@@ -16,7 +16,6 @@ var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _hasCustomThemeContext = require("../themed/has-custom-theme-context");
 var _logoRenderer = require("./logo-renderer");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 var anchorStyles = {
   root: "_2rkofajl _1e0c1txw _4cvr1h6o _4t3izwfg",
   customLogoBorderRadius: "_2rkofajl",

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/components/skip-links/skip-link.js

@@ -3,7 +3,6 @@ import "./skip-link.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Anchor } from '@atlaskit/primitives/compiled';
 import { focusElement } from './focus-element';
 const styles = {

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/page-layout/root.compiled.css

@@ -2,6 +2,7 @@
 ._1e0c11p5{display:grid}
 ._1lmcq9em{grid-template-areas:"banner" "top-bar" "main" "aside"}
 ._1tke1kxc{min-height:100vh}
+._1tvnagmp >:not([data-layout-slot]):not(dialog):not([popover]){display:none!important}
 ._2z0516ab{grid-template-rows:auto auto 1fr auto}
 ._yv0ei47z{grid-template-columns:minmax(0,1fr)}
 @media (min-width:64rem){._12fk1aio{grid-template-areas:"banner banner banner banner" "ribbon top-bar top-bar top-bar" "ribbon side-nav main aside"}._12qzrxre{grid-template-rows:auto auto 3fr}._1rqteala{grid-template-columns:auto auto minmax(0,1fr) auto}}

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

@@ -15,7 +15,9 @@ import { SideNavVisibilityProvider } from './side-nav/visibility-provider';
 // ID of the root element that the banner and top bar slots hoist their sizes to. Only internally exported.
 export const gridRootId = 'unsafe-design-system-page-layout-root';
 const styles = {
-  root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _1ciragmp _12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco"
+  root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco",
+  safetyRail: "_1ciragmp",
+  safetyRailWithTopLayer: "_1tvnagmp"
 };
 
 /**
@@ -36,9 +38,12 @@ export function Root({
   useEffect(() => {
     if (process.env.NODE_ENV !== 'production') {
       const IGNORED_ELEMENTS = ['SCRIPT', 'STYLE'];
+      const topLayerGateOn = fg('platform-dst-top-layer');
       if (ref.current) {
         Array.from(ref.current.children).forEach(child => {
-          if (!IGNORED_ELEMENTS.includes(child.tagName) && !child.hasAttribute('data-layout-slot')) {
+          // Top-layer elements are allowed as direct children when the gate is on.
+          const isTopLayerElement = topLayerGateOn && (child.tagName.toLowerCase() === 'dialog' || child.hasAttribute('popover'));
+          if (!IGNORED_ELEMENTS.includes(child.tagName) && !child.hasAttribute('data-layout-slot') && !isTopLayerElement) {
             // eslint-disable-next-line no-console
             console.error(`Page Layout Error
 
@@ -67,7 +72,7 @@ This message will not be displayed in production.
     testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: ax([styles.root, xcss]),
+    className: ax([styles.root, fg('platform-dst-top-layer') ? styles.safetyRailWithTopLayer : styles.safetyRail, xcss]),
     id: gridRootId,
     "data-testid": testId
   }, children)))))))));

package/dist/es2019/ui/top-nav-items/nav-logo/custom-logo.js

@@ -4,7 +4,6 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { fg } from '@atlaskit/platform-feature-flags';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Anchor } from '@atlaskit/primitives/compiled';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { useHasCustomTheme } from '../themed/has-custom-theme-context';

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/components/skip-links/skip-link.js

@@ -3,7 +3,6 @@ import "./skip-link.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Anchor } from '@atlaskit/primitives/compiled';
 import { focusElement } from './focus-element';
 var styles = {

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/page-layout/root.compiled.css

@@ -2,6 +2,7 @@
 ._1e0c11p5{display:grid}
 ._1lmcq9em{grid-template-areas:"banner" "top-bar" "main" "aside"}
 ._1tke1kxc{min-height:100vh}
+._1tvnagmp >:not([data-layout-slot]):not(dialog):not([popover]){display:none!important}
 ._2z0516ab{grid-template-rows:auto auto 1fr auto}
 ._yv0ei47z{grid-template-columns:minmax(0,1fr)}
 @media (min-width:64rem){._12fk1aio{grid-template-areas:"banner banner banner banner" "ribbon top-bar top-bar top-bar" "ribbon side-nav main aside"}._12qzrxre{grid-template-rows:auto auto 3fr}._1rqteala{grid-template-columns:auto auto minmax(0,1fr) auto}}

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

@@ -15,7 +15,9 @@ import { SideNavVisibilityProvider } from './side-nav/visibility-provider';
 // ID of the root element that the banner and top bar slots hoist their sizes to. Only internally exported.
 export var gridRootId = 'unsafe-design-system-page-layout-root';
 var styles = {
-  root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _1ciragmp _12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco"
+  root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco",
+  safetyRail: "_1ciragmp",
+  safetyRailWithTopLayer: "_1tvnagmp"
 };
 
 /**
@@ -39,9 +41,12 @@ export function Root(_ref) {
   useEffect(function () {
     if (process.env.NODE_ENV !== 'production') {
       var IGNORED_ELEMENTS = ['SCRIPT', 'STYLE'];
+      var topLayerGateOn = fg('platform-dst-top-layer');
       if (ref.current) {
         Array.from(ref.current.children).forEach(function (child) {
-          if (!IGNORED_ELEMENTS.includes(child.tagName) && !child.hasAttribute('data-layout-slot')) {
+          // Top-layer elements are allowed as direct children when the gate is on.
+          var isTopLayerElement = topLayerGateOn && (child.tagName.toLowerCase() === 'dialog' || child.hasAttribute('popover'));
+          if (!IGNORED_ELEMENTS.includes(child.tagName) && !child.hasAttribute('data-layout-slot') && !isTopLayerElement) {
             // eslint-disable-next-line no-console
             console.error("Page Layout Error\n\nThis element has been forcibly hidden:\n\n", child, "\n\nAn element was rendered as a child of the page layout root that isn't a page layout component! Resolve this error by moving it into a page layout component.\n\nThis message will not be displayed in production.\n");
           }
@@ -61,7 +66,7 @@ export function Root(_ref) {
     testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: ax([styles.root, xcss]),
+    className: ax([styles.root, fg('platform-dst-top-layer') ? styles.safetyRailWithTopLayer : styles.safetyRail, xcss]),
     id: gridRootId,
     "data-testid": testId
   }, children)))))))));

package/dist/esm/ui/top-nav-items/nav-logo/custom-logo.js

@@ -4,7 +4,6 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { fg } from '@atlaskit/platform-feature-flags';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Anchor } from '@atlaskit/primitives/compiled';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { useHasCustomTheme } from '../themed/has-custom-theme-context';

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.1",
+	"version": "9.4.3",
 	"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
 				}
 			]
@@ -70,23 +61,23 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^11.2.0",
+		"@atlaskit/analytics-next": "^11.3.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": "^35.0.0",
-		"@atlaskit/layering": "^3.7.0",
-		"@atlaskit/logo": "^20.1.0",
+		"@atlaskit/icon": "^35.4.0",
+		"@atlaskit/layering": "^3.8.0",
+		"@atlaskit/logo": "^20.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.5.0",
-		"@atlaskit/popup": "^4.19.0",
+		"@atlaskit/popup": "^4.24.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.8.0",
 		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/side-nav-items": "^1.13.0",
-		"@atlaskit/tokens": "^13.0.0",
-		"@atlaskit/tooltip": "^22.2.0",
+		"@atlaskit/side-nav-items": "^1.14.0",
+		"@atlaskit/tokens": "^13.3.0",
+		"@atlaskit/tooltip": "^22.6.0",
 		"@atlaskit/visually-hidden": "^3.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
@@ -102,18 +93,18 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/badge": "^18.6.0",
+		"@atlaskit/badge": "^18.7.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.10.0",
+		"@atlaskit/flag": "^17.13.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.2.0",
 		"@atlaskit/onboarding": "^14.6.0",
 		"@atlaskit/page-header": "^12.2.0",
 		"@atlaskit/page-layout": "^4.3.0",
@@ -121,11 +112,11 @@
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/select": "^21.12.0",
 		"@atlaskit/skeleton": "^2.1.0",
-		"@atlaskit/spotlight": "^0.14.0",
+		"@atlaskit/spotlight": "^0.15.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/top-layer": "^0.6.0",
+		"@atlaskit/top-layer": "^0.16.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
-		"@atlassian/gemini": "^1.45.0",
+		"@atlassian/gemini": "^1.46.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/search-dialog": "^10.3.0",
 		"@atlassian/ssr-tests": "workspace:^",
@@ -135,6 +126,7 @@
 		"@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"
 		},