@atlaskit/navigation-system 5.5.1 → 5.7.0

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

@@ -6,6 +6,7 @@ import { cx } from '@atlaskit/css';
 import SearchIcon from '@atlaskit/icon/core/search';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Pressable, Show, Text } from '@atlaskit/primitives/compiled';
+import { useIsFhsEnabled } from '../fhs-rollout/use-is-fhs-enabled';
 import { IconButton } from './themed/migration';
 const styles = {
   root: "_2rko12b0 _1rjcze3t _18zr12x7 _yv0e1mfv _4cvr1h6o _bfhk1j9a _vchhusvi _80om1kdv _1e0cglyw _4t3izwfg _p12f1kvu _1bsb1osq _irr3l4ek _1di6r01l _114b11p5",
@@ -27,37 +28,42 @@ export const Search = ({
   elemAfter,
   interactionName,
   'aria-haspopup': ariaHaspopup
-}) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Pressable, {
-  style: {
-    // To win the specificity war against Emotion we move this into inline styles
-    // When Emotion has been stripped from the Design System move this to Compiled.
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    cursor: 'text',
-    border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border-input, #8C8F97)"}`
-  },
-  onClick: onClick,
-  xcss: cx(styles.root, fg('navx-full-height-sidebar') && styles.fullHeightSidebar),
-  interactionName: interactionName,
-  "aria-haspopup": ariaHaspopup
-}, /*#__PURE__*/React.createElement("span", {
-  className: ax([styles.iconBefore])
-}, /*#__PURE__*/React.createElement(IconBefore, {
-  color: "var(--ds-icon-subtle, #505258)",
-  spacing: "spacious",
-  label: ""
-})), /*#__PURE__*/React.createElement("div", {
-  className: ax([styles.buttonText])
-}, /*#__PURE__*/React.createElement(Text, {
-  color: "color.text.subtlest"
-}, label)), elemAfter && /*#__PURE__*/React.createElement("span", {
-  className: ax([styles.elemAfter])
-}, elemAfter)), /*#__PURE__*/React.createElement(Show, {
-  below: "xs"
-}, /*#__PURE__*/React.createElement(IconButton, {
-  label: label,
-  appearance: "subtle",
-  icon: SearchIcon,
-  onClick: onClick,
-  interactionName: interactionName,
-  "aria-haspopup": ariaHaspopup
-})));
+}) => {
+  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(Fragment, null, /*#__PURE__*/React.createElement(Pressable, {
+    style: {
+      // To win the specificity war against Emotion we move this into inline styles
+      // When Emotion has been stripped from the Design System move this to Compiled.
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      cursor: 'text',
+      border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border-input, #8C8F97)"}`
+    },
+    onClick: onClick,
+    xcss: cx(styles.root, isFhsEnabled && styles.fullHeightSidebar),
+    interactionName: interactionName,
+    "aria-haspopup": ariaHaspopup
+  }, /*#__PURE__*/React.createElement("span", {
+    className: ax([styles.iconBefore])
+  }, /*#__PURE__*/React.createElement(IconBefore, {
+    color: "var(--ds-icon-subtle, #505258)",
+    spacing: "spacious",
+    label: ""
+  })), /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.buttonText])
+  }, /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtlest"
+  }, label)), elemAfter && /*#__PURE__*/React.createElement("span", {
+    className: ax([styles.elemAfter])
+  }, elemAfter)), /*#__PURE__*/React.createElement(Show, {
+    below: "xs"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    label: label,
+    appearance: "subtle",
+    icon: SearchIcon,
+    onClick: onClick,
+    interactionName: interactionName,
+    "aria-haspopup": ariaHaspopup
+  })));
+};

package/dist/esm/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/esm/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/esm/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 var IsCustomIsFhsEnabledContext = /*#__PURE__*/createContext(false);

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

@@ -0,0 +1,11 @@
+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 var IsFhsEnabledContext = /*#__PURE__*/createContext(function () {
+  return fg('navx-full-height-sidebar');
+});

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

@@ -0,0 +1,22 @@
+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 var IsFhsEnabledProvider = function IsFhsEnabledProvider(_ref) {
+  var children = _ref.children,
+    value = _ref.value;
+  var 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/esm/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 var useIsFhsEnabled = function useIsFhsEnabled() {
+  var isFhsEnabled = useContext(IsFhsEnabledContext);
+  return typeof isFhsEnabled === 'boolean' ? isFhsEnabled : isFhsEnabled();
+};

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

@@ -21,6 +21,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 @@ var MaybeTooltip = function MaybeTooltip(_ref) {
   var tooltipContent = _ref.tooltipContent,
     shortcut = _ref.shortcut,
     children = _ref.children;
-  if (tooltipContent && fg('navx-full-height-sidebar')) {
+  var 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,
@@ -83,6 +87,9 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
     position = _ref2.position,
     tooltipContent = _ref2.tooltipContent,
     shortcut = _ref2.shortcut;
+  var isFhsEnabled = fg('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIsFhsEnabled() : fg('navx-full-height-sidebar');
   var splitterRef = useRef(null);
   var labelId = useId();
   // Separate state used for the input range width to remove the UI's dependency on the "persisted" layout state value being updated
@@ -299,7 +306,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
     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/esm/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.
  *
@@ -35,14 +37,17 @@ var fullHeightSidebarStyles = {
 function _SideNavContent(_ref, forwardedRef) {
   var children = _ref.children,
     testId = _ref.testId;
+  var isFhsEnabled = fg('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIsFhsEnabled() : fg('navx-full-height-sidebar');
   var internalRef = useRef(null);
   var mergedRef = useMemo(function () {
     return 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/esm/ui/page-layout/side-nav/side-nav.js

@@ -19,6 +19,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';
@@ -96,6 +97,9 @@ function SideNavInternal(_ref) {
     onPeekEnd = _ref.onPeekEnd,
     providedId = _ref.id,
     canToggleWithShortcut = _ref.canToggleWithShortcut;
+  var isFhsEnabled = fg('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIsFhsEnabled() : fg('navx-full-height-sidebar');
   var id = useLayoutId({
     providedId: providedId
   });
@@ -300,9 +304,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;
         }
@@ -658,7 +662,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');
@@ -704,13 +708,13 @@ function SideNavInternal(_ref) {
   // Otherwise, the `@starting-style` rule will cause the sidebar to slide in initially.
   var isFirstRenderRef = useRef(true);
   useEffect(function () {
-    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.
   var shouldShowSidebarToggleAnimation =
@@ -744,7 +748,7 @@ function SideNavInternal(_ref) {
     style: _defineProperty({}, sideNavVar, clampedWidth),
     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/esm/ui/page-layout/side-nav/toggle-button.js

@@ -10,7 +10,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';
@@ -40,6 +42,9 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
     testId = _ref.testId,
     interactionName = _ref.interactionName,
     onClick = _ref.onClick;
+  var isFhsEnabled = fg('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIsFhsEnabled() : fg('navx-full-height-sidebar');
   var _useSideNavVisibility = useSideNavVisibility({
       defaultCollapsed: defaultCollapsed
     }),
@@ -99,12 +104,16 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
   });
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var openLayerObserver = useOpenLayerObserver();
   var handleClick = useCallback(function (event, analyticsEvent) {
     onClick === null || onClick === void 0 || onClick(event, analyticsEvent, {
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-  }, [onClick, isSideNavExpanded, toggleVisibility]);
+    if (fg('navx-full-height-sidebar')) {
+      openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
+    }
+  }, [onClick, isSideNavExpanded, toggleVisibility, openLayerObserver]);
   var handlePointerEnter = useCallback(function () {
     if (!fg('platform_dst_nav4_fhs_instrumentation_1')) {
       return;
@@ -149,13 +158,13 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
   };
   var isShortcutEnabled = useIsSideNavShortcutEnabled();
   var tooltipProps = useMemo(function () {
-    if (fg('navx-full-height-sidebar')) {
+    if (isFhsEnabled) {
       return _objectSpread(_objectSpread({}, toggleButtonTooltipOptions), {}, {
         shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined
       });
     }
     return toggleButtonTooltipOptions;
-  }, [isShortcutEnabled]);
+  }, [isFhsEnabled, isShortcutEnabled]);
   return /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     label: isSideNavExpanded ? collapseLabel : expandLabel,

package/dist/esm/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';
 
@@ -11,6 +12,9 @@ import { useToggleSideNav } from './use-toggle-side-nav';
  */
 export function useSideNavToggleKeyboardShortcut(_ref) {
   var canToggleWithShortcut = _ref.canToggleWithShortcut;
+  var isFhsEnabled = fg('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIsFhsEnabled() : fg('navx-full-height-sidebar');
   var openLayerObserver = useOpenLayerObserver();
   var toggleVisibilityByShortcut = useToggleSideNav({
     trigger: 'keyboard'
@@ -18,7 +22,7 @@ export function useSideNavToggleKeyboardShortcut(_ref) {
   var canToggleWithShortcutStableRef = useStableRef(canToggleWithShortcut);
   var isSideNavShortcutEnabled = useIsSideNavShortcutEnabled();
   useEffect(function () {
-    if (!fg('navx-full-height-sidebar')) {
+    if (!isFhsEnabled) {
       return;
     }
     if (!isSideNavShortcutEnabled) {
@@ -37,7 +41,7 @@ export 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
@@ -47,5 +51,5 @@ export function useSideNavToggleKeyboardShortcut(_ref) {
         }
       }
     });
-  }, [canToggleWithShortcutStableRef, openLayerObserver, toggleVisibilityByShortcut, isSideNavShortcutEnabled]);
+  }, [canToggleWithShortcutStableRef, isFhsEnabled, isSideNavShortcutEnabled, openLayerObserver, toggleVisibilityByShortcut]);
 }

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

@@ -11,6 +11,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';
 var containerStyles = {
@@ -38,6 +39,9 @@ export 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 = fg('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIsFhsEnabled() : fg('navx-full-height-sidebar');
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -62,7 +66,7 @@ export function TopNavEnd(_ref) {
   }, [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: function onClose() {

package/dist/esm/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';
 var styles = {
   root: "_zulpu2gc _yyhycs5v _1bsb1osq _4cvr1h6o _1e0c1txw _1bahh9n0 _181n11p5 _1j8b15b0 _lagd1bp4 _1t4c1ris _12e8h9n0",
   fullHeightSidebar: "_lcxv1wug"
@@ -18,7 +19,10 @@ var styles = {
  */
 export function TopNavMiddle(_ref) {
   var children = _ref.children;
+  var 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/esm/ui/page-layout/top-nav/top-nav-start.js

@@ -7,6 +7,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';
 
@@ -25,7 +26,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 = {
@@ -39,7 +40,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",
@@ -129,6 +130,9 @@ export function TopNavStart(_ref3) {
   var children = _ref3.children,
     testId = _ref3.testId,
     sideNavToggleButton = _ref3.sideNavToggleButton;
+  var isFhsEnabled = fg('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIsFhsEnabled() : fg('navx-full-height-sidebar');
   var ref = useContext(TopNavStartAttachRef);
   var elementRef = useRef(null);
 
@@ -175,7 +179,7 @@ export function TopNavStart(_ref3) {
   var isFirstRenderRef = useRef(true);
   var sideNavState = useContext(SideNavVisibilityState);
   useEffect(function () {
-    if (!fg('navx-full-height-sidebar')) {
+    if (!isFhsEnabled) {
       return;
     }
 
@@ -188,13 +192,13 @@ export 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 = useStableRef(sideNavToggleButton);
   useLayoutEffect(function () {
-    if (!fg('navx-full-height-sidebar')) {
+    if (!isFhsEnabled) {
       return;
     }
 
@@ -231,19 +235,19 @@ export function TopNavStart(_ref3) {
     });
 
     // This layout effect is called when the sidebar's desktop expansion state changes.
-  }, [isExpandedOnDesktop, sideNavToggleButtonStableRef]);
-  var TopNavStartInner = fg('navx-full-height-sidebar') ? TopNavStartInnerFHS : TopNavStartInnerOld;
+  }, [isExpandedOnDesktop, isFhsEnabled, sideNavToggleButtonStableRef]);
+  var 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/esm/ui/page-layout/top-nav/top-nav.js

@@ -7,6 +7,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';
@@ -51,6 +52,9 @@ export function TopNav(_ref) {
     testId = _ref.testId,
     providedId = _ref.id,
     UNSAFE_theme = _ref.UNSAFE_theme;
+  var isFhsEnabled = fg('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIsFhsEnabled() : fg('navx-full-height-sidebar');
   var dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
   var id = useLayoutId({
     providedId: providedId
@@ -88,21 +92,21 @@ export function TopNav(_ref) {
     isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
   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/esm/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';
 var anchorStyles = {
@@ -44,6 +45,9 @@ export var AppLogo = function AppLogo(_ref) {
     href = _ref.href,
     icon = _ref.icon,
     onClick = _ref.onClick;
+  var isFhsEnabled = fg('navx-2566-implement-fhs-rollout') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIsFhsEnabled() : fg('navx-full-height-sidebar');
   var ref = useRef(null);
   var nameRef = useRef(null);
   var hasCustomTheme = useHasCustomTheme();
@@ -62,14 +66,14 @@ export var 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: 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
   , {