@atlaskit/navigation-system 0.174.0 → 0.175.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlassian/navigation-system
 
+## 0.175.0
+
+### Minor Changes
+
+- [#189410](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/189410)
+  [`5e491d9960a3f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5e491d9960a3f) -
+  When a `FlyoutMenuItemContent` is open, clicking outside the content will close the flyout. We
+  have improved this functionality to make it more resilient to application code that stops events.
+  This changed is behind the feature flag `"platform_dst_nav4_flyout_use_capture_outside"`
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.174.0
 
 ### Minor Changes

package/afm-dev-agents/tsconfig.json

@@ -0,0 +1,75 @@
+{
+	"extends": "../../../../tsconfig.entry-points.dev-agents.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../dev-agents/tsDist/@atlaskit__navigation-system/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*"
+	],
+	"references": [
+		{
+			"path": "../../../analytics/analytics-next/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../avatar/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../button/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../css/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../ds-lib/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../icon/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../layering/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../logo/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../popup/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/core/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/hitbox/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/react-drop-indicator/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../primitives/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../../navigation/temp-nav-app-icons/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../tokens/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../tooltip/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../visually-hidden/afm-dev-agents/tsconfig.json"
+		}
+	]
+}

package/constellation/layout/usage.mdx

@@ -0,0 +1,122 @@
+---
+title: Layout
+description: Layout components define a page’s structure and the areas for navigation and content.
+order: 4
+---
+
+import layoutDo from './images/layout-do.png';
+import layoutDont from './images/layout-dont.png';
+
+## Usage
+
+Use layout to compose the structure of your application. It also defines the page behavior and
+navigational areas.
+
+When applying components to the navigational areas,
+[see navigation experience guidelines (Atlassians only)](https://hello.atlassian.net/wiki/spaces/navx/pages/5104144812).
+
+![Diagram of the navigation system layout areas](./images/layout-anatomy.png)
+
+<ol>
+	<li>
+		<strong>Banner:</strong> Optional. Use to display a <a href="/components/banner">banner</a>.
+	</li>
+	<li>
+		<strong>Top nav:</strong> Use to display{' '}
+		<a href="/components/navigation-system/top-nav-items">top nav items</a>.
+		<ol type="a">
+			<li>
+				<strong>Top nav start:</strong> Area for left-aligned actions.
+			</li>
+			<li>
+				<strong>Top nav middle:</strong> Area for centre-aligned actions.
+			</li>
+			<li>
+				<strong>Top nav end:</strong> Area for right-aligned actions.
+			</li>
+		</ol>
+	</li>
+	<li>
+		<strong>Side nav:</strong> Use to display{' '}
+		<a href="/components/navigation-system/side-nav-items">side nav items</a>. Is resizable and
+		collapsible.
+		<ol type="a" start="4">
+			<li>
+				<strong>Side nav header:</strong> Optional. Top part of the side nav (fixed).
+			</li>
+			<li>
+				<strong>Side nav content:</strong> Middle part of the side nav. Acts as the scroll
+				container.
+			</li>
+			<li>
+				<strong>Side nav footer:</strong> Optional. Bottom part of the side nav (fixed).
+			</li>
+		</ol>
+	</li>
+	<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.
+	</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
+
+The main difference between Aside, Panel and Modal dialog is their behaviours:
+
+- **Aside** is not collapsible, while **Panel** can be collapsible.
+- **Panel** and **Aside** present content alongside the **Main** area, while **Modal dialog** exists
+  in a layer above the page.
+- On small viewports (1024px and below), the **Panel** becomes an overlay, while the **Aside** moves
+  below **Main**.
+
+#### Usage guidance:
+
+- Use **Aside** for content that needs to be constantly visible and accessible without requiring the
+  user to open it, or have the ability to close it.
+- Use **Panel** for contextual information or tertiary actions that complement the user's workflow.
+  Panels enable greater multitasking by functioning as an additional work space, while keeping users
+  connected to their primary task.
+- Use **Modal dialog** when you need your user to focus their attention on a single or specific
+  task, like requiring a decision or action before they can return to their primary task.
+
+## Best practices
+
+### Design using grid in the Main area
+
+<DoDont
+	type="do"
+	image={{
+		url: layoutDo,
+		alt: 'A layout with a grid overlay on the Main area.',
+	}}
+	isFullWidth
+>
+	When designing, use <a href="/foundations/grid-beta">Grid</a> to position content within the Main
+	area only.
+</DoDont>
+
+<DoDont
+	type="dont"
+	image={{
+		url: layoutDont,
+		alt: 'A layout with a grid overlay on the Main area, but also on the Side nav, Aside and Panel areas.',
+	}}
+	isFullWidth
+>
+	Don't include Side nav, Aside or Panel areas as part of your Grid.
+</DoDont>
+
+## Related
+
+- [Page header](/components/page-header)
+- [Side nav items](/components/navigation-system/side-nav-items)
+- [Top nav items](/components/navigation-system/top-nav-items)
+- [Navigation experience guidelines (Atlassians only)](https://hello.atlassian.net/wiki/spaces/navx/pages/5104144812)
+- [Preview panel (Atlassians only)](https://atlaskit-website-staging.stg-east.frontend.public.atl-paas.net/#/packages/navigation/preview-panel)

package/constellation/side-nav-items/usage.mdx

@@ -0,0 +1,324 @@
+---
+title: Side nav items
+description: Menu items and elements for the side nav area.
+order: 4
+---
+
+import sideNavDo1 from './images/side-nav-do-1.png';
+import sideNavDont1 from './images/side-nav-dont-1.png';
+import sideNavDo2 from './images/side-nav-do-2.png';
+import sideNavDont2 from './images/side-nav-dont-2.png';
+import sideNavDo3 from './images/side-nav-do-3.png';
+import sideNavDont3 from './images/side-nav-dont-3.png';
+import sideNavDo4 from './images/side-nav-do-4.png';
+import sideNavDont4 from './images/side-nav-dont-4.png';
+import sideNavDo5 from './images/side-nav-do-5.png';
+import sideNavDont5 from './images/side-nav-dont-5.png';
+import sideNavDo6 from './images/side-nav-do-6.png';
+import sideNavDont6 from './images/side-nav-dont-6.png';
+import sideNavDo7 from './images/side-nav-do-7.png';
+import sideNavDont7 from './images/side-nav-dont-7.png';
+import sideNavDont8 from './images/side-nav-dont-8.png';
+import sideNavDont9 from './images/side-nav-dont-9.png';
+import sideNavDont10 from './images/side-nav-dont-10.png';
+
+## Usage
+
+Use side nav items to create different sections, actions, and links in the
+[side nav](/components/navigation-system/side-nav-items).
+
+![Diagram of the navigation system side nav](./images/side-nav-anatomy-1.png)
+
+![Diagram of the navigation system side nav items](./images/side-nav-anatomy-2.png)
+
+<ol>
+	<li>
+		<strong>Menu items:</strong> The interactive elements in the side nav that help users navigate
+		or perform actions.
+		<ol type="a">
+			<li>
+				<strong>elemBefore.</strong> Optional*. Only one allowed.
+			</li>
+			<li>
+				<strong>Label.</strong> Text that succinctly describes the menu item.
+			</li>
+			<li>
+				<strong>Description.</strong> Optional*. Additional information on the menu item, such as
+				meta data.
+			</li>
+			<li>
+				<strong>elemAfter.</strong> Optional*. Disappears when actionsOnHover display.
+			</li>
+			<li>
+				<strong>actions</strong> or <strong>actionsOnHover</strong>. Optional*. Icon buttons that
+				trigger actions independent from the menu item.
+			</li>
+		</ol>
+	</li>
+	<li>
+		<strong>Menu section:</strong> Use to group related menu items. Acts as a landmark for assistive
+		technology.
+	</li>
+	<li>
+		<strong>Menu section heading:</strong> Both a visual heading and ARIA label to name a menu
+		section.
+	</li>
+</ol>
+
+\*Some variations exist between menu item types. View the
+[menu item examples](/components/navigation-system/side-nav-items) for details.
+
+### Follow Atlassian's navigation patterns
+
+The current navigation has specific menu items that are similar across apps. Make sure your side
+navigation follows Atlassian patterns consistently,
+[see navigation experience guidelines (Atlassians only)](https://hello.atlassian.net/wiki/spaces/navx/pages/5104144812).
+
+### Choose side nav menu items based on action type
+
+There are four types of side nav menu items:
+
+1. Link menu items – navigates to another page.
+2. Button menu items – triggers an action.
+3. Expandable menu item – nests side nav menu items to create hierarchies.
+4. Flyout menu item – opens a popup.
+
+View the [menu item examples](/components/navigation-system/side-nav-items) for full behavior and
+guidance for each menu item.
+
+### Use side nav items only within the side nav
+
+Side nav menus are reserved for use directly within the
+[side nav](/components/navigation-system/side-nav-items) and the
+[flyout menu content](/components/navigation-system/side-nav-items/examples#flyout-menu-item)
+(popup).
+
+Menus anywhere else in the app, including those triggered from the top navigation, should also use
+regular [menu](/components/menu) or [dropdown menu](/components/dropdown-menu).
+
+<DoDont
+	type="do"
+	image={{
+		url: sideNavDo1,
+		alt: 'A side nav with side nav items only.',
+	}}
+>
+	Use side nav menus directly in the side nav or flyout menu content.
+</DoDont>
+
+<DoDont
+	type="dont"
+	image={{
+		url: sideNavDont1,
+		alt: 'Side nav items incorrectly used in the top nav.',
+	}}
+>
+	Don’t use side nav menus in other parts of the app.
+</DoDont>
+
+### Use dropdown menu for menus triggered from the side nav
+
+Use [dropdown menu](/components/dropdown-menu) for menus triggered by `actions` or `actionsOnHover`.
+Ensure you follow the general usage guidance for dropdown menu and use the following variants:
+
+- default density (cozy)
+- default placement (bottom-start; adjusts accordingly when space is limited)
+
+<DoDont
+	type="do"
+	image={{
+		url: sideNavDo2,
+		alt: 'An open dropdown menu with a list of items.',
+	}}
+	isFullWidth
+>
+	Use dropdown menu for menus triggered by actions or actionsOnHover.
+</DoDont>
+
+<DoDont
+	type="dont"
+	image={{
+		url: sideNavDont2,
+		alt: 'A dropdown menu with a list of items.',
+	}}
+>
+	Don’t use side nav menu in dropdown menus.
+</DoDont>
+
+<DoDont
+	type="dont"
+	image={{
+		url: sideNavDont3,
+		alt: 'A dropdown menu with menu item that uses compact density.',
+	}}
+>
+	Don’t use compact density for dropdown menus.
+</DoDont>
+
+<DoDont
+	type="dont"
+	image={{
+		url: sideNavDont4,
+		alt: 'A dropdown menu with menu item that does not have a selected state.',
+	}}
+>
+	Don’t omit the selected state on the dropdown trigger when open.
+</DoDont>
+
+<DoDont
+	type="dont"
+	image={{
+		url: sideNavDont5,
+		alt: 'A dropdown menu with a disabled menu item.',
+	}}
+>
+	Don’t use disabled menu items, see [menu](/components/menu/usage) guidance.
+</DoDont>
+
+## Best practices
+
+### Use the provided slots as intended
+
+Use [`elemBefore`](/components/navigation-system/side-nav-items/examples#elembefore),
+[`elemAfter`](/components/navigation-system/side-nav-items/examples#elemafter),
+[`actions`](/components/navigation-system/side-nav-items/examples#actions-and-actionsonhover), and
+[`actionsOnHover`](/components/navigation-system/side-nav-items/examples#actions-and-actionsonhover)
+slots for configuring menu items.
+
+<DoDont
+	type="do"
+	image={{
+		url: sideNavDo3,
+		alt: 'A menu item with "Templates" label and "TRY" text properly placed in a designated slot on the right.',
+	}}
+>
+	Use the slots in side nav menus as intended.
+</DoDont>
+
+<DoDont
+	type="dont"
+	image={{
+		url: sideNavDont6,
+		alt: 'A menu item with "Templates" label and "TRY" text incorrectly placed within the same text area.',
+	}}
+>
+	Don't add custom elements where they're not intended, such as within the label.
+</DoDont>
+
+### Apply icon sizes correctly
+
+Consider the following when applying icon sizes:
+
+- Use [default (medium 16px) icons](/components/icon/examples#default-16px) in `elemBefore`.
+- Use [small (12px) icons](/components/icon/examples#small-12px) in `elemAfter` as well as `actions`
+  and `actionsOnHover` icon buttons.
+- Chevrons always use small (12px) icons, regardless of where they're being applied.
+- All icons in side nav menu items use [spacious padding](/components/icon/examples#spacing-props).
+
+<DoDont
+	type="do"
+	image={{
+		url: sideNavDo4,
+		alt: 'A menu item with "Projects" label, 16px rocket icon on the left, and 12px plus and ellipsis icons on the right.',
+	}}
+>
+	Use small (12px) icons for actions, actionOnHover, and elemAfter. Use default (medium 16px) icons
+	for elemBefore.
+</DoDont>
+
+<DoDont
+	type="dont"
+	image={{
+		url: sideNavDont7,
+		alt: 'A menu item with "Projects" label, rocket icon, and incorrectly sized plus and ellipsis icons on the right.',
+	}}
+>
+	Don't use incorrect icons sizes in menu items, which can feel unbalanced.
+</DoDont>
+
+### Apply icon button correctly
+
+Use subtle compact [icon buttons](/components/button/icon-button/examples) in side nav menu items,
+such as in `actions` and `actionsOnHover`, or `elemBefore` in expandable menu items.
+
+For `actions` and `actionsOnHover`, when there is more than one icon button, use 4px spacing.
+
+<DoDont
+	type="do"
+	image={{
+		url: sideNavDo5,
+		alt: 'A menu item with "Projects" label, rocket icon, and subtle compact plus and ellipsis icon buttons with hover tooltip.',
+	}}
+>
+	Use subtle compact icon buttons in side nav menu items.
+</DoDont>
+
+<DoDont
+	type="dont"
+	image={{
+		url: sideNavDont8,
+		alt: 'A menu item with "Projects" label, rocket icon, and default icon buttons instead of subtle compact ones.',
+	}}
+>
+	Don't use default icon buttons in side nav menu items.
+</DoDont>
+
+### Use ContainerAvatar
+
+<DoDont
+	type="do"
+	image={{
+		url: sideNavDo6,
+		alt: 'A menu item with "Mobile app" label and ContainerAvatar icon on the left.',
+	}}
+>
+	Use{' '}
+	<a href="/components/navigation-system/side-nav-items/code#containeravatar">ContainerAvatar</a> in
+	side nav menu items, which are designed with the correct size and spacing.
+</DoDont>
+
+<DoDont
+	type="dont"
+	image={{
+		url: sideNavDont9,
+		alt: 'A menu item with "Mobile app" label and regular avatar icon instead of ContainerAvatar.',
+	}}
+>
+	Don't use <a href="/components/avatar">regular avatar</a> in side nav menu items.
+</DoDont>
+
+## Content guidelines
+
+### Write labels in sentence case for menu items and labels
+
+Only capitalize the first letter of the menu item name, unless the label contains a trademarked
+product or feature name that has been approved by legal.
+
+If the menu name is user generated, display as is.
+
+<DoDont
+	type="do"
+	image={{
+		url: sideNavDo7,
+		alt: 'A menu item with "For you" label using sentence case.',
+	}}
+>
+	Only capitalize the first letter of the first word of the label.
+</DoDont>
+
+<DoDont
+	type="dont"
+	image={{
+		url: sideNavDont10,
+		alt: 'A menu item with "For You" label using title case.',
+	}}
+>
+	Don't capitalize other parts of the label unless it is a trademarked product or feature name (not
+	all features are capitalized).
+</DoDont>
+
+## Related
+
+- [Layout](/components/navigation-system/layout)
+- [Top nav items](/components/navigation-system/top-nav-items)
+- [Navigation experience guidelines (Atlassians only)](https://hello.atlassian.net/wiki/spaces/navx/pages/5104144812)

package/constellation/top-nav-items/usage.mdx

@@ -0,0 +1,79 @@
+---
+title: Top nav items
+description: Buttons and elements for the top nav.
+order: 3
+---
+
+import topNavDo1 from './images/top-nav-do-1.png';
+import topNavDont1 from './images/top-nav-dont-1.png';
+import topNavDo2 from './images/top-nav-do-2.png';
+import topNavDont2 from './images/top-nav-dont-2.png';
+
+## Usage
+
+Use top nav items to create common utilities in
+the [top nav](/components/navigation-system/top-nav-items).
+
+![Diagram of the navigation system top nav](./images/top-nav-anatomy.png)
+
+1. **Start items:** Left-aligned buttons.
+2. **Middle items:** Centre-aligned actions.
+3. **End items:** Right-aligned buttons.
+
+## Follow Atlassian's navigation patterns
+
+The current navigation has specific menu items that are similar across apps. Make sure your top
+navigation follows Atlassian patterns consistently,
+[see navigation experience guidelines (Atlassians only)](https://hello.atlassian.net/wiki/spaces/navx/pages/5104144812).
+
+## Best practices
+
+### Use the top nav items provided
+
+<DoDont
+	type="do"
+	image={{
+		url: topNavDo1,
+		alt: 'Two buttons, one outlined and one solid purple, both labeled "Button".',
+	}}
+>
+	Use the top nav items provided.
+</DoDont>
+
+<DoDont
+	type="dont"
+	image={{
+		url: topNavDont1,
+		alt: 'Two buttons, one outlined and one solid purple, both labeled "Button".',
+	}}
+>
+	Don't use regular button in the top nav, as it won't respect custom theming.
+</DoDont>
+
+### Don't add elements to the top nav area
+
+<DoDont
+	type="do"
+	image={{
+		url: topNavDo2,
+		alt: 'A segment of a top navigation bar showing standard Atlassian icons and a highlighted "ate" item.',
+	}}
+>
+	Use the top nav items as intended.
+</DoDont>
+
+<DoDont
+	type="dont"
+	image={{
+		url: topNavDont2,
+		alt: 'A segment of a top navigation bar showing standard Atlassian icons with an additional "Logout" button and a diamond icon.',
+	}}
+>
+	Don't add elements to the top nav, which may negatively impact consistency across apps.
+</DoDont>
+
+## Related
+
+- [Layout](/components/navigation-system/layout)
+- [Side nav items](/components/navigation-system/side-nav-items)
+- [Navigation experience guidelines (Atlassians only)](https://hello.atlassian.net/wiki/spaces/navx/pages/5104144812)

package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js

@@ -38,7 +38,12 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
   return /*#__PURE__*/_react.default.createElement(_experimental.PopupContent, {
     appearance: "UNSAFE_modal-below-sm",
     onClose: handleClose,
-    placement: "right-start",
+    placement: "right-start"
+    // Using a capture event listener so that we are more resilient against
+    // code that stops events. We _really_ want to close the flyout whenever
+    // user user clicks outside the flyout content
+    ,
+    shouldUseCaptureOnOutsideClick: (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_use_capture_outside'),
     shouldFitViewport: true,
     testId: containerTestId,
     xcss: flyoutMenuItemContentStyles.root,

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

@@ -16,6 +16,7 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 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: "_2rko19bv _1e0c1txw _4cvr1h6o _4t3izwfg _1o9zidpf _ahbq1b66 _1toh1r31 _5jyqglyw _mrqmnqa1 _1w901kw7",
   interactionStates: "_irr3166n _1di61wwy",

package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js

@@ -29,7 +29,12 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/React.createElement(PopupContent, {
     appearance: "UNSAFE_modal-below-sm",
     onClose: handleClose,
-    placement: "right-start",
+    placement: "right-start"
+    // Using a capture event listener so that we are more resilient against
+    // code that stops events. We _really_ want to close the flyout whenever
+    // user user clicks outside the flyout content
+    ,
+    shouldUseCaptureOnOutsideClick: fg('platform_dst_nav4_flyout_use_capture_outside'),
     shouldFitViewport: true,
     testId: containerTestId,
     xcss: flyoutMenuItemContentStyles.root,

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

@@ -3,6 +3,7 @@ import "./app-logo.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useRef } from 'react';
 import { cx } from '@compiled/react';
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Anchor, Inline, Text } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { useHasCustomTheme } from '../themed/has-custom-theme-context';

package/dist/esm/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js

@@ -29,7 +29,12 @@ export var FlyoutMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwa
   return /*#__PURE__*/React.createElement(PopupContent, {
     appearance: "UNSAFE_modal-below-sm",
     onClose: handleClose,
-    placement: "right-start",
+    placement: "right-start"
+    // Using a capture event listener so that we are more resilient against
+    // code that stops events. We _really_ want to close the flyout whenever
+    // user user clicks outside the flyout content
+    ,
+    shouldUseCaptureOnOutsideClick: fg('platform_dst_nav4_flyout_use_capture_outside'),
     shouldFitViewport: true,
     testId: containerTestId,
     xcss: flyoutMenuItemContentStyles.root,

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

@@ -3,6 +3,7 @@ import "./app-logo.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useRef } from 'react';
 import { cx } from '@compiled/react';
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Anchor, Inline, Text } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { useHasCustomTheme } from '../themed/has-custom-theme-context';

package/examples/constellation/interactive-layout.tsx

@@ -45,6 +45,7 @@ import {
 	Search,
 	Settings,
 } from '@atlaskit/navigation-system/top-nav-items';
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Inline, Stack, Text } from '@atlaskit/primitives';
 import { token } from '@atlaskit/tokens';
 

package/examples/layers-in-main.tsx

@@ -56,6 +56,7 @@ import {
 	Search,
 	Settings,
 } from '@atlaskit/navigation-system/top-nav-items';
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Inline, Stack, Text } from '@atlaskit/primitives';
 import { PopupSelect } from '@atlaskit/select';
 import { token } from '@atlaskit/tokens';

package/examples/top-navigation-custom-logo.tsx

@@ -6,11 +6,17 @@ import { jsx } from '@compiled/react';
 
 import { Root } from '@atlaskit/navigation-system/layout/root';
 import { SideNavToggleButton } from '@atlaskit/navigation-system/layout/side-nav';
-import { TopNav, TopNavMiddle, TopNavStart } from '@atlaskit/navigation-system/layout/top-nav';
+import {
+	TopNav,
+	TopNavEnd,
+	TopNavMiddle,
+	TopNavStart,
+} from '@atlaskit/navigation-system/layout/top-nav';
 import {
 	AppSwitcher,
 	CreateButton,
 	NavLogo,
+	Profile,
 	Search,
 } from '@atlaskit/navigation-system/top-nav-items';
 
@@ -48,6 +54,9 @@ const TopNavigationCustomLogoInstance = ({
 					<Search onClick={() => alert('mobile search')} label="Search" />
 					<CreateButton onClick={() => alert('create')}>Create</CreateButton>
 				</TopNavMiddle>
+				<TopNavEnd>
+					<Profile label="Profile" />
+				</TopNavEnd>
 			</TopNav>
 		</Root>
 	</WithResponsiveViewport>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "0.174.0",
+	"version": "0.175.0",
 	"description": "The latest navigation system for Atlassian products.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -116,7 +116,7 @@
 		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/ds-lib": "^4.1.0",
-		"@atlaskit/icon": "^27.3.0",
+		"@atlaskit/icon": "^27.6.0",
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/logo": "^19.5.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -126,7 +126,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^14.10.0",
 		"@atlaskit/temp-nav-app-icons": "^0.9.0",
-		"@atlaskit/tokens": "^5.5.0",
+		"@atlaskit/tokens": "^5.6.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -146,7 +146,7 @@
 		"@atlaskit/badge": "^18.1.0",
 		"@atlaskit/banner": "^14.0.0",
 		"@atlaskit/breadcrumbs": "^15.2.0",
-		"@atlaskit/dropdown-menu": "^16.2.0",
+		"@atlaskit/dropdown-menu": "^16.3.0",
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/link": "^3.2.0",
@@ -226,6 +226,9 @@
 		},
 		"platform_dst_nav4_flyout_update_on_resize": {
 			"type": "boolean"
+		},
+		"platform_dst_nav4_flyout_use_capture_outside": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/navigation-system"

package/src/ui/menu-item/__tests__/unit/flyout-menu-item.test.tsx

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { type MouseEvent } from 'react';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { bind } from 'bind-event-listener';
 
 import HomeIcon from '@atlaskit/icon/core/home';
+import { ffTest } from '@atlassian/feature-flags-test-utils';
 
 import { ButtonMenuItem } from '../../button-menu-item';
 import { FlyoutMenuItem } from '../../flyout-menu-item/flyout-menu-item';
@@ -118,21 +120,142 @@ describe('FlyoutMenuItem', () => {
 		expect(screen.queryByText('Item 1')).not.toBeInTheDocument();
 	});
 
-	it('should close the popup when the popup is open and a click occurs outside of the popup', async () => {
-		render(
-			<FlyoutMenuItem isDefaultOpen>
-				<FlyoutMenuItemTrigger>Trigger</FlyoutMenuItemTrigger>
-				<FlyoutMenuItemContent>
-					<ButtonMenuItem>Item 1</ButtonMenuItem>
-				</FlyoutMenuItemContent>
-			</FlyoutMenuItem>,
-		);
+	describe('flyout content should close when clicking outside of popup', () => {
+		test('no event stopping', async () => {
+			render(
+				<FlyoutMenuItem isDefaultOpen>
+					<FlyoutMenuItemTrigger>Trigger</FlyoutMenuItemTrigger>
+					<FlyoutMenuItemContent>
+						<ButtonMenuItem>Item 1</ButtonMenuItem>
+					</FlyoutMenuItemContent>
+				</FlyoutMenuItem>,
+			);
 
-		expect(screen.queryByText('Item 1')).toBeVisible();
+			expect(screen.queryByText('Item 1')).toBeVisible();
 
-		await userEvent.click(document.body);
+			await userEvent.click(document.body);
 
-		expect(screen.queryByText('Item 1')).not.toBeInTheDocument();
+			expect(screen.queryByText('Item 1')).not.toBeInTheDocument();
+		});
+	});
+
+	ffTest.on('platform_dst_nav4_flyout_use_capture_outside', 'Click outside of flyout', () => {
+		test('bubble phase event listener stops event', async () => {
+			const cleanup = bind(window, {
+				type: 'click',
+				listener(event) {
+					event.stopImmediatePropagation();
+				},
+				// bubble phase listener
+				options: { capture: false },
+			});
+
+			render(
+				<FlyoutMenuItem isDefaultOpen>
+					<FlyoutMenuItemTrigger>Trigger</FlyoutMenuItemTrigger>
+					<FlyoutMenuItemContent>
+						<ButtonMenuItem>Item 1</ButtonMenuItem>
+					</FlyoutMenuItemContent>
+				</FlyoutMenuItem>,
+			);
+
+			expect(screen.queryByText('Item 1')).toBeVisible();
+
+			await userEvent.click(document.body);
+
+			expect(screen.queryByText('Item 1')).not.toBeInTheDocument();
+
+			cleanup();
+		});
+
+		test('high capture phase event listener stops event', async () => {
+			// not adding to `window` as this event listener would be added
+			// before the Popup one is added, and would stop the event before
+			// the Popup could process it
+			const cleanup1 = bind(document.body, {
+				type: 'click',
+				listener(event) {
+					event.stopImmediatePropagation();
+				},
+				// capture phase listener
+				options: { capture: true, once: true },
+			});
+			render(
+				<FlyoutMenuItem isDefaultOpen>
+					<FlyoutMenuItemTrigger>Trigger</FlyoutMenuItemTrigger>
+					<FlyoutMenuItemContent>
+						<ButtonMenuItem>Item 1</ButtonMenuItem>
+					</FlyoutMenuItemContent>
+				</FlyoutMenuItem>,
+			);
+			// This will be added after the added window capture listener
+			// used to close outside clicks, so we can add to the window
+			const cleanup2 = bind(window, {
+				type: 'click',
+				listener(event) {
+					event.stopImmediatePropagation();
+				},
+				// capture phase listener
+				options: { capture: true, once: true },
+			});
+
+			expect(screen.queryByText('Item 1')).toBeVisible();
+
+			await userEvent.click(document.body);
+
+			expect(screen.queryByText('Item 1')).not.toBeInTheDocument();
+
+			cleanup1();
+			cleanup2();
+		});
+
+		test('react bubble event listener stops event', async () => {
+			const onClick = jest.fn((event: MouseEvent) => event.stopPropagation());
+			render(
+				<>
+					<button type="button" data-testid="my-button" onClick={onClick}>
+						Hi there
+					</button>
+					<FlyoutMenuItem isDefaultOpen>
+						<FlyoutMenuItemTrigger>Trigger</FlyoutMenuItemTrigger>
+						<FlyoutMenuItemContent>
+							<ButtonMenuItem>Item 1</ButtonMenuItem>
+						</FlyoutMenuItemContent>
+					</FlyoutMenuItem>
+				</>,
+			);
+
+			expect(screen.queryByText('Item 1')).toBeVisible();
+
+			await userEvent.click(screen.getByTestId('my-button'));
+
+			expect(onClick).toHaveBeenCalled();
+			expect(screen.queryByText('Item 1')).not.toBeInTheDocument();
+		});
+
+		test('react capture event listener stops event', async () => {
+			const onClick = jest.fn((event: MouseEvent) => event.stopPropagation());
+			render(
+				<>
+					<button type="button" data-testid="my-button" onClickCapture={onClick}>
+						Hi there
+					</button>
+					<FlyoutMenuItem isDefaultOpen>
+						<FlyoutMenuItemTrigger>Trigger</FlyoutMenuItemTrigger>
+						<FlyoutMenuItemContent>
+							<ButtonMenuItem>Item 1</ButtonMenuItem>
+						</FlyoutMenuItemContent>
+					</FlyoutMenuItem>
+				</>,
+			);
+
+			expect(screen.queryByText('Item 1')).toBeVisible();
+
+			await userEvent.click(screen.getByTestId('my-button'));
+
+			expect(onClick).toHaveBeenCalled();
+			expect(screen.queryByText('Item 1')).not.toBeInTheDocument();
+		});
 	});
 
 	it('should close the popup when the escape key is pressed', async () => {

package/src/ui/menu-item/flyout-menu-item/flyout-menu-item-content.tsx

@@ -80,6 +80,10 @@ export const FlyoutMenuItemContent = forwardRef<HTMLDivElement, FlyoutMenuItemCo
 				appearance="UNSAFE_modal-below-sm"
 				onClose={handleClose}
 				placement="right-start"
+				// Using a capture event listener so that we are more resilient against
+				// code that stops events. We _really_ want to close the flyout whenever
+				// user user clicks outside the flyout content
+				shouldUseCaptureOnOutsideClick={fg('platform_dst_nav4_flyout_use_capture_outside')}
 				shouldFitViewport
 				testId={containerTestId}
 				xcss={flyoutMenuItemContentStyles.root}

package/src/ui/top-nav-items/nav-logo/app-logo.tsx

@@ -7,6 +7,7 @@ import React, { useCallback, useRef } from 'react';
 import { cssMap, cx, jsx } from '@compiled/react';
 
 import type { LogoProps } from '@atlaskit/logo';
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Anchor, Inline, Text } from '@atlaskit/primitives';
 import type { IconProps as TempIconProps } from '@atlaskit/temp-nav-app-icons/types';
 import { token } from '@atlaskit/tokens';

package/tsconfig.dev.json

@@ -157,6 +157,9 @@
 		{
 			"path": "../tooltip/tsconfig.app.json"
 		},
+		{
+			"path": "../../platform/feature-flags-test-utils/tsconfig.app.json"
+		},
 		{
 			"path": "../../monorepo-tooling/gemini/tsconfig.app.json"
 		},