@atlaskit/navigation-system 5.5.1 → 5.7.0

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

@@ -14,6 +14,7 @@ var _react2 = require("@compiled/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _hasCustomThemeContext = require("../themed/has-custom-theme-context");
 var _logoRenderer = require("./logo-renderer");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -53,6 +54,9 @@ var AppLogo = exports.AppLogo = function AppLogo(_ref) {
     href = _ref.href,
     icon = _ref.icon,
     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 ref = (0, _react.useRef)(null);
   var nameRef = (0, _react.useRef)(null);
   var hasCustomTheme = (0, _hasCustomThemeContext.useHasCustomTheme)();
@@ -71,14 +75,14 @@ var AppLogo = exports.AppLogo = function AppLogo(_ref) {
     // @ts-expect-error - non-standard values for `borderRadius` and the custom theming interaction states
     // eslint-disable-next-line @compiled/no-suppress-xcss
     ,
-    xcss: (0, _react2.cx)(anchorStyles.root, hasCustomTheme ? anchorStyles.interactionStatesCustomTheming : anchorStyles.interactionStates, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && anchorStyles.fullHeightSidebar),
+    xcss: (0, _react2.cx)(anchorStyles.root, hasCustomTheme ? anchorStyles.interactionStatesCustomTheming : anchorStyles.interactionStates, isFhsEnabled && anchorStyles.fullHeightSidebar),
     onClick: onClick
   }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
     space: "space.075",
     alignBlock: "center",
-    xcss: (0, _react2.cx)(logoWrapperStyles.root, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && logoWrapperStyles.fullHeightSidebar)
+    xcss: (0, _react2.cx)(logoWrapperStyles.root, isFhsEnabled && logoWrapperStyles.fullHeightSidebar)
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)([iconContainerStyles.root, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && iconContainerStyles.fullHeightSidebar])
+    className: (0, _runtime.ax)([iconContainerStyles.root, isFhsEnabled && iconContainerStyles.fullHeightSidebar])
   }, /*#__PURE__*/_react.default.createElement(_logoRenderer.LogoRenderer
   // Top nav always uses the new logo design
   , {

package/dist/cjs/ui/top-nav-items/search.js

@@ -14,6 +14,7 @@ var _css = require("@atlaskit/css");
 var _search = _interopRequireDefault(require("@atlaskit/icon/core/search"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _useIsFhsEnabled = require("../fhs-rollout/use-is-fhs-enabled");
 var _migration = require("./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); }
 var styles = {
@@ -37,6 +38,9 @@ var Search = exports.Search = function Search(_ref) {
     elemAfter = _ref.elemAfter,
     interactionName = _ref.interactionName,
     ariaHaspopup = _ref['aria-haspopup'];
+  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(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
     style: {
       // To win the specificity war against Emotion we move this into inline styles
@@ -46,7 +50,7 @@ var Search = exports.Search = function Search(_ref) {
       border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-input, #8C8F97)")
     },
     onClick: onClick,
-    xcss: (0, _css.cx)(styles.root, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebar),
+    xcss: (0, _css.cx)(styles.root, isFhsEnabled && styles.fullHeightSidebar),
     interactionName: interactionName,
     "aria-haspopup": ariaHaspopup
   }, /*#__PURE__*/_react.default.createElement("span", {

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

@@ -0,0 +1,3 @@
+export { IsFhsEnabledContext } from '../ui/fhs-rollout/is-fhs-enabled-context';
+export { IsFhsEnabledProvider } from '../ui/fhs-rollout/is-fhs-enabled-provider';
+export { useIsFhsEnabled } from '../ui/fhs-rollout/use-is-fhs-enabled';

package/dist/es2019/index.js

@@ -1,3 +1,6 @@
+export { IsFhsEnabledContext } from './ui/fhs-rollout/is-fhs-enabled-context';
+export { IsFhsEnabledProvider } from './ui/fhs-rollout/is-fhs-enabled-provider';
+export { useIsFhsEnabled } from './ui/fhs-rollout/use-is-fhs-enabled';
 export { ExpandableMenuItem } from './ui/menu-item/expandable-menu-item/expandable-menu-item';
 export { ExpandableMenuItemTrigger } from './ui/menu-item/expandable-menu-item/expandable-menu-item-trigger';
 export { ExpandableMenuItemContent } from './ui/menu-item/expandable-menu-item/expandable-menu-item-content';

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

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+/**
+ * __Is custom is fhs enabled context__
+ *
+ * Tracks if a custom value has been provided for `IsFhsEnabledContext`.
+ * Used to prevent nesting of the `IsFhsEnabledProvider`.
+ */
+export const IsCustomIsFhsEnabledContext = /*#__PURE__*/createContext(false);

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

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+/**
+ * __Is fhs enabled context__
+ *
+ * Tracks is FHS enabled.
+ * Defaults to feature gate 'navx-full-height-sidebar'.
+ */
+export const IsFhsEnabledContext = /*#__PURE__*/createContext(() => fg('navx-full-height-sidebar'));

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

@@ -0,0 +1,23 @@
+import React, { useContext } from 'react';
+import { IsCustomIsFhsEnabledContext } from './is-custom-is-fhs-enabled-context';
+import { IsFhsEnabledContext } from './is-fhs-enabled-context';
+
+/**
+ * __Is fhs enabled provider__
+ *
+ * Used to provide a custom value for is FHS enabled.
+ */
+export const IsFhsEnabledProvider = ({
+  children,
+  value
+}) => {
+  const isCustomIsFhsEnabled = useContext(IsCustomIsFhsEnabledContext);
+  if (isCustomIsFhsEnabled) {
+    throw new Error('A custom value for IsFhsEnabledContext has already been provided');
+  }
+  return /*#__PURE__*/React.createElement(IsCustomIsFhsEnabledContext.Provider, {
+    value: true
+  }, /*#__PURE__*/React.createElement(IsFhsEnabledContext.Provider, {
+    value: value
+  }, children));
+};

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

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { IsFhsEnabledContext } from './is-fhs-enabled-context';
+
+/**
+ * __Use is fhs enabled__
+ *
+ * Retrieves is FHS enabled.
+ */
+export const useIsFhsEnabled = () => {
+  const isFhsEnabled = useContext(IsFhsEnabledContext);
+  return typeof isFhsEnabled === 'boolean' ? isFhsEnabled : isFhsEnabled();
+};

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

@@ -17,6 +17,7 @@ import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/elem
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
 import Tooltip from '@atlaskit/tooltip';
 import VisuallyHidden from '@atlaskit/visually-hidden';
+import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { OnDoubleClickContext, PanelSplitterContext } from './context';
 import { convertResizeBoundToPixels } from './convert-resize-bound-to-pixels';
 import { getPercentageWithinPixelBounds } from './get-percentage-within-pixel-bounds';
@@ -49,7 +50,10 @@ const MaybeTooltip = ({
   shortcut,
   children
 }) => {
-  if (tooltipContent && fg('navx-full-height-sidebar')) {
+  const isFhsEnabled = fg('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIsFhsEnabled() : fg('navx-full-height-sidebar');
+  if (tooltipContent && isFhsEnabled) {
     return /*#__PURE__*/React.createElement(Tooltip, {
       content: tooltipContent,
       shortcut: shortcut,
@@ -85,6 +89,9 @@ const PortaledPanelSplitter = ({
   tooltipContent,
   shortcut
 }) => {
+  const isFhsEnabled = fg('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIsFhsEnabled() : fg('navx-full-height-sidebar');
   const splitterRef = useRef(null);
   const labelId = useId();
   // Separate state used for the input range width to remove the UI's dependency on the "persisted" layout state value being updated
@@ -288,7 +295,7 @@ const PortaledPanelSplitter = ({
     ref: splitterRef,
     "data-testid": testId,
     onDoubleClick: onDoubleClick,
-    className: ax([grabAreaStyles.root, fg('navx-full-height-sidebar') && grabAreaStyles.fullHeightSidebar])
+    className: ax([grabAreaStyles.root, isFhsEnabled && grabAreaStyles.fullHeightSidebar])
   }, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", {
     type: "range",
     value: rangeInputValue,

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

@@ -4,6 +4,8 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useMemo, useRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
+
 /**
  * The main content of the side nav, filling up the middle section. It acts as a scroll container.
  *
@@ -36,12 +38,15 @@ function _SideNavContent({
   children,
   testId
 }, forwardedRef) {
+  const isFhsEnabled = fg('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIsFhsEnabled() : fg('navx-full-height-sidebar');
   const internalRef = useRef(null);
   const mergedRef = useMemo(() => mergeRefs([internalRef, forwardedRef]), [forwardedRef]);
   return /*#__PURE__*/React.createElement("div", {
-    ref: fg('navx-full-height-sidebar') ? mergedRef : forwardedRef,
+    ref: isFhsEnabled ? mergedRef : forwardedRef,
     "data-testid": testId,
-    className: ax([styles.scrollContainer, fg('navx-full-height-sidebar') && fullHeightSidebarStyles.scrollContainer])
+    className: ax([styles.scrollContainer, isFhsEnabled && fullHeightSidebarStyles.scrollContainer])
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([styles.paddingContainer])
   }, children));

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

@@ -15,6 +15,7 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/ad
 import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../../context/skip-links/skip-links-context';
 import { TopNavStartElement } from '../../../context/top-nav-start/top-nav-start-context';
+import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { bannerMountedVar, contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar, topNavMountedVar, UNSAFE_sideNavLayoutVar } from '../constants';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
 import { DangerouslyHoistCssVarToDocumentRoot } from '../hoist-utils';
@@ -90,6 +91,9 @@ function SideNavInternal({
   canToggleWithShortcut
 }) {
   var _sideNavState$lastTri;
+  const isFhsEnabled = fg('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIsFhsEnabled() : fg('navx-full-height-sidebar');
   const id = useLayoutId({
     providedId
   });
@@ -291,9 +295,9 @@ function SideNavInternal({
       }
       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;
         }
@@ -654,7 +658,7 @@ function SideNavInternal({
     // 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(({
+    return openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.onChange(({
       count
     }) => {
       if (flyoutStateRef.current.type === 'ready-to-close' && count === 0) {
@@ -701,13 +705,13 @@ function SideNavInternal({
   // Otherwise, the `@starting-style` rule will cause the sidebar to slide in initially.
   const isFirstRenderRef = useRef(true);
   useEffect(() => {
-    if (!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.
   const shouldShowSidebarToggleAnimation =
@@ -744,7 +748,7 @@ function SideNavInternal({
     },
     ref: mergedRef,
     "data-testid": testId,
-    className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, fg('navx-full-height-sidebar') && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !fg('navx-full-height-sidebar') && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !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 && fg('navx-full-height-sidebar') && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, isFlyoutClosed && fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
+    className: 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(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",

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

@@ -6,7 +6,9 @@ import { bind } from 'bind-event-listener';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
+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';
 import { IconButton } from '../../top-nav-items/themed/migration';
 import { useIsSideNavShortcutEnabled } from './is-side-nav-shortcut-enabled-context';
 import { sideNavToggleTooltipKeyboardShortcut } from './side-nav-toggle-tooltip-keyboard-shortcut';
@@ -36,6 +38,9 @@ export const SideNavToggleButton = ({
   interactionName,
   onClick
 }) => {
+  const isFhsEnabled = fg('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIsFhsEnabled() : fg('navx-full-height-sidebar');
   const {
     isExpandedOnDesktop: isSideNavExpandedOnDesktop,
     isExpandedOnMobile: isSideNavExpandedOnMobile
@@ -92,12 +97,16 @@ export const SideNavToggleButton = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
+  const openLayerObserver = useOpenLayerObserver();
   const handleClick = useCallback((event, analyticsEvent) => {
     onClick === null || onClick === void 0 ? void 0 : onClick(event, analyticsEvent, {
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-  }, [onClick, isSideNavExpanded, toggleVisibility]);
+    if (fg('navx-full-height-sidebar')) {
+      openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.closeLayers();
+    }
+  }, [onClick, isSideNavExpanded, toggleVisibility, openLayerObserver]);
   const handlePointerEnter = useCallback(() => {
     if (!fg('platform_dst_nav4_fhs_instrumentation_1')) {
       return;
@@ -140,14 +149,14 @@ export const SideNavToggleButton = ({
   }, isSideNavExpanded ? /*#__PURE__*/React.createElement(SidebarCollapseIcon, props) : /*#__PURE__*/React.createElement(SidebarExpandIcon, props));
   const isShortcutEnabled = useIsSideNavShortcutEnabled();
   const tooltipProps = useMemo(() => {
-    if (fg('navx-full-height-sidebar')) {
+    if (isFhsEnabled) {
       return {
         ...toggleButtonTooltipOptions,
         shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined
       };
     }
     return toggleButtonTooltipOptions;
-  }, [isShortcutEnabled]);
+  }, [isFhsEnabled, isShortcutEnabled]);
   return /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     label: isSideNavExpanded ? collapseLabel : expandLabel,

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

@@ -3,6 +3,7 @@ import { bind } from 'bind-event-listener';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 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';
 import { useIsSideNavShortcutEnabled } from './is-side-nav-shortcut-enabled-context';
 import { useToggleSideNav } from './use-toggle-side-nav';
 
@@ -12,6 +13,9 @@ import { useToggleSideNav } from './use-toggle-side-nav';
 export function useSideNavToggleKeyboardShortcut({
   canToggleWithShortcut
 }) {
+  const isFhsEnabled = fg('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIsFhsEnabled() : fg('navx-full-height-sidebar');
   const openLayerObserver = useOpenLayerObserver();
   const toggleVisibilityByShortcut = useToggleSideNav({
     trigger: 'keyboard'
@@ -19,7 +23,7 @@ export function useSideNavToggleKeyboardShortcut({
   const canToggleWithShortcutStableRef = useStableRef(canToggleWithShortcut);
   const isSideNavShortcutEnabled = useIsSideNavShortcutEnabled();
   useEffect(() => {
-    if (!fg('navx-full-height-sidebar')) {
+    if (!isFhsEnabled) {
       return;
     }
     if (!isSideNavShortcutEnabled) {
@@ -38,7 +42,7 @@ export function useSideNavToggleKeyboardShortcut({
             // 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
@@ -48,5 +52,5 @@ export function useSideNavToggleKeyboardShortcut({
         }
       }
     });
-  }, [canToggleWithShortcutStableRef, openLayerObserver, toggleVisibilityByShortcut, isSideNavShortcutEnabled]);
+  }, [canToggleWithShortcutStableRef, isFhsEnabled, isSideNavShortcutEnabled, openLayerObserver, toggleVisibilityByShortcut]);
 }

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

@@ -10,6 +10,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
 import { List } from '../../../components/list';
+import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
 import { IconButton } from '../../top-nav-items/themed/migration';
 const containerStyles = {
@@ -36,6 +37,9 @@ export function TopNavEnd({
   label = 'Actions',
   showMoreButtonLabel = 'Show more'
 }) {
+  const isFhsEnabled = fg('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIsFhsEnabled() : fg('navx-full-height-sidebar');
   const [isOpen, setIsOpen] = useState(false);
   // Always setting to `false` for the initial render (will flip in an effect for mobile)
   const [isMobile, setIsMobile] = useState(false);
@@ -54,7 +58,7 @@ export function TopNavEnd({
   }, [query]);
   return /*#__PURE__*/React.createElement("nav", {
     "aria-label": label,
-    className: ax([containerStyles.root, fg('navx-full-height-sidebar') && containerStyles.fullHeightSidebar, fg('team25-eu-jira-logo-updates-csm-jsm') && containerStyles.jiraProductLogoUpdate])
+    className: ax([containerStyles.root, isFhsEnabled && containerStyles.fullHeightSidebar, fg('team25-eu-jira-logo-updates-csm-jsm') && containerStyles.jiraProductLogoUpdate])
   }, isMobile ? /*#__PURE__*/React.createElement(Popup, {
     isOpen: isOpen,
     onClose: () => setIsOpen(false),

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

@@ -3,6 +3,7 @@ import "./top-nav-middle.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 const styles = {
   root: "_zulpu2gc _yyhycs5v _1bsb1osq _4cvr1h6o _1e0c1txw _1bahh9n0 _181n11p5 _1j8b15b0 _lagd1bp4 _1t4c1ris _12e8h9n0",
   fullHeightSidebar: "_lcxv1wug"
@@ -19,7 +20,10 @@ const styles = {
 export function TopNavMiddle({
   children
 }) {
+  const isFhsEnabled = fg('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIsFhsEnabled() : fg('navx-full-height-sidebar');
   return /*#__PURE__*/React.createElement("div", {
-    className: ax([styles.root, fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
+    className: ax([styles.root, isFhsEnabled && styles.fullHeightSidebar])
   }, children);
 }

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

@@ -6,6 +6,7 @@ import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 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 { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 import { SideNavVisibilityState } from '../side-nav/visibility-context';
 
@@ -24,7 +25,7 @@ const 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.
  */
 const innerStyles = {
@@ -38,7 +39,7 @@ const 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.
  */
 const wrapperStyles = {
   root: "_vchhusvi _bozgutpp _4t3i1osq",
@@ -132,6 +133,9 @@ export function TopNavStart({
   testId,
   sideNavToggleButton
 }) {
+  const isFhsEnabled = fg('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIsFhsEnabled() : fg('navx-full-height-sidebar');
   const ref = useContext(TopNavStartAttachRef);
   const elementRef = useRef(null);
 
@@ -173,7 +177,7 @@ export function TopNavStart({
   const isFirstRenderRef = useRef(true);
   const sideNavState = useContext(SideNavVisibilityState);
   useEffect(() => {
-    if (!fg('navx-full-height-sidebar')) {
+    if (!isFhsEnabled) {
       return;
     }
 
@@ -186,13 +190,13 @@ export function TopNavStart({
     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)
   const sideNavToggleButtonStableRef = useStableRef(sideNavToggleButton);
   useLayoutEffect(() => {
-    if (!fg('navx-full-height-sidebar')) {
+    if (!isFhsEnabled) {
       return;
     }
 
@@ -229,19 +233,19 @@ export function TopNavStart({
     });
 
     // This layout effect is called when the sidebar's desktop expansion state changes.
-  }, [isExpandedOnDesktop, sideNavToggleButtonStableRef]);
-  const TopNavStartInner = fg('navx-full-height-sidebar') ? TopNavStartInnerFHS : TopNavStartInnerOld;
+  }, [isExpandedOnDesktop, isFhsEnabled, sideNavToggleButtonStableRef]);
+  const TopNavStartInner = isFhsEnabled ? TopNavStartInnerFHS : TopNavStartInnerOld;
   return /*#__PURE__*/React.createElement(TopNavStartInner, {
     ref: elementRef,
     testId: testId
-  }, !fg('navx-full-height-sidebar') && sideNavToggleButton, sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement("div", {
+  }, !isFhsEnabled && sideNavToggleButton, sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && isFhsEnabled && /*#__PURE__*/React.createElement("div", {
     key: sideNavToggleButtonKey,
     className: 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), fg('navx-full-height-sidebar') ? /*#__PURE__*/React.createElement("div", {
+  }, sideNavToggleButton), isFhsEnabled ? /*#__PURE__*/React.createElement("div", {
     className: 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 && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement("div", {
+  }, children) : children, sideNavToggleButton && isDesktop && isExpandedOnDesktop && isFhsEnabled && /*#__PURE__*/React.createElement("div", {
     key: sideNavToggleButtonKey,
     className: 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/es2019/ui/page-layout/top-nav/top-nav.js

@@ -5,6 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
 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, topNavMountedVar, UNSAFE_topNavVar } from '../constants';
@@ -48,6 +49,9 @@ export function TopNav({
   id: providedId,
   UNSAFE_theme
 }) {
+  const isFhsEnabled = fg('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIsFhsEnabled() : fg('navx-full-height-sidebar');
   const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
   const id = useLayoutId({
     providedId
@@ -88,21 +92,21 @@ export function TopNav({
   } = useSideNavVisibility();
   return /*#__PURE__*/React.createElement(HasCustomThemeContext.Provider, {
     value: customTheme.isEnabled
-  }, 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: fg('navx-full-height-sidebar') ? backgroundStyle : undefined,
+    style: isFhsEnabled ? backgroundStyle : undefined,
     className: ax([backgroundStyles.root, isExpandedOnDesktop && backgroundStyles.sideNavExpanded])
   }), /*#__PURE__*/React.createElement("header", {
     id: id,
     "data-layout-slot": true,
-    className: ax([styles.root, fg('navx-full-height-sidebar') && styles.fullHeightSidebar, isExpandedOnDesktop && fg('navx-full-height-sidebar') && styles.fullHeightSidebarExpanded, xcss]),
+    className: 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: fg('navx-full-height-sidebar') ? foregroundStyle : customTheme.isEnabled ? customTheme.style : undefined
+    style: isFhsEnabled ? foregroundStyle : customTheme.isEnabled ? customTheme.style : undefined
   }, /*#__PURE__*/React.createElement(HoistCssVarToLocalGrid, {
     variableName: topNavMountedVar,
     value: height

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

@@ -6,6 +6,7 @@ import { cx } from '@compiled/react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Anchor, Inline, Text } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
+import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { useHasCustomTheme } from '../themed/has-custom-theme-context';
 import { LogoRenderer } from './logo-renderer';
 const anchorStyles = {
@@ -45,6 +46,9 @@ export const AppLogo = ({
   icon,
   onClick
 }) => {
+  const isFhsEnabled = fg('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIsFhsEnabled() : fg('navx-full-height-sidebar');
   const ref = useRef(null);
   const nameRef = useRef(null);
   const hasCustomTheme = useHasCustomTheme();
@@ -63,14 +67,14 @@ export const AppLogo = ({
     // @ts-expect-error - non-standard values for `borderRadius` and the custom theming interaction states
     // eslint-disable-next-line @compiled/no-suppress-xcss
     ,
-    xcss: cx(anchorStyles.root, hasCustomTheme ? anchorStyles.interactionStatesCustomTheming : anchorStyles.interactionStates, fg('navx-full-height-sidebar') && anchorStyles.fullHeightSidebar),
+    xcss: cx(anchorStyles.root, hasCustomTheme ? anchorStyles.interactionStatesCustomTheming : anchorStyles.interactionStates, isFhsEnabled && anchorStyles.fullHeightSidebar),
     onClick: onClick
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.075",
     alignBlock: "center",
-    xcss: cx(logoWrapperStyles.root, fg('navx-full-height-sidebar') && logoWrapperStyles.fullHeightSidebar)
+    xcss: cx(logoWrapperStyles.root, isFhsEnabled && logoWrapperStyles.fullHeightSidebar)
   }, /*#__PURE__*/React.createElement("div", {
-    className: ax([iconContainerStyles.root, fg('navx-full-height-sidebar') && iconContainerStyles.fullHeightSidebar])
+    className: ax([iconContainerStyles.root, isFhsEnabled && iconContainerStyles.fullHeightSidebar])
   }, /*#__PURE__*/React.createElement(LogoRenderer
   // Top nav always uses the new logo design
   , {