@atlaskit/navigation-system 5.8.2 → 5.9.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlassian/navigation-system
 
+## 5.9.1
+
+### Patch Changes
+
+- [`8ced6a00eae26`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8ced6a00eae26) -
+  Improving internal types of menu item component.
+
+  Enhanced ref handling in MenuItemBase to work better with the updated mergeRefs utility, providing
+  improved TypeScript compatibility.
+
+- [`ab9386b25161d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ab9386b25161d) -
+  Fixed bug where toggle button click was still using the old full height sidebar feature gate to
+  close layers
+- Updated dependencies
+
+## 5.9.0
+
+### Minor Changes
+
+- [`3665e60cbf959`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3665e60cbf959) -
+  Fixes a bug that could cause side nav animations to apply on initial load
+
 ## 5.8.2
 
 ### Patch Changes

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

@@ -713,24 +713,36 @@ function SideNavInternal(_ref) {
     panelId: _constants.sideNavPanelSplitterId
   });
   var isFlyoutClosed = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'closed' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === undefined;
+  var isExpandedStateDifferentFromInitial = isExpandedOnMobile || isExpandedOnDesktop !== initialIsExpandedOnDesktop;
 
-  // Used to prevent sidebar expand animations from running on the initial render.
-  // Otherwise, the `@starting-style` rule will cause the sidebar to slide in initially.
-  var isFirstRenderRef = (0, _react.useRef)(true);
+  /**
+   * Used to track (between renders) if the expanded state of the side nav has ever changed since mount.
+   *
+   * Cannot rely solely on `isExpandedStateDifferentFromInitial` because the expanded state can go back to the initial state.
+   */
+  var hasExpandedStateChangedRef = (0, _react.useRef)(false);
   (0, _react.useEffect)(function () {
-    if (!isFhsEnabled) {
+    if (hasExpandedStateChangedRef.current) {
       return;
     }
-    if (isFirstRenderRef.current) {
-      isFirstRenderRef.current = false;
+    if (isExpandedStateDifferentFromInitial) {
+      hasExpandedStateChangedRef.current = true;
     }
-  }, [isFhsEnabled]);
+  }, [isExpandedStateDifferentFromInitial]);
+
+  /**
+   * If the expanded state of the side nav has ever changed since mount.
+   *
+   * Used to prevent sidebar expand animations from running on the initial load.
+   * Otherwise, the `@starting-style` rule will cause the sidebar to slide in initially.
+   */
+  var hasExpandedStateChanged = isExpandedStateDifferentFromInitial || hasExpandedStateChangedRef.current;
 
   // This is only used for the regular expand and collapse animations, not the flyout animations.
-  var shouldShowSidebarToggleAnimation =
+  var shouldShowSidebarToggleAnimation = isFhsEnabled &&
   // We do not apply the animation styles on the initial render, as the `@starting-style` rule will cause the sidebar to
   // slide in initially.
-  !isFirstRenderRef.current &&
+  hasExpandedStateChanged &&
   // We also do not apply the animation styles if the side nav is in flyout mode to make sure we don't override flyout styles.
   // If we instead try to unset the `transform` property in the flyout styles using `transform: initial`, it results in the entire
   // flyout animation being disabled.
@@ -758,7 +770,7 @@ function SideNavInternal(_ref) {
     style: (0, _defineProperty2.default)({}, _constants.sideNavVar, clampedWidth),
     ref: mergedRef,
     "data-testid": testId,
-    className: (0, _runtime.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])
+    className: (0, _runtime.ax)([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && 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(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.sideNavLiveWidthVar,
     value: "0px",

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

@@ -119,10 +119,10 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-    if ((0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+    if (isFhsEnabled) {
       openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
     }
-  }, [onClick, isSideNavExpanded, toggleVisibility, openLayerObserver]);
+  }, [isFhsEnabled, isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
   var handlePointerEnter = (0, _react.useCallback)(function () {
     if (!(0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_instrumentation_1')) {
       return;

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

@@ -700,24 +700,36 @@ function SideNavInternal({
     panelId: sideNavPanelSplitterId
   });
   const isFlyoutClosed = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'closed' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === undefined;
+  const isExpandedStateDifferentFromInitial = isExpandedOnMobile || isExpandedOnDesktop !== initialIsExpandedOnDesktop;
 
-  // Used to prevent sidebar expand animations from running on the initial render.
-  // Otherwise, the `@starting-style` rule will cause the sidebar to slide in initially.
-  const isFirstRenderRef = useRef(true);
+  /**
+   * Used to track (between renders) if the expanded state of the side nav has ever changed since mount.
+   *
+   * Cannot rely solely on `isExpandedStateDifferentFromInitial` because the expanded state can go back to the initial state.
+   */
+  const hasExpandedStateChangedRef = useRef(false);
   useEffect(() => {
-    if (!isFhsEnabled) {
+    if (hasExpandedStateChangedRef.current) {
       return;
     }
-    if (isFirstRenderRef.current) {
-      isFirstRenderRef.current = false;
+    if (isExpandedStateDifferentFromInitial) {
+      hasExpandedStateChangedRef.current = true;
     }
-  }, [isFhsEnabled]);
+  }, [isExpandedStateDifferentFromInitial]);
+
+  /**
+   * If the expanded state of the side nav has ever changed since mount.
+   *
+   * Used to prevent sidebar expand animations from running on the initial load.
+   * Otherwise, the `@starting-style` rule will cause the sidebar to slide in initially.
+   */
+  const hasExpandedStateChanged = isExpandedStateDifferentFromInitial || hasExpandedStateChangedRef.current;
 
   // This is only used for the regular expand and collapse animations, not the flyout animations.
-  const shouldShowSidebarToggleAnimation =
+  const shouldShowSidebarToggleAnimation = isFhsEnabled &&
   // We do not apply the animation styles on the initial render, as the `@starting-style` rule will cause the sidebar to
   // slide in initially.
-  !isFirstRenderRef.current &&
+  hasExpandedStateChanged &&
   // We also do not apply the animation styles if the side nav is in flyout mode to make sure we don't override flyout styles.
   // If we instead try to unset the `transform` property in the flyout styles using `transform: initial`, it results in the entire
   // flyout animation being disabled.
@@ -748,7 +760,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, 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])
+    className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && 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

@@ -103,10 +103,10 @@ export const SideNavToggleButton = ({
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-    if (fg('navx-full-height-sidebar')) {
+    if (isFhsEnabled) {
       openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.closeLayers();
     }
-  }, [onClick, isSideNavExpanded, toggleVisibility, openLayerObserver]);
+  }, [isFhsEnabled, isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
   const handlePointerEnter = useCallback(() => {
     if (!fg('platform_dst_nav4_fhs_instrumentation_1')) {
       return;

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

@@ -703,24 +703,36 @@ function SideNavInternal(_ref) {
     panelId: sideNavPanelSplitterId
   });
   var isFlyoutClosed = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'closed' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === undefined;
+  var isExpandedStateDifferentFromInitial = isExpandedOnMobile || isExpandedOnDesktop !== initialIsExpandedOnDesktop;
 
-  // Used to prevent sidebar expand animations from running on the initial render.
-  // Otherwise, the `@starting-style` rule will cause the sidebar to slide in initially.
-  var isFirstRenderRef = useRef(true);
+  /**
+   * Used to track (between renders) if the expanded state of the side nav has ever changed since mount.
+   *
+   * Cannot rely solely on `isExpandedStateDifferentFromInitial` because the expanded state can go back to the initial state.
+   */
+  var hasExpandedStateChangedRef = useRef(false);
   useEffect(function () {
-    if (!isFhsEnabled) {
+    if (hasExpandedStateChangedRef.current) {
       return;
     }
-    if (isFirstRenderRef.current) {
-      isFirstRenderRef.current = false;
+    if (isExpandedStateDifferentFromInitial) {
+      hasExpandedStateChangedRef.current = true;
     }
-  }, [isFhsEnabled]);
+  }, [isExpandedStateDifferentFromInitial]);
+
+  /**
+   * If the expanded state of the side nav has ever changed since mount.
+   *
+   * Used to prevent sidebar expand animations from running on the initial load.
+   * Otherwise, the `@starting-style` rule will cause the sidebar to slide in initially.
+   */
+  var hasExpandedStateChanged = isExpandedStateDifferentFromInitial || hasExpandedStateChangedRef.current;
 
   // This is only used for the regular expand and collapse animations, not the flyout animations.
-  var shouldShowSidebarToggleAnimation =
+  var shouldShowSidebarToggleAnimation = isFhsEnabled &&
   // We do not apply the animation styles on the initial render, as the `@starting-style` rule will cause the sidebar to
   // slide in initially.
-  !isFirstRenderRef.current &&
+  hasExpandedStateChanged &&
   // We also do not apply the animation styles if the side nav is in flyout mode to make sure we don't override flyout styles.
   // If we instead try to unset the `transform` property in the flyout styles using `transform: initial`, it results in the entire
   // flyout animation being disabled.
@@ -748,7 +760,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, 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])
+    className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && 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

@@ -110,10 +110,10 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-    if (fg('navx-full-height-sidebar')) {
+    if (isFhsEnabled) {
       openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
     }
-  }, [onClick, isSideNavExpanded, toggleVisibility, openLayerObserver]);
+  }, [isFhsEnabled, isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
   var handlePointerEnter = useCallback(function () {
     if (!fg('platform_dst_nav4_fhs_instrumentation_1')) {
       return;

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "5.8.2",
+	"version": "5.9.1",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -70,7 +70,7 @@
 		"@atlaskit/avatar": "^25.5.0",
 		"@atlaskit/button": "^23.6.0",
 		"@atlaskit/css": "^0.16.0",
-		"@atlaskit/ds-lib": "^5.2.0",
+		"@atlaskit/ds-lib": "^5.3.0",
 		"@atlaskit/icon": "^29.0.0",
 		"@atlaskit/layering": "^3.4.0",
 		"@atlaskit/logo": "^19.9.0",
@@ -80,7 +80,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^16.2.0",
-		"@atlaskit/tokens": "^8.1.0",
+		"@atlaskit/tokens": "^8.2.0",
 		"@atlaskit/tooltip": "^20.10.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -102,7 +102,7 @@
 		"@atlaskit/banner": "^14.0.0",
 		"@atlaskit/breadcrumbs": "^15.3.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
-		"@atlaskit/form": "^14.2.0",
+		"@atlaskit/form": "^14.3.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/lozenge": "^13.1.0",