@atlaskit/navigation-system 5.16.0 → 5.18.0

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

@@ -2,8 +2,10 @@
 import "./top-nav-middle.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
+import { openLayerObserverTopNavMiddleNamespace } from '../constants';
 var styles = {
   root: "_zulpu2gc _yyhycs5v _1bsb1osq _4cvr1h6o _1e0c1txw _1bahh9n0 _181n11p5 _1j8b15b0 _lagd1bp4 _1t4c1ris _12e8h9n0",
   fullHeightSidebar: "_lcxv1wug"
@@ -22,5 +24,7 @@ export function TopNavMiddle(_ref) {
   var isFhsEnabled = useIsFhsEnabled();
   return /*#__PURE__*/React.createElement("div", {
     className: ax([styles.root, isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') && styles.fullHeightSidebar])
-  }, children);
+  }, fg('platform-dst-side-nav-layering-fixes') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
+    namespace: openLayerObserverTopNavMiddleNamespace
+  }, children) : children);
 }

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

@@ -4,11 +4,12 @@ import "./top-nav-start.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
+import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery } from '@atlaskit/primitives/compiled';
 import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-context';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-import { sideNavContentScrollTimelineVar } from '../constants';
+import { openLayerObserverTopNavStartNamespace, sideNavContentScrollTimelineVar } from '../constants';
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 import { SideNavVisibilityState } from '../side-nav/visibility-context';
 
@@ -145,7 +146,9 @@ var TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS(_
     ref: ref,
     "data-testid": testId,
     className: ax([innerStyles.root, !fg('platform-dst-side-nav-layering-fixes') && innerStyles.fullHeightSidebar, fg('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded])
-  }, children));
+  }, fg('platform-dst-side-nav-layering-fixes') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
+    namespace: openLayerObserverTopNavStartNamespace
+  }, children) : children));
 });
 
 /**

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

@@ -1,22 +1,22 @@
 /* top-nav.tsx generated by @compiled/babel-plugin v0.38.1 */
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["backgroundColor"];
 import "./top-nav.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useContext, useLayoutEffect, useMemo, useState } from 'react';
-import { OpenLayerObserverNamespaceProvider, useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { useContext, useMemo } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useSkipLink } from '../../../context/skip-links/skip-links-context';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
 import { useCustomTheme } from '../../top-nav-items/themed/use-custom-theme';
-import { bannerMountedVar, localSlotLayers, openLayerObserverTopNavNamespace, sideNavLiveWidthVar, topNavMountedVar, UNSAFE_topNavVar } from '../constants';
+import { bannerMountedVar, localSlotLayers, openLayerObserverTopNavEndNamespace, openLayerObserverTopNavMiddleNamespace, openLayerObserverTopNavStartNamespace, sideNavLiveWidthVar, topNavMountedVar, UNSAFE_topNavVar } from '../constants';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
 import { DangerouslyHoistCssVarToDocumentRoot, HoistCssVarToLocalGrid } from '../hoist-utils';
 import { useLayoutId } from '../id-utils';
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
+import { useHasOpenLayers } from '../use-open-layer-count';
+
 /**
  * Styles for the container for the top nav items.
  *
@@ -43,6 +43,14 @@ var backgroundStyles = {
   sideNavExpanded: "_hyzqcs5v"
 };
 
+/**
+ * Namespaces to check for open layers within the top nav.
+ * When there is an open layer in the top nav, the top nav is given a higher z-index than the side nav.
+ *
+ * Placed outside the component for stability, as the list is used as an effect dependency.
+ */
+var topNavOpenLayerNamespaces = [openLayerObserverTopNavStartNamespace, openLayerObserverTopNavMiddleNamespace, openLayerObserverTopNavEndNamespace];
+
 /**
  * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
  */
@@ -94,34 +102,10 @@ export function TopNav(_ref) {
     foregroundStyle = _useMemo.foregroundStyle;
   var _useSideNavVisibility = useSideNavVisibility(),
     isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
-  var openLayerObserver = useOpenLayerObserver();
-  // Setting the initial state to false, as it is unlikely that the top nav would have an open popup when the app starts.
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    hasOpenPopup = _useState2[0],
-    setHasOpenPopup = _useState2[1];
-  useLayoutEffect(function () {
-    if (!openLayerObserver || !isFhsEnabled || !fg('platform-dst-side-nav-layering-fixes')) {
-      return;
-    }
-    function checkAndSetState() {
-      if (!openLayerObserver) {
-        return;
-      }
-      setHasOpenPopup(openLayerObserver.getCount({
-        namespace: openLayerObserverTopNavNamespace,
-        type: 'popup'
-      }) > 0);
-    }
-
-    // Initial check
-    checkAndSetState();
-
-    // Check again whenever number of layers in the top nav change
-    return openLayerObserver.onChange(checkAndSetState, {
-      namespace: openLayerObserverTopNavNamespace
-    });
-  }, [isFhsEnabled, openLayerObserver]);
+  var hasOpenPopup = useHasOpenLayers({
+    namespaces: topNavOpenLayerNamespaces,
+    type: 'popup'
+  });
   return /*#__PURE__*/React.createElement(HasCustomThemeContext.Provider, {
     value: customTheme.isEnabled
   }, isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') && /*#__PURE__*/React.createElement("div", {
@@ -154,7 +138,5 @@ export function TopNav(_ref) {
     value: height
   })
   // ------ END UNSAFE STYLES ------
-  , fg('platform-dst-side-nav-layering-fixes') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
-    namespace: openLayerObserverTopNavNamespace
-  }, children) : children));
+  , children));
 }

package/dist/esm/ui/page-layout/use-open-layer-count.js

@@ -0,0 +1,53 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useState } from 'react';
+import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useIsFhsEnabled } from '../fhs-rollout/use-is-fhs-enabled';
+
+/**
+ * Returns whether there are any open layers across the specified namespaces, optionally filtered by type.
+ */
+export function useHasOpenLayers(_ref) {
+  var namespaces = _ref.namespaces,
+    type = _ref.type;
+  var isFhsEnabled = useIsFhsEnabled();
+  var openLayerObserver = useOpenLayerObserver();
+  // Setting the initial state to false, as it is unlikely that there would be any open layers when the app starts.
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasOpenLayers = _useState2[0],
+    setHasOpenLayers = _useState2[1];
+  useEffect(function () {
+    if (!openLayerObserver || !isFhsEnabled || !fg('platform-dst-side-nav-layering-fixes')) {
+      return;
+    }
+    function updateState() {
+      if (!openLayerObserver) {
+        return;
+      }
+      var hasAnyOpenLayers = namespaces.some(function (namespace) {
+        return openLayerObserver.getCount({
+          namespace: namespace,
+          type: type
+        }) > 0;
+      });
+      setHasOpenLayers(hasAnyOpenLayers);
+    }
+
+    // Initial check
+    updateState();
+
+    // Subscribe to each namespace
+    var cleanups = namespaces.map(function (namespace) {
+      return openLayerObserver.onChange(updateState, {
+        namespace: namespace
+      });
+    });
+    return function cleanupHook() {
+      cleanups.forEach(function (cleanup) {
+        return cleanup();
+      });
+    };
+  }, [isFhsEnabled, openLayerObserver, namespaces, type]);
+  return hasOpenLayers;
+}

package/dist/types/ui/menu-item/flyout-menu-item/flyout-menu-item-context.d.ts

@@ -24,3 +24,18 @@ export declare const OnCloseContext: import("react").Context<(() => void) | null
  * A context provider for supplying the onClose function to the FlyoutHeader.
  */
 export declare const OnCloseProvider: import("react").Provider<(() => void) | null | undefined>;
+/**
+ * __Title id context__
+ *
+ * A context for storing the title id of the FlyoutMenuItem that is displayed in
+ * FlyoutHeader, and used as the aria-labelledby on the FlyoutMenuItemContent
+ * container.
+ */
+export declare const TitleIdContext: import("react").Context<string | undefined>;
+export declare const useTitleId: () => string | undefined;
+/**
+ * __Title id provider__
+ *
+ * A context provider for supplying the title id to the FlyoutHeader.
+ */
+export declare const TitleIdContextProvider: import("react").Provider<string | undefined>;

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

@@ -42,7 +42,9 @@ export declare const localSlotLayers: {
     panelSmallViewports: number;
 };
 export declare const openLayerObserverSideNavNamespace = "side-nav";
-export declare const openLayerObserverTopNavNamespace = "top-nav";
+export declare const openLayerObserverTopNavStartNamespace = "top-nav-start";
+export declare const openLayerObserverTopNavMiddleNamespace = "top-nav-middle";
+export declare const openLayerObserverTopNavEndNamespace = "top-nav-end";
 /**
  * CSS scroll timeline variable for the side nav content scroll indicator.
  * The scroll timeline is created in SideNavContent, and then used by TopNavStart to apply the scroll indicator line.

package/dist/types/ui/page-layout/use-open-layer-count.d.ts

@@ -0,0 +1,8 @@
+import { type LayerType } from '@atlaskit/layering/experimental/open-layer-observer';
+/**
+ * Returns whether there are any open layers across the specified namespaces, optionally filtered by type.
+ */
+export declare function useHasOpenLayers({ namespaces, type, }: {
+    namespaces: string[];
+    type?: LayerType;
+}): boolean;

package/dist/types-ts4.5/ui/menu-item/flyout-menu-item/flyout-menu-item-context.d.ts

@@ -24,3 +24,18 @@ export declare const OnCloseContext: import("react").Context<(() => void) | null
  * A context provider for supplying the onClose function to the FlyoutHeader.
  */
 export declare const OnCloseProvider: import("react").Provider<(() => void) | null | undefined>;
+/**
+ * __Title id context__
+ *
+ * A context for storing the title id of the FlyoutMenuItem that is displayed in
+ * FlyoutHeader, and used as the aria-labelledby on the FlyoutMenuItemContent
+ * container.
+ */
+export declare const TitleIdContext: import("react").Context<string | undefined>;
+export declare const useTitleId: () => string | undefined;
+/**
+ * __Title id provider__
+ *
+ * A context provider for supplying the title id to the FlyoutHeader.
+ */
+export declare const TitleIdContextProvider: import("react").Provider<string | undefined>;

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

@@ -42,7 +42,9 @@ export declare const localSlotLayers: {
     panelSmallViewports: number;
 };
 export declare const openLayerObserverSideNavNamespace = "side-nav";
-export declare const openLayerObserverTopNavNamespace = "top-nav";
+export declare const openLayerObserverTopNavStartNamespace = "top-nav-start";
+export declare const openLayerObserverTopNavMiddleNamespace = "top-nav-middle";
+export declare const openLayerObserverTopNavEndNamespace = "top-nav-end";
 /**
  * CSS scroll timeline variable for the side nav content scroll indicator.
  * The scroll timeline is created in SideNavContent, and then used by TopNavStart to apply the scroll indicator line.

package/dist/types-ts4.5/ui/page-layout/use-open-layer-count.d.ts

@@ -0,0 +1,8 @@
+import { type LayerType } from '@atlaskit/layering/experimental/open-layer-observer';
+/**
+ * Returns whether there are any open layers across the specified namespaces, optionally filtered by type.
+ */
+export declare function useHasOpenLayers({ namespaces, type, }: {
+    namespaces: string[];
+    type?: LayerType;
+}): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "5.16.0",
+	"version": "5.18.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -73,15 +73,15 @@
 		"@atlaskit/ds-lib": "^5.3.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^29.3.0",
-		"@atlaskit/layering": "^3.5.0",
+		"@atlaskit/layering": "^3.6.0",
 		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/popup": "^4.10.0",
+		"@atlaskit/popup": "^4.12.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^17.0.0",
-		"@atlaskit/tokens": "^9.0.0",
+		"@atlaskit/tokens": "^9.1.0",
 		"@atlaskit/tooltip": "^20.11.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -102,9 +102,9 @@
 		"@atlaskit/badge": "^18.3.0",
 		"@atlaskit/banner": "^14.0.0",
 		"@atlaskit/breadcrumbs": "^15.3.0",
-		"@atlaskit/dropdown-menu": "^16.3.0",
+		"@atlaskit/dropdown-menu": "^16.4.0",
 		"@atlaskit/form": "^15.2.0",
-		"@atlaskit/link": "^3.2.0",
+		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/lozenge": "^13.3.0",
 		"@atlaskit/menu": "^8.4.0",
 		"@atlaskit/modal-dialog": "^14.9.0",
@@ -148,6 +148,9 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform_dst_nav4_side_nav_resize_tooltip_feedback": {
+			"type": "boolean"
+		},
 		"platform_dst_nav4_fhs_instrumentation_1": {
 			"type": "boolean"
 		},