@atlaskit/navigation-system 11.2.3 → 11.3.0

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

@@ -1,149 +1,15 @@
 /* top-nav-start.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./top-nav-start.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
-import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/open-layer-observer-namespace-provider';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { UNSAFE_useMediaQuery } from '@atlaskit/primitives/compiled/use-media-query';
+import React, { useContext, useEffect, useRef } from 'react';
 import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-attach-ref';
-import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-import { useHasCustomTheme } from '../../top-nav-items/themed/has-custom-theme-context';
-import { HasDefaultBackgroundColorContext } from '../../top-nav-items/themed/has-default-background-color-context';
-import { openLayerObserverTopNavStartNamespace } from '../constants';
-import { SideNavVisibilityState } from '../side-nav/side-nav-visibility-state';
-import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
-
-/**
- * Firefox does support these reorder animations, but only partially enabling layout animations would look odd.
- *
- * We are using JS to detect Firefox and disable animations, instead of using CSS, as Compiled currently does not merge duplicate
- * CSS at-rules when at-rules are nested: https://github.com/atlassian-labs/compiled/blob/e04a325915e1d13010205089e4915de0e53bc2d4/packages/css/src/plugins/merge-duplicate-at-rules.ts#L5
- * Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
- */
-let isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-
-// Placed in a variable, as the value is used in the translateX value for the children wrapper animation.
-const flexGap = "var(--ds-space-050, 4px)";
 
 /**
  * Styles for the TopNavStart element.
- *
- * When `useIsFhsEnabled` is true this is the styling for the inner element,
- * which re-enables pointer events.
  */
 const innerStyles = {
-  root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15rip2n4 _1gs5usvi",
-  fullHeightSidebarExpanded: "_15rin7od _glte1osq"
-};
-
-/**
- * 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 `useIsFhsEnabled` is true.
- */
-const wrapperStyles = {
-  root: "_vchhusvi _bozgutpp _4t3i1osq _13wnh2mm _1l3vb3bt _juxdstnw _1vinidpf _1719idpf _e6znidpf _1kyhe4h9 _4cwynqa1 _435s1l7x _m7c3idpf",
-  fullHeightSidebarExpanded: "_glte93mn _exxmutpp _4ap3vuon _m7c3kb7n",
-  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42",
-  fullHeightSidebarCustomTheming: "_4ap319ly _1m5lglyw"
-};
-
-/**
- * We use a fixed translateX offset for the slide animation (used when the TopNavStart children elements are reordered).
- * This fixed offset makes the elements appear to animate smoothly from the old to the new position.
- * This offset is calculated based on:
- * - 32px (2rem) width of the side nav toggle button (IconButton)
- * - 4px gap ('space.050' token) of the flex container
- *
- * The benefit of hardcoding this offset is that we don't need to calculate it using JS each time the sidebar is toggled.
- * However, it could become out of sync if the width of IconButton changes.
- *
- * The alternative is using JS to store the previous position of the children wrapper element, and calculate the offset based on
- * the new position, and then transforming using that offset. This would prevent the animation from going out of sync.
- */
-const childrenWrapperAnimationOffset = `calc(2rem + ${flexGap})`;
-const childrenWrapperStyles = {
-  root: "_zulp1kw7 _1e0c1kw7 _4cvr1h6o _1ul9idpf _15yekb7n _65m41mrw",
-  animationBaseStyles: "_10t81e03",
-  finalPosition: "_mjvcz12g _xrrpfnf5",
-  expandAnimationStartPosition: "_mjvcyrjp",
-  collapseAnimationStartPosition: "_mjvco0k7"
-};
-
-/**
- * We use a fixed translateX offset for the toggle button slide animation (used when the TopNavStart children elements are reordered).
- * The specific value doesn't matter too much for the toggle button animation, so we are using `100%`, which will match the toggle button width.
- *
- * By combining the `translateX` animation with an `opacity` fade, the feel and experience is actually quite similar to animating the
- * element from the exact old position (offset), and it avoids the additional complexity of needing to track and calculate the exact offset.
- */
-const toggleButtonWrapperStyles = {
-  root: "_15yekb7n _65m41mrw _10t81rjc",
-  finalPosition: "_mjvcz12g _xrrpfnf5 _bgpzkb7n",
-  expandAnimationStartPosition: "_mjvc1p9u _bgpzidpf",
-  collapseAnimationStartPosition: "_mjvc1efy _bgpzidpf",
-  expandAnimationTimingFunction: "_1xq51ytf",
-  collapseAnimationTimingFunction: "_1xq55ucs",
-  alignEnd: "_ahbq1wug"
+  root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15rip2n4 _1gs5usvi"
 };
-
-/**
- * The consistent key used for the side nav toggle button to ensure it does not get remounted
- * when it is reordered.
- *
- * This ensures we get focus restoration for free.
- */
-const sideNavToggleButtonKey = 'side-nav-toggle-button';
-const TopNavStartInnerOld = /*#__PURE__*/forwardRef(function TopNavStartInner({
-  children,
-  testId
-}, ref) {
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    "data-testid": testId,
-    className: ax([innerStyles.root])
-  }, children);
-});
-const TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS({
-  children,
-  testId
-}, ref) {
-  // This needs the real `defaultCollapsed` state or will not SSR properly
-  // TODO: lift `defaultCollapsed` state to `Root` (DSP-23683)
-  // then context value will be correct in SSR / from initial render
-  const {
-    isExpandedOnDesktop
-  } = useSideNavVisibility({
-    defaultCollapsed: true
-  });
-  const sideNavState = useContext(SideNavVisibilityState);
-  const isFirstRenderRef = useRef(true);
-  useEffect(() => {
-    // Ignore renders until the side nav state is initialized
-    // So that apps using the legacy API for setting side nav default state do not see
-    // animations when they shouldn't
-    if (sideNavState === null) {
-      return;
-    }
-    if (isFirstRenderRef.current) {
-      isFirstRenderRef.current = false;
-    }
-  }, [sideNavState]);
-  const hasCustomTheme = useHasCustomTheme();
-  const hasDefaultBackgroundColor = useContext(HasDefaultBackgroundColorContext);
-  return /*#__PURE__*/React.createElement("div", {
-    className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, !isFirstRenderRef.current && isExpandedOnDesktop && wrapperStyles.fullHeightSidebarBorderTransition, hasCustomTheme && !hasDefaultBackgroundColor && fg('platform_dst_nav4_custom_theming_fhs_1') && wrapperStyles.fullHeightSidebarCustomTheming])
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    "data-testid": testId,
-    className: ax([innerStyles.root, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded])
-  }, /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
-    namespace: openLayerObserverTopNavStartNamespace
-  }, children)));
-});
-
 /**
  * __TopNavStart__
  *
@@ -154,7 +20,6 @@ export function TopNavStart({
   testId,
   sideNavToggleButton
 }) {
-  const isFhsEnabled = useIsFhsEnabled();
   const ref = useContext(TopNavStartAttachRef);
   const elementRef = useRef(null);
 
@@ -163,111 +28,9 @@ export function TopNavStart({
   useEffect(() => {
     ref(elementRef.current);
   }, [elementRef, ref]);
-
-  // This needs the real `defaultCollapsed` state or will not SSR properly
-  // TODO: lift `defaultCollapsed` state to `Root` (DSP-23683)
-  // then context value will be correct in SSR / from initial render
-  const {
-    isExpandedOnDesktop
-  } = useSideNavVisibility({
-    defaultCollapsed: true
-  });
-
-  // For SSR assume desktop
-  const [isDesktop, setIsDesktop] = useState(true);
-  // Set state to real value on client
-  // This could result in some visible shift on mobile when hydrating SSR
-  // TODO: review and improve SSR behavior as necessary (DSP-23817)
-  useLayoutEffect(() => {
-    // Checking this to avoid breaking tests when `matchMedia` is not mocked
-    // Ideally we wouldn't cater to test environments, but this avoids introducing unnecessary friction
-    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
-      setIsDesktop(window.matchMedia('(min-width: 64rem)').matches);
-    }
-  }, []);
-  UNSAFE_useMediaQuery('above.md', event => {
-    setIsDesktop(event.matches);
-  });
-  const [animationState, setAnimationState] = useState({
-    type: 'idle'
-  });
-
-  // Used to prevent the reorder animations from running on the initial render.
-  const isFirstRenderRef = useRef(true);
-  const sideNavState = useContext(SideNavVisibilityState);
-  useEffect(() => {
-    if (!isFhsEnabled) {
-      return;
-    }
-
-    // Ignore renders until the side nav state is initialized
-    // So that apps using the legacy API for setting side nav default state do not see
-    // animations when they shouldn't
-    if (sideNavState === null) {
-      return;
-    }
-    if (isFirstRenderRef.current) {
-      isFirstRenderRef.current = false;
-    }
-  }, [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 (!isFhsEnabled) {
-      return;
-    }
-
-    /**
-     * This layout effect is used to animate the TopNavStart children elements to their new position after being reordered.
-     * It is called when the sidebar's desktop expansion state changes.
-     *
-     * It works by first setting a translateX offset on the elements, used as the start position of the slide animation.
-     * - For the toggle button, it's a fixed offset. It's combined with an opacity, so the exact offset doesn't matter too much.
-     * - For the children wrapper (wrapping everything except the toggle button), an offset was chosen to make the animation
-     * start position the exact same as the element's old position. See comments for `childrenWrapperStyles` for more details.
-     *
-     * On the next frame, the translateX offset is cleared, triggering the animation to the new position.
-     */
-
-    if (isFirstRenderRef.current) {
-      // No animations on initial render.
-      return;
-    }
-    if (!sideNavToggleButtonStableRef.current) {
-      // If there is no toggle button, there should be no re-order animations.
-      return;
-    }
-
-    // Set the translateX offsets so elements are ready to animate to their actual new position after being reordered
-    setAnimationState({
-      type: isExpandedOnDesktop ? 'expand' : 'collapse'
-    });
-    requestAnimationFrame(() => {
-      // Clear translateX offsets on next frame to trigger animation to new position in a re-render
-      setAnimationState({
-        type: 'idle'
-      });
-    });
-
-    // This layout effect is called when the sidebar's desktop expansion state changes.
-  }, [isExpandedOnDesktop, isFhsEnabled, sideNavToggleButtonStableRef]);
-  const TopNavStartInner = isFhsEnabled ? TopNavStartInnerFHS : TopNavStartInnerOld;
-  return /*#__PURE__*/React.createElement(TopNavStartInner, {
+  return /*#__PURE__*/React.createElement("div", {
     ref: elementRef,
-    testId: testId
-  }, !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), 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 && 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.
-    animationState.type === 'idle' && toggleButtonWrapperStyles.expandAnimationTimingFunction, !isFirefox && animationState.type === 'expand' && toggleButtonWrapperStyles.expandAnimationStartPosition])
-  }, sideNavToggleButton));
+    "data-testid": testId,
+    className: ax([innerStyles.root])
+  }, sideNavToggleButton, children);
 }

package/dist/es2019/ui/page-layout/top-nav/top-nav.compiled.css

@@ -1,28 +1,14 @@
 ._nd5l8cbt{grid-area:top-bar}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
-._18zrze3t{padding-inline:var(--ds-space-0,0)}
-._179rglyw{border-block-end:none}
 ._179ria51{border-block-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._152t1nws{inset-block-start:var(--n_bnrM,0)}
-._18postnw:after{position:absolute}
-._1beue4h9:after{border-block-end-width:var(--ds-border-width,1px)}
-._1cte1l7x:after{border-block-end-color:var(--ds-border,#0b120e24)}
-._1czdidpf:after{inset-inline-end:0}
 ._1e0c11p5{display:grid}
-._1gufidpf:after{inset-block-end:0}
-._1pby11wp{z-index:3}
 ._1pbyegat{z-index:4}
 ._4cvr1h6o{align-items:center}
 ._4t3i1dgc{height:var(--n_tNvM)}
-._aetrb3bt:after{content:""}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._d6vu1bgi >span[data-ep-placeholder-id=top_navigation_skeleton]{display:contents}
-._g0nf3tht:after{inset-inline-start:var(--n_sNvlw,0)}
 ._kqsw1if8{position:sticky}
-._lcxv1wug{pointer-events:auto}
-._uaeunqa1:after{border-block-end-style:solid}
 ._vchhusvi{box-sizing:border-box}
 ._yv0e1mfv{grid-template-columns:auto 1fr auto}
-@media (min-width:48rem){._1j8b18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}
-@media (min-width:64rem){._1m5lglyw:after{display:none}._1rqt16a9{grid-template-columns:0fr minmax(min-content,max-content) 1fr}._pdlmutpp{gap:var(--ds-space-150,9pt)}}
-@media (min-width:110.5rem){._jh1g18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}
+@media (min-width:48rem){._1j8b18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}

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

@@ -6,7 +6,6 @@ import { useContext } from 'react';
 import { componentWithFG } from '@atlaskit/platform-feature-flags-react/component-with-fg';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useSkipLinkInternal } from '../../../context/skip-links/use-skip-link-internal';
-import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
 import { HasDefaultBackgroundColorContext } from '../../top-nav-items/themed/has-default-background-color-context';
 import { useCustomTheme } from '../../top-nav-items/themed/use-custom-theme';
@@ -15,7 +14,6 @@ import { UNSAFE_topNavVar, topNavMountedVar } from '../constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from '../dangerously-hoist-css-var-to-document-root';
 import { HoistCssVarToLocalGrid } from '../hoist-css-var-to-local-grid';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
-import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 import { useLayoutId } from '../use-layout-id';
 
 /**
@@ -27,10 +25,7 @@ import { useLayoutId } from '../use-layout-id';
  * - The background sits below the expanded side nav
  */
 const styles = {
-  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179ria51 _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
-  fullHeightSidebar: "_18zrze3t _179rglyw _lcxv1wug _bfhkvuon _1pby11wp _aetrb3bt _18postnw _1gufidpf _1czdidpf _g0nf3tht _1beue4h9 _uaeunqa1 _1cte1l7x _pdlmutpp",
-  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax",
-  fullHeightSidebarCustomTheming: "_1m5lglyw"
+  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179ria51 _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax"
 };
 /**
  * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
@@ -44,7 +39,6 @@ function TopNavOld({
   id: providedId,
   customTheme: customThemeConfig
 }) {
-  const isFhsEnabled = useIsFhsEnabled();
   const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
   const id = useLayoutId({
     providedId
@@ -54,17 +48,14 @@ function TopNavOld({
     label: skipLinkLabel,
     isHidden: fg('platform_dst_nav4_skip_link_a11y_1')
   });
-  const height = heightProp !== null && heightProp !== void 0 ? heightProp : isFhsEnabled || fg('platform_dst_ads_appswitcher_improvements') ? 56 : 48;
+  const height = heightProp !== null && heightProp !== void 0 ? heightProp : fg('platform_dst_ads_appswitcher_improvements') ? 56 : 48;
   const customTheme = useCustomTheme(customThemeConfig);
-  const {
-    isExpandedOnDesktop
-  } = useSideNavVisibility();
   return /*#__PURE__*/React.createElement(HasCustomThemeContext.Provider, {
     value: customTheme.isEnabled
   }, /*#__PURE__*/React.createElement("header", {
     id: id,
     "data-layout-slot": true,
-    className: ax([styles.root, isFhsEnabled && styles.fullHeightSidebar, isExpandedOnDesktop && isFhsEnabled && styles.fullHeightSidebarExpanded, xcss]),
+    className: ax([styles.root, xcss]),
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
@@ -97,7 +88,6 @@ function TopNavNew({
   id: providedId,
   customTheme: customThemeConfig
 }) {
-  const isFhsEnabled = useIsFhsEnabled();
   const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
   const id = useLayoutId({
     providedId
@@ -107,12 +97,9 @@ function TopNavNew({
     label: skipLinkLabel,
     isHidden: fg('platform_dst_nav4_skip_link_a11y_1')
   });
-  const height = heightProp !== null && heightProp !== void 0 ? heightProp : isFhsEnabled || fg('platform_dst_ads_appswitcher_improvements') ? 56 : 48;
+  const height = heightProp !== null && heightProp !== void 0 ? heightProp : fg('platform_dst_ads_appswitcher_improvements') ? 56 : 48;
   const customTheme = useCustomThemeNew(customThemeConfig);
   const hasDefaultBackground = customTheme.isEnabled ? customTheme.hasDefaultBackground : true;
-  const {
-    isExpandedOnDesktop
-  } = useSideNavVisibility();
   return /*#__PURE__*/React.createElement(HasCustomThemeContext.Provider, {
     value: customTheme.isEnabled
   }, /*#__PURE__*/React.createElement(HasDefaultBackgroundColorContext.Provider, {
@@ -120,7 +107,7 @@ function TopNavNew({
   }, /*#__PURE__*/React.createElement("header", {
     id: id,
     "data-layout-slot": true,
-    className: ax([styles.root, isFhsEnabled && styles.fullHeightSidebar, isExpandedOnDesktop && isFhsEnabled && styles.fullHeightSidebarExpanded, customTheme.isEnabled && !hasDefaultBackground && fg('platform_dst_nav4_custom_theming_fhs_1') && styles.fullHeightSidebarCustomTheming, xcss]),
+    className: ax([styles.root, xcss]),
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,

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

@@ -5,7 +5,6 @@
 ._1e0c1txw{display:flex}
 ._1e0cglyw{display:none}
 ._1o9zidpf{flex-shrink:0}
-._1o9zkb7n{flex-shrink:1}
 ._1pfh1i6y{margin-block-start:var(--ds-space-negative-025,-2px)}
 ._1reo15vq{overflow-x:hidden}
 ._1toh1r31._1toh1r31{text-decoration-color:currentColor}
@@ -17,7 +16,6 @@
 ._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
 ._c71l1tcg{max-height:24px}
 ._mrqmnqa1._mrqmnqa1{text-decoration-style:solid}
-._p12f1osq{max-width:100%}
 ._p12f1tcg{max-width:24px}
 ._p12fnklw{max-width:20pc}
 ._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}

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

@@ -8,22 +8,18 @@ import { Anchor } from '@atlaskit/primitives/compiled/anchor';
 import { Inline } from '@atlaskit/primitives/compiled/inline';
 import { Text } from '@atlaskit/primitives/compiled/text';
 import Tooltip from '@atlaskit/tooltip/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 = {
   root: "_2rko1mok _1e0c1txw _4cvr1h6o _4t3izwfg _1o9zidpf _ahbq1b66 _1toh1r31 _5jyqglyw _mrqmnqa1 _1w901kw7",
   interactionStates: "_irr31dpa _1di69yc7",
-  interactionStatesCustomTheming: "_irr31rps _1di6yhlj",
-  fullHeightSidebar: "_1reo15vq _18m915vq _1o9zkb7n"
+  interactionStatesCustomTheming: "_irr31rps _1di6yhlj"
 };
 const logoWrapperStyles = {
-  root: "_18zr1b66",
-  fullHeightSidebar: "_p12f1osq"
+  root: "_18zr1b66"
 };
 const iconContainerStyles = {
-  root: "_1reo15vq _18m915vq _1e0c1txw _p12f1tcg _c71l1tcg",
-  fullHeightSidebar: "_1o9zidpf"
+  root: "_1reo15vq _18m915vq _1e0c1txw _p12f1tcg _c71l1tcg"
 };
 const logoTextStyles = {
   root: "_1bsb1ris _p12fnklw _uiztglyw _y4tiv77o _1e0cglyw _2lx21bp4 _1bah1h6o _10y41txw"
@@ -51,7 +47,6 @@ export const AppLogo = ({
   icon,
   onClick
 }) => {
-  const isFhsEnabled = useIsFhsEnabled();
   const ref = useRef(null);
   const nameRef = useRef(null);
   const hasCustomTheme = useHasCustomTheme();
@@ -71,14 +66,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, isFhsEnabled && anchorStyles.fullHeightSidebar),
+    xcss: cx(anchorStyles.root, hasCustomTheme ? anchorStyles.interactionStatesCustomTheming : anchorStyles.interactionStates),
     onClick: onClick
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.075",
     alignBlock: "center",
-    xcss: cx(logoWrapperStyles.root, isFhsEnabled && logoWrapperStyles.fullHeightSidebar)
+    xcss: logoWrapperStyles.root
   }, /*#__PURE__*/React.createElement("div", {
-    className: ax([iconContainerStyles.root, isFhsEnabled && iconContainerStyles.fullHeightSidebar])
+    className: ax([iconContainerStyles.root])
   }, /*#__PURE__*/React.createElement(LogoRenderer, {
     logoOrIcon: icon
   })), /*#__PURE__*/React.createElement("span", {

package/dist/es2019/ui/top-nav-items/nav-logo/custom-logo.compiled.css

@@ -5,12 +5,10 @@
 ._1e0cglyw{display:none}
 ._1jpx1f51 img{object-fit:contain}
 ._1reo15vq{overflow-x:hidden}
-._1ul91tcg{min-width:24px}
 ._4cvr1h6o{align-items:center}
 ._4t3izwfg{height:2pc}
 ._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
 ._bna71tcg img{height:24px}
-._p12f1osq{max-width:100%}
 ._p12f1tcg{max-width:24px}
 ._p12fnklw{max-width:20pc}
 ._rtys1kw7 img{max-width:inherit}

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

@@ -4,7 +4,6 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { Anchor } from '@atlaskit/primitives/compiled/anchor';
-import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { useHasCustomTheme } from '../themed/has-custom-theme-context';
 import { LogoRenderer } from './logo-renderer';
 const anchorStyles = {
@@ -15,8 +14,7 @@ const anchorStyles = {
   newInteractionStatesCustomTheming: "_irr31rps _1di6yhlj"
 };
 const sharedIconOrLogoContainerStyles = {
-  root: "_1reo15vq _18m915vq _18zr1b66 _bna71tcg _rtys1kw7 _1jpx1f51",
-  withFullHeightSidebar: "_p12f1osq _1ul91tcg"
+  root: "_1reo15vq _18m915vq _18zr1b66 _bna71tcg _rtys1kw7 _1jpx1f51"
 };
 const iconContainerStyles = {
   root: "_1e0c1txw _p12f1tcg _vchh1ntv _10y4glyw"
@@ -72,7 +70,6 @@ export const CustomLogo = ({
     }
   }, []);
   const hasCustomTheme = useHasCustomTheme();
-  const isFhsEnabled = useIsFhsEnabled();
   return /*#__PURE__*/React.createElement(Anchor, {
     ref: ref,
     "aria-label": label,
@@ -83,11 +80,11 @@ export const CustomLogo = ({
     xcss: cx(anchorStyles.root, anchorStyles.customLogoBorderRadius, anchorStyles.newMargin, hasCustomTheme ? anchorStyles.newInteractionStatesCustomTheming : anchorStyles.newInteractionStates),
     onClick: onClick
   }, /*#__PURE__*/React.createElement("div", {
-    className: ax([sharedIconOrLogoContainerStyles.root, iconContainerStyles.root, isFhsEnabled && sharedIconOrLogoContainerStyles.withFullHeightSidebar])
+    className: ax([sharedIconOrLogoContainerStyles.root, iconContainerStyles.root])
   }, /*#__PURE__*/React.createElement(LogoRenderer, {
     logoOrIcon: icon
   })), /*#__PURE__*/React.createElement("div", {
-    className: ax([sharedIconOrLogoContainerStyles.root, logoContainerStyles.root, isFhsEnabled && sharedIconOrLogoContainerStyles.withFullHeightSidebar])
+    className: ax([sharedIconOrLogoContainerStyles.root, logoContainerStyles.root])
   }, /*#__PURE__*/React.createElement(LogoRenderer, {
     logoOrIcon: logo
   })));

package/dist/es2019/ui/top-nav-items/search.compiled.css

@@ -1,4 +1,5 @@
-._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}._18zr12x7{padding-inline:var(--ds-space-075,6px)}
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
+._v564k6bl{transition:var(--ds-button-hovered,background-color border-color .15s cubic-bezier(.4,1,.6,1))}._18zr12x7{padding-inline:var(--ds-space-075,6px)}
 ._1ii7kb7n{grid-row:1}
 ._1rjcze3t{padding-block:var(--ds-space-0,0)}
 ._yyhy11wp{grid-column:3}
@@ -12,9 +13,9 @@
 ._80om1kdv{cursor:text}
 ._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
 ._p12f1kvu{max-width:680px}
-._p12fktbq{max-width:780px}
 ._vchhusvi{box-sizing:border-box}
 ._yv0e1mfv{grid-template-columns:auto 1fr auto}
 ._irr3l4ek:hover{background-color:var(--ds-background-input-hovered,#f8f8f8)}
+._1ggl5xtf:active{transition:var(--ds-button-pressed,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
 ._1di6r01l:active{background-color:var(--ds-background-input-pressed,#fff)}
 @media (min-width:30rem){._114b11p5{display:grid}}

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

@@ -2,20 +2,17 @@
 import "./search.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { Fragment } from 'react';
-import { cx } from '@atlaskit/css';
 import SearchIcon from '@atlaskit/icon/core/search';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Pressable } from '@atlaskit/primitives/compiled/pressable';
 import { Show } from '@atlaskit/primitives/compiled/show';
 import { Text } from '@atlaskit/primitives/compiled/text';
-import { useIsFhsEnabled } from '../fhs-rollout/use-is-fhs-enabled';
 import { IconButton } from './themed/icon-button';
 const styles = {
-  root: "_2rko1qi0 _1rjcze3t _18zr12x7 _yv0e1mfv _4cvr1h6o _bfhk1j9a _vchhusvi _80om1kdv _1e0cglyw _4t3izwfg _p12f1kvu _1bsb1osq _irr3l4ek _1di6r01l _114b11p5",
+  root: "_2rko1qi0 _v564k6bl _1rjcze3t _18zr12x7 _yv0e1mfv _4cvr1h6o _bfhk1j9a _vchhusvi _80om1kdv _1e0cglyw _4t3izwfg _p12f1kvu _1bsb1osq _irr3l4ek _1ggl5xtf _1di6r01l _114b11p5",
   buttonText: "_yyhyjvu9 _1ii7kb7n",
   iconBefore: "_yyhykb7n _1ii7kb7n _1e0c1txw",
-  elemAfter: "_yyhy11wp _1ii7kb7n _1e0c1txw",
-  fullHeightSidebar: "_p12fktbq"
+  elemAfter: "_yyhy11wp _1ii7kb7n _1e0c1txw"
 };
 /**
  * __Search__
@@ -30,7 +27,6 @@ export const Search = ({
   interactionName,
   'aria-haspopup': ariaHaspopup
 }) => {
-  const isFhsEnabled = useIsFhsEnabled();
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Pressable, {
     style: {
       // To win the specificity war against Emotion we move this into inline styles
@@ -40,7 +36,7 @@ export const Search = ({
       border: `${"var(--ds-border-width, 1px)"} solid ${fg('platform-dst-tokens-finesse') ? "var(--ds-border-input-search, #0B120E24)" : "var(--ds-border-input, #8C8F97)"}`
     },
     onClick: onClick,
-    xcss: cx(styles.root, isFhsEnabled && styles.fullHeightSidebar),
+    xcss: styles.root,
     interactionName: interactionName,
     "aria-haspopup": ariaHaspopup
   }, /*#__PURE__*/React.createElement("span", {

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

@@ -3,7 +3,7 @@ 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`.
+ * @deprecated Full height sidebar (FHS) has been rolled back. This context is no longer used and
+ * will be deleted in a future major release.
  */
 export var IsCustomIsFhsEnabledContext = /*#__PURE__*/createContext(false);

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

@@ -1,11 +1,11 @@
 import { createContext } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 /**
  * __Is fhs enabled context__
  *
- * Tracks is FHS enabled.
- * Defaults to feature gate 'navx-full-height-sidebar'.
+ * @deprecated Full height sidebar (FHS) has been rolled back and this context is no longer read by
+ * any platform component. Its value is ignored. Remove usages of it; it will be deleted in a future
+ * major release.
+ *
+ * See https://hello.atlassian.net/wiki/spaces/navx/pages/7189669176/Full+Height+Sidebar+FHS+Rollback+Plan
  */
-export var IsFhsEnabledContext = /*#__PURE__*/createContext(function () {
-  return fg('navx-full-height-sidebar');
-});
+export var IsFhsEnabledContext = /*#__PURE__*/createContext(false);

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

@@ -1,22 +1,19 @@
-import React, { useContext } from 'react';
-import { IsCustomIsFhsEnabledContext } from './is-custom-is-fhs-enabled-context';
-import { IsFhsEnabledContext } from './is-fhs-enabled-context';
+import React from 'react';
 
 /**
  * __Is fhs enabled provider__
  *
- * Used to provide a custom value for is FHS enabled.
+ * @deprecated Full height sidebar (FHS) has been rolled back. This provider is now a passthrough:
+ * it renders its children and ignores `value`. Remove it from your app; it will be deleted in a
+ * future major release.
+ *
+ * See https://hello.atlassian.net/wiki/spaces/navx/pages/7189669176/Full+Height+Sidebar+FHS+Rollback+Plan
  */
 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));
-};
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+
+/**
+ * @deprecated Full height sidebar (FHS) has been rolled back. `value` is ignored.
+ */