@atlaskit/navigation-system 9.4.2 → 9.4.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

package/constellation/layout/code.mdx

@@ -104,7 +104,8 @@ The sticky header of the main layout area.
 
 ### Panel
 
-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.
+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/usage.mdx

@@ -81,9 +81,10 @@ When applying components to the navigational areas,
 
 The main difference between panel and modal dialog is their behaviors:
 
-- **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.
+- **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
 
@@ -96,10 +97,9 @@ The main difference between panel and modal dialog is their behaviors:
 ## Accessibility
 
 - Always place slots in this order as direct children of the root: banner, top nav, side nav, main,
-  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.
+  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.

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/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/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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "9.4.2",
+	"version": "9.4.3",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -61,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.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.20.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",
@@ -93,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.9.0",
-		"@atlaskit/flag": "^17.12.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.1.0",
+		"@atlaskit/modal-dialog": "^15.2.0",
 		"@atlaskit/onboarding": "^14.6.0",
 		"@atlaskit/page-header": "^12.2.0",
 		"@atlaskit/page-layout": "^4.3.0",
@@ -112,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.8.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:^",