@atlaskit/navigation-system 5.5.1 → 5.7.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlassian/navigation-system
 
+## 5.7.0
+
+### Minor Changes
+
+- [`8b3783c70ef57`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8b3783c70ef57) -
+  Clicking on the side nav toggle button will now close any open layers such as tooltips. This
+  ensures tooltips don't linger on the screen when the buttons inside `TopNavStart` are reordered.
+
+  This change is behind the feature flag `navx-full-height-sidebar`.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.6.0
+
+### Minor Changes
+
+- [`b5802cb0960a2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b5802cb0960a2) -
+  Change how full height sidebar is enabled. Instead of a feature gate, use a context value that
+  apps can set themselves using their own feature gate or experiment.
+
 ## 5.5.1
 
 ### Patch Changes

package/dist/cjs/entry-points/fhs-rollout.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "IsFhsEnabledContext", {
+  enumerable: true,
+  get: function get() {
+    return _isFhsEnabledContext.IsFhsEnabledContext;
+  }
+});
+Object.defineProperty(exports, "IsFhsEnabledProvider", {
+  enumerable: true,
+  get: function get() {
+    return _isFhsEnabledProvider.IsFhsEnabledProvider;
+  }
+});
+Object.defineProperty(exports, "useIsFhsEnabled", {
+  enumerable: true,
+  get: function get() {
+    return _useIsFhsEnabled.useIsFhsEnabled;
+  }
+});
+var _isFhsEnabledContext = require("../ui/fhs-rollout/is-fhs-enabled-context");
+var _isFhsEnabledProvider = require("../ui/fhs-rollout/is-fhs-enabled-provider");
+var _useIsFhsEnabled = require("../ui/fhs-rollout/use-is-fhs-enabled");

package/dist/cjs/index.js

@@ -117,6 +117,18 @@ Object.defineProperty(exports, "Help", {
     return _help.Help;
   }
 });
+Object.defineProperty(exports, "IsFhsEnabledContext", {
+  enumerable: true,
+  get: function get() {
+    return _isFhsEnabledContext.IsFhsEnabledContext;
+  }
+});
+Object.defineProperty(exports, "IsFhsEnabledProvider", {
+  enumerable: true,
+  get: function get() {
+    return _isFhsEnabledProvider.IsFhsEnabledProvider;
+  }
+});
 Object.defineProperty(exports, "LinkMenuItem", {
   enumerable: true,
   get: function get() {
@@ -279,12 +291,21 @@ Object.defineProperty(exports, "useIsExpanded", {
     return _expandableMenuItemContext.useIsExpanded;
   }
 });
+Object.defineProperty(exports, "useIsFhsEnabled", {
+  enumerable: true,
+  get: function get() {
+    return _useIsFhsEnabled.useIsFhsEnabled;
+  }
+});
 Object.defineProperty(exports, "useToggleSideNav", {
   enumerable: true,
   get: function get() {
     return _useToggleSideNav.useToggleSideNav;
   }
 });
+var _isFhsEnabledContext = require("./ui/fhs-rollout/is-fhs-enabled-context");
+var _isFhsEnabledProvider = require("./ui/fhs-rollout/is-fhs-enabled-provider");
+var _useIsFhsEnabled = require("./ui/fhs-rollout/use-is-fhs-enabled");
 var _expandableMenuItem = require("./ui/menu-item/expandable-menu-item/expandable-menu-item");
 var _expandableMenuItemTrigger = require("./ui/menu-item/expandable-menu-item/expandable-menu-item-trigger");
 var _expandableMenuItemContent = require("./ui/menu-item/expandable-menu-item/expandable-menu-item-content");

package/dist/cjs/ui/fhs-rollout/is-custom-is-fhs-enabled-context.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IsCustomIsFhsEnabledContext = void 0;
+var _react = require("react");
+/**
+ * __Is custom is fhs enabled context__
+ *
+ * Tracks if a custom value has been provided for `IsFhsEnabledContext`.
+ * Used to prevent nesting of the `IsFhsEnabledProvider`.
+ */
+var IsCustomIsFhsEnabledContext = exports.IsCustomIsFhsEnabledContext = /*#__PURE__*/(0, _react.createContext)(false);

package/dist/cjs/ui/fhs-rollout/is-fhs-enabled-context.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IsFhsEnabledContext = void 0;
+var _react = require("react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+/**
+ * __Is fhs enabled context__
+ *
+ * Tracks is FHS enabled.
+ * Defaults to feature gate 'navx-full-height-sidebar'.
+ */
+var IsFhsEnabledContext = exports.IsFhsEnabledContext = /*#__PURE__*/(0, _react.createContext)(function () {
+  return (0, _platformFeatureFlags.fg)('navx-full-height-sidebar');
+});

package/dist/cjs/ui/fhs-rollout/is-fhs-enabled-provider.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IsFhsEnabledProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _isCustomIsFhsEnabledContext = require("./is-custom-is-fhs-enabled-context");
+var _isFhsEnabledContext = require("./is-fhs-enabled-context");
+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); }
+/**
+ * __Is fhs enabled provider__
+ *
+ * Used to provide a custom value for is FHS enabled.
+ */
+var IsFhsEnabledProvider = exports.IsFhsEnabledProvider = function IsFhsEnabledProvider(_ref) {
+  var children = _ref.children,
+    value = _ref.value;
+  var isCustomIsFhsEnabled = (0, _react.useContext)(_isCustomIsFhsEnabledContext.IsCustomIsFhsEnabledContext);
+  if (isCustomIsFhsEnabled) {
+    throw new Error('A custom value for IsFhsEnabledContext has already been provided');
+  }
+  return /*#__PURE__*/_react.default.createElement(_isCustomIsFhsEnabledContext.IsCustomIsFhsEnabledContext.Provider, {
+    value: true
+  }, /*#__PURE__*/_react.default.createElement(_isFhsEnabledContext.IsFhsEnabledContext.Provider, {
+    value: value
+  }, children));
+};

package/dist/cjs/ui/fhs-rollout/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/ui/fhs-rollout/use-is-fhs-enabled.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsFhsEnabled = void 0;
+var _react = require("react");
+var _isFhsEnabledContext = require("./is-fhs-enabled-context");
+/**
+ * __Use is fhs enabled__
+ *
+ * Retrieves is FHS enabled.
+ */
+var useIsFhsEnabled = exports.useIsFhsEnabled = function useIsFhsEnabled() {
+  var isFhsEnabled = (0, _react.useContext)(_isFhsEnabledContext.IsFhsEnabledContext);
+  return typeof isFhsEnabled === 'boolean' ? isFhsEnabled : isFhsEnabled();
+};

package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter.js

@@ -28,6 +28,7 @@ var _disableNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/eleme
 var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _context = require("./context");
 var _convertResizeBoundToPixels = require("./convert-resize-bound-to-pixels");
 var _getPercentageWithinPixelBounds = require("./get-percentage-within-pixel-bounds");
@@ -59,7 +60,10 @@ var MaybeTooltip = function MaybeTooltip(_ref) {
   var tooltipContent = _ref.tooltipContent,
     shortcut = _ref.shortcut,
     children = _ref.children;
-  if (tooltipContent && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+  var isFhsEnabled = (0, _platformFeatureFlags.fg)('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _useIsFhsEnabled.useIsFhsEnabled)() : (0, _platformFeatureFlags.fg)('navx-full-height-sidebar');
+  if (tooltipContent && isFhsEnabled) {
     return /*#__PURE__*/React.createElement(_tooltip.default, {
       content: tooltipContent,
       shortcut: shortcut,
@@ -93,6 +97,9 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
     position = _ref2.position,
     tooltipContent = _ref2.tooltipContent,
     shortcut = _ref2.shortcut;
+  var isFhsEnabled = (0, _platformFeatureFlags.fg)('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _useIsFhsEnabled.useIsFhsEnabled)() : (0, _platformFeatureFlags.fg)('navx-full-height-sidebar');
   var splitterRef = (0, _react.useRef)(null);
   var labelId = (0, _useId.useId)();
   // Separate state used for the input range width to remove the UI's dependency on the "persisted" layout state value being updated
@@ -309,7 +316,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
     ref: splitterRef,
     "data-testid": testId,
     onDoubleClick: onDoubleClick,
-    className: (0, _runtime.ax)([grabAreaStyles.root, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && grabAreaStyles.fullHeightSidebar])
+    className: (0, _runtime.ax)([grabAreaStyles.root, isFhsEnabled && grabAreaStyles.fullHeightSidebar])
   }, /*#__PURE__*/React.createElement(_visuallyHidden.default, null, /*#__PURE__*/React.createElement("input", {
     type: "range",
     value: rangeInputValue,

package/dist/cjs/ui/page-layout/side-nav/side-nav-content.js

@@ -12,6 +12,7 @@ var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 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); }
 /**
  * The main content of the side nav, filling up the middle section. It acts as a scroll container.
@@ -44,14 +45,17 @@ var fullHeightSidebarStyles = {
 function _SideNavContent(_ref, forwardedRef) {
   var children = _ref.children,
     testId = _ref.testId;
+  var isFhsEnabled = (0, _platformFeatureFlags.fg)('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _useIsFhsEnabled.useIsFhsEnabled)() : (0, _platformFeatureFlags.fg)('navx-full-height-sidebar');
   var internalRef = (0, _react.useRef)(null);
   var mergedRef = (0, _react.useMemo)(function () {
     return (0, _mergeRefs.default)([internalRef, forwardedRef]);
   }, [forwardedRef]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    ref: (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') ? mergedRef : forwardedRef,
+    ref: isFhsEnabled ? mergedRef : forwardedRef,
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.scrollContainer, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && fullHeightSidebarStyles.scrollContainer])
+    className: (0, _runtime.ax)([styles.scrollContainer, isFhsEnabled && fullHeightSidebarStyles.scrollContainer])
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)([styles.paddingContainer])
   }, children));

package/dist/cjs/ui/page-layout/side-nav/side-nav.js

@@ -26,6 +26,7 @@ var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _skipLinksContext = require("../../../context/skip-links/skip-links-context");
 var _topNavStartContext = require("../../../context/top-nav-start/top-nav-start-context");
+var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _constants = require("../constants");
 var _hoistSlotSizesContext = require("../hoist-slot-sizes-context");
 var _hoistUtils = require("../hoist-utils");
@@ -106,6 +107,9 @@ function SideNavInternal(_ref) {
     onPeekEnd = _ref.onPeekEnd,
     providedId = _ref.id,
     canToggleWithShortcut = _ref.canToggleWithShortcut;
+  var isFhsEnabled = (0, _platformFeatureFlags.fg)('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _useIsFhsEnabled.useIsFhsEnabled)() : (0, _platformFeatureFlags.fg)('navx-full-height-sidebar');
   var id = (0, _idUtils.useLayoutId)({
     providedId: providedId
   });
@@ -310,9 +314,9 @@ function SideNavInternal(_ref) {
       }
       if (action === 'ready-to-close') {
         // If there are no open layers, we can close the flyout.
-        if (openLayerObserver.getCount({
+        if ((openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.getCount({
           namespace: openLayerObserverSideNavNamespace
-        }) === 0) {
+        })) === 0) {
           close();
           return;
         }
@@ -668,7 +672,7 @@ function SideNavInternal(_ref) {
     // Close the flyout if there are no more layers open and the user is not mousing over the
     // flyout areas (side nav, TopNavStart element)
 
-    return openLayerObserver.onChange(function (_ref6) {
+    return openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.onChange(function (_ref6) {
       var count = _ref6.count;
       if (flyoutStateRef.current.type === 'ready-to-close' && count === 0) {
         updateFlyoutState('force-close');
@@ -714,13 +718,13 @@ function SideNavInternal(_ref) {
   // Otherwise, the `@starting-style` rule will cause the sidebar to slide in initially.
   var isFirstRenderRef = (0, _react.useRef)(true);
   (0, _react.useEffect)(function () {
-    if (!(0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+    if (!isFhsEnabled) {
       return;
     }
     if (isFirstRenderRef.current) {
       isFirstRenderRef.current = false;
     }
-  }, []);
+  }, [isFhsEnabled]);
 
   // This is only used for the regular expand and collapse animations, not the flyout animations.
   var shouldShowSidebarToggleAnimation =
@@ -754,7 +758,7 @@ function SideNavInternal(_ref) {
     style: (0, _defineProperty2.default)({}, _constants.sideNavVar, clampedWidth),
     ref: mergedRef,
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !(0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !(0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, isFlyoutClosed && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebar])
+    className: (0, _runtime.ax)([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && isFhsEnabled && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && isFhsEnabled && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && isFhsEnabled && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isFhsEnabled && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isFhsEnabled && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar, isFlyoutClosed && isFhsEnabled && styles.fullHeightSidebar])
   }), /*#__PURE__*/React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.sideNavLiveWidthVar,
     value: "0px",

package/dist/cjs/ui/page-layout/side-nav/toggle-button.js

@@ -16,7 +16,9 @@ var _bindEventListener = require("bind-event-listener");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _sidebarCollapse = _interopRequireDefault(require("@atlaskit/icon/core/sidebar-collapse"));
 var _sidebarExpand = _interopRequireDefault(require("@atlaskit/icon/core/sidebar-expand"));
+var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _migration = require("../../top-nav-items/themed/migration");
 var _isSideNavShortcutEnabledContext = require("./is-side-nav-shortcut-enabled-context");
 var _sideNavToggleTooltipKeyboardShortcut = require("./side-nav-toggle-tooltip-keyboard-shortcut");
@@ -49,6 +51,9 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
     testId = _ref.testId,
     interactionName = _ref.interactionName,
     onClick = _ref.onClick;
+  var isFhsEnabled = (0, _platformFeatureFlags.fg)('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _useIsFhsEnabled.useIsFhsEnabled)() : (0, _platformFeatureFlags.fg)('navx-full-height-sidebar');
   var _useSideNavVisibility = (0, _useSideNavVisibility2.useSideNavVisibility)({
       defaultCollapsed: defaultCollapsed
     }),
@@ -108,12 +113,16 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
   });
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var openLayerObserver = (0, _openLayerObserver.useOpenLayerObserver)();
   var handleClick = (0, _react.useCallback)(function (event, analyticsEvent) {
     onClick === null || onClick === void 0 || onClick(event, analyticsEvent, {
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-  }, [onClick, isSideNavExpanded, toggleVisibility]);
+    if ((0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+      openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
+    }
+  }, [onClick, isSideNavExpanded, toggleVisibility, openLayerObserver]);
   var handlePointerEnter = (0, _react.useCallback)(function () {
     if (!(0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_instrumentation_1')) {
       return;
@@ -158,13 +167,13 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
   };
   var isShortcutEnabled = (0, _isSideNavShortcutEnabledContext.useIsSideNavShortcutEnabled)();
   var tooltipProps = (0, _react.useMemo)(function () {
-    if ((0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+    if (isFhsEnabled) {
       return _objectSpread(_objectSpread({}, toggleButtonTooltipOptions), {}, {
         shortcut: isShortcutEnabled ? _sideNavToggleTooltipKeyboardShortcut.sideNavToggleTooltipKeyboardShortcut : undefined
       });
     }
     return toggleButtonTooltipOptions;
-  }, [isShortcutEnabled]);
+  }, [isFhsEnabled, isShortcutEnabled]);
   return /*#__PURE__*/_react.default.createElement(_migration.IconButton, {
     appearance: "subtle",
     label: isSideNavExpanded ? collapseLabel : expandLabel,

package/dist/cjs/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js

@@ -10,6 +10,7 @@ var _bindEventListener = require("bind-event-listener");
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _isSideNavShortcutEnabledContext = require("./is-side-nav-shortcut-enabled-context");
 var _useToggleSideNav = require("./use-toggle-side-nav");
 /**
@@ -17,6 +18,9 @@ var _useToggleSideNav = require("./use-toggle-side-nav");
  */
 function useSideNavToggleKeyboardShortcut(_ref) {
   var canToggleWithShortcut = _ref.canToggleWithShortcut;
+  var isFhsEnabled = (0, _platformFeatureFlags.fg)('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _useIsFhsEnabled.useIsFhsEnabled)() : (0, _platformFeatureFlags.fg)('navx-full-height-sidebar');
   var openLayerObserver = (0, _openLayerObserver.useOpenLayerObserver)();
   var toggleVisibilityByShortcut = (0, _useToggleSideNav.useToggleSideNav)({
     trigger: 'keyboard'
@@ -24,7 +28,7 @@ function useSideNavToggleKeyboardShortcut(_ref) {
   var canToggleWithShortcutStableRef = (0, _useStableRef.default)(canToggleWithShortcut);
   var isSideNavShortcutEnabled = (0, _isSideNavShortcutEnabledContext.useIsSideNavShortcutEnabled)();
   (0, _react.useEffect)(function () {
-    if (!(0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+    if (!isFhsEnabled) {
       return;
     }
     if (!isSideNavShortcutEnabled) {
@@ -43,7 +47,7 @@ function useSideNavToggleKeyboardShortcut(_ref) {
             // Ignore repeated keydown events from holding down the keys
             return;
           }
-          if (openLayerObserver.getCount({
+          if (openLayerObserver && openLayerObserver.getCount({
             type: 'modal'
           }) > 0) {
             // Return early if there are any open modals
@@ -53,5 +57,5 @@ function useSideNavToggleKeyboardShortcut(_ref) {
         }
       }
     });
-  }, [canToggleWithShortcutStableRef, openLayerObserver, toggleVisibilityByShortcut, isSideNavShortcutEnabled]);
+  }, [canToggleWithShortcutStableRef, isFhsEnabled, isSideNavShortcutEnabled, openLayerObserver, toggleVisibilityByShortcut]);
 }

package/dist/cjs/ui/page-layout/top-nav/top-nav-end.js

@@ -19,6 +19,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _list = require("../../../components/list");
+var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _hasCustomThemeContext = require("../../top-nav-items/themed/has-custom-theme-context");
 var _migration = require("../../top-nav-items/themed/migration");
 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); }
@@ -47,6 +48,9 @@ function TopNavEnd(_ref) {
     label = _ref$label === void 0 ? 'Actions' : _ref$label,
     _ref$showMoreButtonLa = _ref.showMoreButtonLabel,
     showMoreButtonLabel = _ref$showMoreButtonLa === void 0 ? 'Show more' : _ref$showMoreButtonLa;
+  var isFhsEnabled = (0, _platformFeatureFlags.fg)('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _useIsFhsEnabled.useIsFhsEnabled)() : (0, _platformFeatureFlags.fg)('navx-full-height-sidebar');
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOpen = _useState2[0],
@@ -71,7 +75,7 @@ function TopNavEnd(_ref) {
   }, [query]);
   return /*#__PURE__*/_react.default.createElement("nav", {
     "aria-label": label,
-    className: (0, _runtime.ax)([containerStyles.root, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && containerStyles.fullHeightSidebar, (0, _platformFeatureFlags.fg)('team25-eu-jira-logo-updates-csm-jsm') && containerStyles.jiraProductLogoUpdate])
+    className: (0, _runtime.ax)([containerStyles.root, isFhsEnabled && containerStyles.fullHeightSidebar, (0, _platformFeatureFlags.fg)('team25-eu-jira-logo-updates-csm-jsm') && containerStyles.jiraProductLogoUpdate])
   }, isMobile ? /*#__PURE__*/_react.default.createElement(_popup.default, {
     isOpen: isOpen,
     onClose: function onClose() {

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

@@ -10,6 +10,7 @@ require("./top-nav-middle.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var styles = {
   root: "_zulpu2gc _yyhycs5v _1bsb1osq _4cvr1h6o _1e0c1txw _1bahh9n0 _181n11p5 _1j8b15b0 _lagd1bp4 _1t4c1ris _12e8h9n0",
   fullHeightSidebar: "_lcxv1wug"
@@ -25,7 +26,10 @@ var styles = {
  */
 function TopNavMiddle(_ref) {
   var children = _ref.children;
+  var isFhsEnabled = (0, _platformFeatureFlags.fg)('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _useIsFhsEnabled.useIsFhsEnabled)() : (0, _platformFeatureFlags.fg)('navx-full-height-sidebar');
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebar])
+    className: (0, _runtime.ax)([styles.root, isFhsEnabled && styles.fullHeightSidebar])
   }, children);
 }

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

@@ -15,6 +15,7 @@ var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _topNavStartContext = require("../../../context/top-nav-start/top-nav-start-context");
+var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _useSideNavVisibility3 = require("../side-nav/use-side-nav-visibility");
 var _visibilityContext = require("../side-nav/visibility-context");
 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); }
@@ -33,7 +34,7 @@ var flexGap = "var(--ds-space-050, 4px)";
 /**
  * Styles for the TopNavStart element.
  *
- * When `navx-full-height-sidebar` is enabled this is the styling for the inner element,
+ * When `useIsFhsEnabled` is true this is the styling for the inner element,
  * which re-enables pointer events.
  */
 var innerStyles = {
@@ -47,7 +48,7 @@ var innerStyles = {
  * Styles for the outer element, that does not have re-enabled pointer events and spans the entire
  * width of the TopNavStart area.
  *
- * This wrapper element is only rendered when `navx-full-height-sidebar` is enabled.
+ * This wrapper element is only rendered when `useIsFhsEnabled` is true.
  */
 var wrapperStyles = {
   root: "_vchhusvi _bozgutpp _4t3i1osq",
@@ -137,6 +138,9 @@ function TopNavStart(_ref3) {
   var children = _ref3.children,
     testId = _ref3.testId,
     sideNavToggleButton = _ref3.sideNavToggleButton;
+  var isFhsEnabled = (0, _platformFeatureFlags.fg)('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _useIsFhsEnabled.useIsFhsEnabled)() : (0, _platformFeatureFlags.fg)('navx-full-height-sidebar');
   var ref = (0, _react.useContext)(_topNavStartContext.TopNavStartAttachRef);
   var elementRef = (0, _react.useRef)(null);
 
@@ -183,7 +187,7 @@ function TopNavStart(_ref3) {
   var isFirstRenderRef = (0, _react.useRef)(true);
   var sideNavState = (0, _react.useContext)(_visibilityContext.SideNavVisibilityState);
   (0, _react.useEffect)(function () {
-    if (!(0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+    if (!isFhsEnabled) {
       return;
     }
 
@@ -196,13 +200,13 @@ function TopNavStart(_ref3) {
     if (isFirstRenderRef.current) {
       isFirstRenderRef.current = false;
     }
-  }, [sideNavState]);
+  }, [isFhsEnabled, sideNavState]);
 
   // Using a stable ref to avoid re-running the animation layout effect when the toggle button prop value changes, which
   // can happen a lot (e.g. if the parent re-renders)
   var sideNavToggleButtonStableRef = (0, _useStableRef.default)(sideNavToggleButton);
   (0, _react.useLayoutEffect)(function () {
-    if (!(0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+    if (!isFhsEnabled) {
       return;
     }
 
@@ -239,19 +243,19 @@ function TopNavStart(_ref3) {
     });
 
     // This layout effect is called when the sidebar's desktop expansion state changes.
-  }, [isExpandedOnDesktop, sideNavToggleButtonStableRef]);
-  var TopNavStartInner = (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') ? TopNavStartInnerFHS : TopNavStartInnerOld;
+  }, [isExpandedOnDesktop, isFhsEnabled, sideNavToggleButtonStableRef]);
+  var TopNavStartInner = isFhsEnabled ? TopNavStartInnerFHS : TopNavStartInnerOld;
   return /*#__PURE__*/_react.default.createElement(TopNavStartInner, {
     ref: elementRef,
     testId: testId
-  }, !(0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && sideNavToggleButton, sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/_react.default.createElement("div", {
+  }, !isFhsEnabled && sideNavToggleButton, sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && isFhsEnabled && /*#__PURE__*/_react.default.createElement("div", {
     key: sideNavToggleButtonKey,
     className: (0, _runtime.ax)([!isFirefox && toggleButtonWrapperStyles.root, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox &&
     // Timing function is applied when the browser animates to the idle position.
     animationState.type === 'idle' && toggleButtonWrapperStyles.collapseAnimationTimingFunction, !isFirefox && animationState.type === 'collapse' && toggleButtonWrapperStyles.collapseAnimationStartPosition])
-  }, sideNavToggleButton), (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') ? /*#__PURE__*/_react.default.createElement("div", {
+  }, sideNavToggleButton), isFhsEnabled ? /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)([childrenWrapperStyles.root, !isFirefox && childrenWrapperStyles.animationBaseStyles, !isFirefox && animationState.type === 'idle' && childrenWrapperStyles.finalPosition, !isFirefox && animationState.type === 'expand' && childrenWrapperStyles.expandAnimationStartPosition, !isFirefox && animationState.type === 'collapse' && childrenWrapperStyles.collapseAnimationStartPosition])
-  }, children) : children, sideNavToggleButton && isDesktop && isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/_react.default.createElement("div", {
+  }, children) : children, sideNavToggleButton && isDesktop && isExpandedOnDesktop && isFhsEnabled && /*#__PURE__*/_react.default.createElement("div", {
     key: sideNavToggleButtonKey,
     className: (0, _runtime.ax)([!isFirefox && toggleButtonWrapperStyles.root, toggleButtonWrapperStyles.alignEnd, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox &&
     // Timing function is applied when the browser animates to the idle position.

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

@@ -14,6 +14,7 @@ var _runtime = require("@compiled/react/runtime");
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _skipLinksContext = require("../../../context/skip-links/skip-links-context");
+var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _hasCustomThemeContext = require("../../top-nav-items/themed/has-custom-theme-context");
 var _useCustomTheme = require("../../top-nav-items/themed/use-custom-theme");
 var _constants = require("../constants");
@@ -60,6 +61,9 @@ function TopNav(_ref) {
     testId = _ref.testId,
     providedId = _ref.id,
     UNSAFE_theme = _ref.UNSAFE_theme;
+  var isFhsEnabled = (0, _platformFeatureFlags.fg)('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _useIsFhsEnabled.useIsFhsEnabled)() : (0, _platformFeatureFlags.fg)('navx-full-height-sidebar');
   var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
   var id = (0, _idUtils.useLayoutId)({
     providedId: providedId
@@ -97,21 +101,21 @@ function TopNav(_ref) {
     isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
   return /*#__PURE__*/React.createElement(_hasCustomThemeContext.HasCustomThemeContext.Provider, {
     value: customTheme.isEnabled
-  }, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/React.createElement("div", {
+  }, isFhsEnabled && /*#__PURE__*/React.createElement("div", {
     "data-layout-slot": true,
     "aria-hidden": true
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
-    style: (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') ? backgroundStyle : undefined,
+    style: isFhsEnabled ? backgroundStyle : undefined,
     className: (0, _runtime.ax)([backgroundStyles.root, isExpandedOnDesktop && backgroundStyles.sideNavExpanded])
   }), /*#__PURE__*/React.createElement("header", {
     id: id,
     "data-layout-slot": true,
-    className: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebar, isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebarExpanded, xcss]),
+    className: (0, _runtime.ax)([styles.root, isFhsEnabled && styles.fullHeightSidebar, isExpandedOnDesktop && isFhsEnabled && styles.fullHeightSidebarExpanded, xcss]),
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
-    style: (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') ? foregroundStyle : customTheme.isEnabled ? customTheme.style : undefined
+    style: isFhsEnabled ? foregroundStyle : customTheme.isEnabled ? customTheme.style : undefined
   }, /*#__PURE__*/React.createElement(_hoistUtils.HoistCssVarToLocalGrid, {
     variableName: _constants.topNavMountedVar,
     value: height