@atlaskit/navigation-system 5.15.0 → 5.16.0

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

@@ -1,15 +1,18 @@
 /* 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, useMemo } from 'react';
+import { useContext, useLayoutEffect, useMemo, useState } from 'react';
+import { OpenLayerObserverNamespaceProvider, useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+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, topNavMountedVar, UNSAFE_topNavVar } from '../constants';
+import { bannerMountedVar, localSlotLayers, openLayerObserverTopNavNamespace, sideNavLiveWidthVar, topNavMountedVar, UNSAFE_topNavVar } from '../constants';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
 import { DangerouslyHoistCssVarToDocumentRoot, HoistCssVarToLocalGrid } from '../hoist-utils';
 import { useLayoutId } from '../id-utils';
@@ -25,7 +28,9 @@ import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 var styles = {
   root: "_nd5l8cbt _zulpu2gc _18zrutpp _179ria51 _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
   fullHeightSidebar: "_18zrze3t _179rglyw _bfhkglyw _lcxvglyw _pdlmutpp",
-  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax"
+  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax",
+  fullHeightSidebarWithLayeringFixes: "_1pbycs5v _lcxv1wug _bfhkvuon _aetrb3bt _18postnw _1gufidpf _1czdidpf _g0nf3tht _1beue4h9 _uaeunqa1 _1cte1l7x",
+  fullHeightSidebarWithLayeringFixesAndOpenLayer: "_1pby11wp"
 };
 
 /**
@@ -60,6 +65,8 @@ export function TopNav(_ref) {
   var customTheme = useCustomTheme(UNSAFE_theme);
 
   /**
+   * Note: this is no longer the case when fg('platform-dst-side-nav-layering-fixes') is enabled.
+   *
    * With the full height sidebar we have a foreground and background element,
    * so we need to apply the custom theme styles to the correct element.
    *
@@ -87,9 +94,37 @@ 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]);
   return /*#__PURE__*/React.createElement(HasCustomThemeContext.Provider, {
     value: customTheme.isEnabled
-  }, isFhsEnabled && /*#__PURE__*/React.createElement("div", {
+  }, isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') && /*#__PURE__*/React.createElement("div", {
     "data-layout-slot": true,
     "aria-hidden": true
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
@@ -99,11 +134,13 @@ export function TopNav(_ref) {
   }), /*#__PURE__*/React.createElement("header", {
     id: id,
     "data-layout-slot": true,
-    className: ax([styles.root, isFhsEnabled && styles.fullHeightSidebar, isExpandedOnDesktop && isFhsEnabled && styles.fullHeightSidebarExpanded, xcss]),
+    className: ax([styles.root, isFhsEnabled && styles.fullHeightSidebar, isFhsEnabled && fg('platform-dst-side-nav-layering-fixes') && styles.fullHeightSidebarWithLayeringFixes, hasOpenPopup && isFhsEnabled && fg('platform-dst-side-nav-layering-fixes') && styles.fullHeightSidebarWithLayeringFixesAndOpenLayer, isExpandedOnDesktop && isFhsEnabled && styles.fullHeightSidebarExpanded, xcss]),
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
-    style: isFhsEnabled ? foregroundStyle : customTheme.isEnabled ? customTheme.style : undefined
+    style:
+    // When the layering fixes are enabled, we no longer have separate elements for the foreground and background.
+    isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') ? foregroundStyle : customTheme.isEnabled ? customTheme.style : undefined
   }, /*#__PURE__*/React.createElement(HoistCssVarToLocalGrid, {
     variableName: topNavMountedVar,
     value: height
@@ -117,5 +154,7 @@ export function TopNav(_ref) {
     value: height
   })
   // ------ END UNSAFE STYLES ------
-  , children));
+  , fg('platform-dst-side-nav-layering-fixes') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
+    namespace: openLayerObserverTopNavNamespace
+  }, children) : children));
 }

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

@@ -35,6 +35,16 @@ export declare const UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = "calc(var(--
 export declare const localSlotLayers: {
     topBar: number;
     banner: number;
+    topNavFHSWithOpenLayer: number;
+    bannerFHS: number;
+    topNavFHS: number;
     sideNav: number;
     panelSmallViewports: number;
 };
+export declare const openLayerObserverSideNavNamespace = "side-nav";
+export declare const openLayerObserverTopNavNamespace = "top-nav";
+/**
+ * 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.
+ */
+export declare const sideNavContentScrollTimelineVar = "--sNcst";

package/dist/types/ui/page-layout/panel-splitter/context.d.ts

@@ -25,8 +25,13 @@ export type PanelSplitterContextType = {
     getResizeBounds: () => ResizeBounds;
     /**
      * A ref to the portal element where the panel splitter will be rendered.
-     * Internally set by the PanelSplitterProvider.
-     * Used to render the panel splitter outside of an overflow container.
+     * It can optionally be provided by consumers of <PanelSplitterProvider> (when the feature gate
+     * `platform-dst-side-nav-layering-fixes` is enabled).
+     * If not provided, it will be internally set by the PanelSplitterProvider.
+     *
+     * This prop is useful for:
+     * - Rendering the panel splitter outside of an overflow container.
+     * - Positioning the panel splitter outside the resizing panel.
      */
     portalRef: MutableRefObject<HTMLDivElement | null>;
     /**

package/dist/types/ui/page-layout/panel-splitter/provider.d.ts

@@ -1,12 +1,30 @@
-import React from 'react';
+import React, { type MutableRefObject } from 'react';
 import { type PanelSplitterContextType } from './context';
 export type PanelSplitterProviderProps = Omit<PanelSplitterContextType, 'portalRef' | 'position'> & {
     children: React.ReactNode;
+    /**
+     * The side of the panel/element that the splitter element is positioned on. Uses logical values to support right-to-left languages.
+     *
+     * Defaults to `start`.
+     *
+     * For left-to-right languages, `start` is the left side and `end` is the right side.
+     */
     position?: 'start' | 'end';
+    /**
+     * A ref to the portal element where the panel splitter will be rendered.
+     * It can optionally be provided by consumers of <PanelSplitterProvider> (when the feature gate
+     * `platform-dst-side-nav-layering-fixes` is enabled).
+     * If not provided, it will be internally set by the PanelSplitterProvider.
+     *
+     * This prop is useful for:
+     * - Rendering the panel splitter outside of an overflow container.
+     * - Positioning the panel splitter outside the resizing panel.
+     */
+    portalRef?: MutableRefObject<HTMLDivElement | null>;
 };
 /**
  * Provides the context required for the panel splitter to work within a page layout slot.
  *
  * Should be used in the layout area components, e.g. SideNav, Aside etc, as opposed to products.
  */
-export declare const PanelSplitterProvider: ({ panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, panelRef, position, isEnabled, shortcut, children, }: PanelSplitterProviderProps) => React.JSX.Element;
+export declare const PanelSplitterProvider: ({ panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, panelRef, portalRef: providedPortalRef, position, isEnabled, shortcut, children, }: PanelSplitterProviderProps) => React.JSX.Element;

package/dist/types/ui/page-layout/side-nav/side-nav.d.ts

@@ -1,3 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag
+ */
+import React from 'react';
 import type { CommonSlotProps } from '../types';
 import { type VisibilityCallback } from './use-side-nav-visibility-callbacks';
 type SideNavProps = CommonSlotProps & {

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

@@ -35,6 +35,16 @@ export declare const UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = "calc(var(--
 export declare const localSlotLayers: {
     topBar: number;
     banner: number;
+    topNavFHSWithOpenLayer: number;
+    bannerFHS: number;
+    topNavFHS: number;
     sideNav: number;
     panelSmallViewports: number;
 };
+export declare const openLayerObserverSideNavNamespace = "side-nav";
+export declare const openLayerObserverTopNavNamespace = "top-nav";
+/**
+ * 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.
+ */
+export declare const sideNavContentScrollTimelineVar = "--sNcst";

package/dist/types-ts4.5/ui/page-layout/panel-splitter/context.d.ts

@@ -25,8 +25,13 @@ export type PanelSplitterContextType = {
     getResizeBounds: () => ResizeBounds;
     /**
      * A ref to the portal element where the panel splitter will be rendered.
-     * Internally set by the PanelSplitterProvider.
-     * Used to render the panel splitter outside of an overflow container.
+     * It can optionally be provided by consumers of <PanelSplitterProvider> (when the feature gate
+     * `platform-dst-side-nav-layering-fixes` is enabled).
+     * If not provided, it will be internally set by the PanelSplitterProvider.
+     *
+     * This prop is useful for:
+     * - Rendering the panel splitter outside of an overflow container.
+     * - Positioning the panel splitter outside the resizing panel.
      */
     portalRef: MutableRefObject<HTMLDivElement | null>;
     /**

package/dist/types-ts4.5/ui/page-layout/panel-splitter/provider.d.ts

@@ -1,12 +1,30 @@
-import React from 'react';
+import React, { type MutableRefObject } from 'react';
 import { type PanelSplitterContextType } from './context';
 export type PanelSplitterProviderProps = Omit<PanelSplitterContextType, 'portalRef' | 'position'> & {
     children: React.ReactNode;
+    /**
+     * The side of the panel/element that the splitter element is positioned on. Uses logical values to support right-to-left languages.
+     *
+     * Defaults to `start`.
+     *
+     * For left-to-right languages, `start` is the left side and `end` is the right side.
+     */
     position?: 'start' | 'end';
+    /**
+     * A ref to the portal element where the panel splitter will be rendered.
+     * It can optionally be provided by consumers of <PanelSplitterProvider> (when the feature gate
+     * `platform-dst-side-nav-layering-fixes` is enabled).
+     * If not provided, it will be internally set by the PanelSplitterProvider.
+     *
+     * This prop is useful for:
+     * - Rendering the panel splitter outside of an overflow container.
+     * - Positioning the panel splitter outside the resizing panel.
+     */
+    portalRef?: MutableRefObject<HTMLDivElement | null>;
 };
 /**
  * Provides the context required for the panel splitter to work within a page layout slot.
  *
  * Should be used in the layout area components, e.g. SideNav, Aside etc, as opposed to products.
  */
-export declare const PanelSplitterProvider: ({ panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, panelRef, position, isEnabled, shortcut, children, }: PanelSplitterProviderProps) => React.JSX.Element;
+export declare const PanelSplitterProvider: ({ panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, panelRef, portalRef: providedPortalRef, position, isEnabled, shortcut, children, }: PanelSplitterProviderProps) => React.JSX.Element;

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

@@ -1,3 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag
+ */
+import React from 'react';
 import type { CommonSlotProps } from '../types';
 import { type VisibilityCallback } from './use-side-nav-visibility-callbacks';
 type SideNavProps = CommonSlotProps & {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "5.15.0",
+	"version": "5.16.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -73,10 +73,10 @@
 		"@atlaskit/ds-lib": "^5.3.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^29.3.0",
-		"@atlaskit/layering": "^3.4.0",
+		"@atlaskit/layering": "^3.5.0",
 		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/popup": "^4.9.0",
+		"@atlaskit/popup": "^4.10.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",
@@ -188,6 +188,9 @@
 		"platform-dst-nav-app-icon-height-fix": {
 			"type": "boolean"
 		},
+		"platform-dst-side-nav-layering-fixes": {
+			"type": "boolean"
+		},
 		"platform-dst-shape-theme-default": {
 			"type": "boolean"
 		},