@atlaskit/navigation-system 5.5.1 → 5.6.0

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

@@ -7,6 +7,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';
@@ -36,6 +37,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
@@ -140,14 +144,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) {
@@ -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
   , {

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();
+};