@atlaskit/navigation-system 5.5.1 → 5.6.0

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
   });
@@ -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

@@ -11,6 +11,7 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
 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 +41,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
     }),
@@ -149,13 +153,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) {
@@ -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
   , {

package/dist/esm/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';
 var styles = {
   root: "_2rko12b0 _1rjcze3t _18zr12x7 _yv0e1mfv _4cvr1h6o _bfhk1j9a _vchhusvi _80om1kdv _1e0cglyw _4t3izwfg _p12f1kvu _1bsb1osq _irr3l4ek _1di6r01l _114b11p5",
@@ -28,6 +29,9 @@ export var Search = function Search(_ref) {
     elemAfter = _ref.elemAfter,
     interactionName = _ref.interactionName,
     ariaHaspopup = _ref['aria-haspopup'];
+  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(Fragment, null, /*#__PURE__*/React.createElement(Pressable, {
     style: {
       // To win the specificity war against Emotion we move this into inline styles
@@ -37,7 +41,7 @@ export var Search = function Search(_ref) {
       border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-input, #8C8F97)")
     },
     onClick: onClick,
-    xcss: cx(styles.root, fg('navx-full-height-sidebar') && styles.fullHeightSidebar),
+    xcss: cx(styles.root, isFhsEnabled && styles.fullHeightSidebar),
     interactionName: interactionName,
     "aria-haspopup": ariaHaspopup
   }, /*#__PURE__*/React.createElement("span", {

package/dist/types/entry-points/fhs-rollout.d.ts

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

package/dist/types/index.d.ts

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

package/dist/types/ui/fhs-rollout/is-custom-is-fhs-enabled-context.d.ts

@@ -0,0 +1,7 @@
+/**
+ * __Is custom is fhs enabled context__
+ *
+ * Tracks if a custom value has been provided for `IsFhsEnabledContext`.
+ * Used to prevent nesting of the `IsFhsEnabledProvider`.
+ */
+export declare const IsCustomIsFhsEnabledContext: import("react").Context<boolean>;

package/dist/types/ui/fhs-rollout/is-fhs-enabled-context.d.ts

@@ -0,0 +1,8 @@
+import type { Get } from './types';
+/**
+ * __Is fhs enabled context__
+ *
+ * Tracks is FHS enabled.
+ * Defaults to feature gate 'navx-full-height-sidebar'.
+ */
+export declare const IsFhsEnabledContext: import("react").Context<boolean | Get<boolean>>;

package/dist/types/ui/fhs-rollout/is-fhs-enabled-provider.d.ts

@@ -0,0 +1,10 @@
+import React, { type PropsWithChildren } from 'react';
+/**
+ * __Is fhs enabled provider__
+ *
+ * Used to provide a custom value for is FHS enabled.
+ */
+export declare const IsFhsEnabledProvider: ({ children, value }: IsFhsEnabledProviderProps) => React.JSX.Element;
+export type IsFhsEnabledProviderProps = PropsWithChildren<{
+    value: boolean;
+}>;

package/dist/types/ui/fhs-rollout/types.d.ts

@@ -0,0 +1 @@
+export type Get<T> = () => T;

package/dist/types/ui/fhs-rollout/use-is-fhs-enabled.d.ts

@@ -0,0 +1,6 @@
+/**
+ * __Use is fhs enabled__
+ *
+ * Retrieves is FHS enabled.
+ */
+export declare const useIsFhsEnabled: () => boolean;

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

@@ -29,7 +29,7 @@ export type PanelSplitterProps = {
      * The `tooltipContent` will not be announced by screen readers because it pertains to the draggable element, which lacks keyboard functionality.
      * Use the `label` prop to provide accessible information about the panel splitter.
      *
-     * Only used if the `navx-full-height-sidebar` feature flag is enabled.
+     * Only used if `useIsFhsEnabled` is true.
      */
     tooltipContent?: TooltipProps['content'];
 };

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

@@ -17,7 +17,7 @@ type SideNavPanelSplitterProps = Omit<PanelSplitterProps, 'onDoubleClick' | 'too
      *
      * If the `isSideNavShortcutEnabled` prop is enabled on `<Root />`, the built-in keyboard shortcut will be displayed with the tooltip.
      *
-     * Only used if the `navx-full-height-sidebar` feature flag is enabled.
+     * Only used if `useIsFhsEnabled` is true.
      */
     tooltipContent?: PanelSplitterProps['tooltipContent'];
 };

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

@@ -61,7 +61,7 @@ export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes,
      * is pressed, before the SideNav is toggled. You can use this to conditionally disable the shortcut based on your
      * your own custom checks, e.g. if there is a legacy dialog open.
      *
-     * Note: The built-in keyboard shortcut is behind the `navx-full-height-sidebar` feature flag.
+     * Note: The built-in keyboard shortcut is behind `useIsFhsEnabled`.
      */
     isSideNavShortcutEnabled?: boolean;
 }): JSX.Element;

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

@@ -72,7 +72,7 @@ type SideNavProps = CommonSlotProps & {
      *
      * The shortcut key is `Ctrl` + `[`.
      *
-     * Note: The built-in keyboard shortcut is behind the `navx-full-height-sidebar` feature flag.
+     * Note: The built-in keyboard shortcut is behind `useIsFhsEnabled`.
      */
     canToggleWithShortcut?: () => boolean;
 };

package/dist/types-ts4.5/entry-points/fhs-rollout.d.ts

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

package/dist/types-ts4.5/index.d.ts

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

package/dist/types-ts4.5/ui/fhs-rollout/is-custom-is-fhs-enabled-context.d.ts

@@ -0,0 +1,7 @@
+/**
+ * __Is custom is fhs enabled context__
+ *
+ * Tracks if a custom value has been provided for `IsFhsEnabledContext`.
+ * Used to prevent nesting of the `IsFhsEnabledProvider`.
+ */
+export declare const IsCustomIsFhsEnabledContext: import("react").Context<boolean>;

package/dist/types-ts4.5/ui/fhs-rollout/is-fhs-enabled-context.d.ts

@@ -0,0 +1,8 @@
+import type { Get } from './types';
+/**
+ * __Is fhs enabled context__
+ *
+ * Tracks is FHS enabled.
+ * Defaults to feature gate 'navx-full-height-sidebar'.
+ */
+export declare const IsFhsEnabledContext: import("react").Context<boolean | Get<boolean>>;

package/dist/types-ts4.5/ui/fhs-rollout/is-fhs-enabled-provider.d.ts

@@ -0,0 +1,10 @@
+import React, { type PropsWithChildren } from 'react';
+/**
+ * __Is fhs enabled provider__
+ *
+ * Used to provide a custom value for is FHS enabled.
+ */
+export declare const IsFhsEnabledProvider: ({ children, value }: IsFhsEnabledProviderProps) => React.JSX.Element;
+export type IsFhsEnabledProviderProps = PropsWithChildren<{
+    value: boolean;
+}>;

package/dist/types-ts4.5/ui/fhs-rollout/types.d.ts

@@ -0,0 +1 @@
+export type Get<T> = () => T;

package/dist/types-ts4.5/ui/fhs-rollout/use-is-fhs-enabled.d.ts

@@ -0,0 +1,6 @@
+/**
+ * __Use is fhs enabled__
+ *
+ * Retrieves is FHS enabled.
+ */
+export declare const useIsFhsEnabled: () => boolean;

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

@@ -29,7 +29,7 @@ export type PanelSplitterProps = {
      * The `tooltipContent` will not be announced by screen readers because it pertains to the draggable element, which lacks keyboard functionality.
      * Use the `label` prop to provide accessible information about the panel splitter.
      *
-     * Only used if the `navx-full-height-sidebar` feature flag is enabled.
+     * Only used if `useIsFhsEnabled` is true.
      */
     tooltipContent?: TooltipProps['content'];
 };

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

@@ -17,7 +17,7 @@ type SideNavPanelSplitterProps = Omit<PanelSplitterProps, 'onDoubleClick' | 'too
      *
      * If the `isSideNavShortcutEnabled` prop is enabled on `<Root />`, the built-in keyboard shortcut will be displayed with the tooltip.
      *
-     * Only used if the `navx-full-height-sidebar` feature flag is enabled.
+     * Only used if `useIsFhsEnabled` is true.
      */
     tooltipContent?: PanelSplitterProps['tooltipContent'];
 };

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

@@ -61,7 +61,7 @@ export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes,
      * is pressed, before the SideNav is toggled. You can use this to conditionally disable the shortcut based on your
      * your own custom checks, e.g. if there is a legacy dialog open.
      *
-     * Note: The built-in keyboard shortcut is behind the `navx-full-height-sidebar` feature flag.
+     * Note: The built-in keyboard shortcut is behind `useIsFhsEnabled`.
      */
     isSideNavShortcutEnabled?: boolean;
 }): JSX.Element;

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

@@ -72,7 +72,7 @@ type SideNavProps = CommonSlotProps & {
      *
      * The shortcut key is `Ctrl` + `[`.
      *
-     * Note: The built-in keyboard shortcut is behind the `navx-full-height-sidebar` feature flag.
+     * Note: The built-in keyboard shortcut is behind `useIsFhsEnabled`.
      */
     canToggleWithShortcut?: () => boolean;
 };