@atlaskit/navigation-system 11.2.2 → 11.3.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @atlassian/navigation-system
 
+## 11.3.0
+
+### Minor Changes
+
+- [`682d5c04a6f3b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/682d5c04a6f3b) -
+  Disable Full Height Sidebar (FHS) as part of the FHS rollback.
+
+  `@atlaskit/navigation-system`:
+  - `useIsFhsEnabled` now always returns `false`, and `IsFhsEnabledProvider` is a passthrough that
+    ignores its `value` prop. Both are deprecated (along with `IsCustomIsFhsEnabledContext`) and
+    will be removed in a future release once all consumers have removed them.
+  - Removed the internal FHS-only code paths: full height side nav layering, side nav panel splitter
+    portalling into the top nav, hiding the panel splitter when popups are open, FHS top nav /
+    banner / logo / search styles, and the FHS-only side nav expand/collapse animations.
+  - Removed the `navx-full-height-sidebar` feature gate.
+  - `Search` (top nav) now uses the `motion.button.*` tokens for its hover and pressed transitions,
+    matching the other top nav buttons.
+
+  `@atlassian/global-side-navigation`: removed the `navx-full-height-sidebar` feature gate
+  registration.
+
+  `@atlassian/search-page`: removed the FHS-only open layer observer integration from Quick Find,
+  and the now-unused `@atlaskit/layering` dependency.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.2.3
+
+### Patch Changes
+
+- [`21c13edb525f8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/21c13edb525f8) -
+  Inline the ChatPanel width custom-property name and overlay z-index as checked literals so its
+  styles can be statically extracted by Atlaspack. No runtime change.
+
 ## 11.2.2
 
 ### Patch Changes

package/dist/cjs/components/skip-links/skip-link.js

@@ -10,7 +10,7 @@ require("./skip-link.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _fg = require("@atlaskit/platform-feature-flags/fg");
-var _compiled = require("@atlaskit/primitives/compiled");
+var _anchor = require("@atlaskit/primitives/compiled/anchor");
 var _focusElement = require("./focus-element");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
@@ -75,7 +75,7 @@ var SkipLink = exports.SkipLink = function SkipLink(_ref) {
   }, [id, onBeforeNavigate, navigate]);
   return /*#__PURE__*/_react.default.createElement("li", {
     className: (0, _runtime.ax)([styles.skipLinkListItem, (0, _fg.fg)('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListItemNew])
-  }, /*#__PURE__*/_react.default.createElement(_compiled.Anchor
+  }, /*#__PURE__*/_react.default.createElement(_anchor.Anchor
   /**
    * It looks like Safari handles link clicks during `pointerdown` unless it has an explicit `tabIndex={0}` :/
    *

package/dist/cjs/components/skip-links/skip-links-container.js

@@ -14,7 +14,7 @@ var _runtime = require("@compiled/react/runtime");
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _fg = require("@atlaskit/platform-feature-flags/fg");
-var _compiled = require("@atlaskit/primitives/compiled");
+var _text = require("@atlaskit/primitives/compiled/text");
 var _skipLink = require("./skip-link");
 var _skipLinksPopup = require("./skip-links-popup");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -119,7 +119,7 @@ function SkipLinksContainer(_ref) {
     onKeyDown: closeOnEscape,
     "data-testid": testId ? "".concat(testId, "--skip-links-container") : undefined,
     className: (0, _runtime.ax)([styles.root])
-  }, !isEmptyLabel && /*#__PURE__*/React.createElement(_compiled.Text, {
+  }, !isEmptyLabel && /*#__PURE__*/React.createElement(_text.Text, {
     weight: "bold",
     testId: testId ? "".concat(testId, "--skip-links-container--label") : undefined
   }, label), /*#__PURE__*/React.createElement("ol", {

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

@@ -8,7 +8,7 @@ var _react = require("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.
  */
 var IsCustomIsFhsEnabledContext = exports.IsCustomIsFhsEnabledContext = /*#__PURE__*/(0, _react.createContext)(false);

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

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.IsFhsEnabledContext = void 0;
 var _react = require("react");
-var _fg = require("@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
  */
-var IsFhsEnabledContext = exports.IsFhsEnabledContext = /*#__PURE__*/(0, _react.createContext)(function () {
-  return (0, _fg.fg)('navx-full-height-sidebar');
-});
+var IsFhsEnabledContext = exports.IsFhsEnabledContext = /*#__PURE__*/(0, _react.createContext)(false);

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

@@ -1,29 +1,25 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.IsFhsEnabledProvider = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _isCustomIsFhsEnabledContext = require("./is-custom-is-fhs-enabled-context");
-var _isFhsEnabledContext = require("./is-fhs-enabled-context");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var _react = _interopRequireDefault(require("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
  */
 var IsFhsEnabledProvider = exports.IsFhsEnabledProvider = function IsFhsEnabledProvider(_ref) {
-  var children = _ref.children,
-    value = _ref.value;
-  var isCustomIsFhsEnabled = (0, _react.useContext)(_isCustomIsFhsEnabledContext.IsCustomIsFhsEnabledContext);
-  if (isCustomIsFhsEnabled) {
-    throw new Error('A custom value for IsFhsEnabledContext has already been provided');
-  }
-  return /*#__PURE__*/_react.default.createElement(_isCustomIsFhsEnabledContext.IsCustomIsFhsEnabledContext.Provider, {
-    value: true
-  }, /*#__PURE__*/_react.default.createElement(_isFhsEnabledContext.IsFhsEnabledContext.Provider, {
-    value: value
-  }, children));
-};
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+};
+
+/**
+ * @deprecated Full height sidebar (FHS) has been rolled back. `value` is ignored.
+ */

package/dist/cjs/ui/fhs-rollout/use-is-fhs-enabled.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useIsFhsEnabled = void 0;
-var _react = require("react");
-var _isFhsEnabledContext = require("./is-fhs-enabled-context");
 /**
  * __Use is fhs enabled__
  *
- * Retrieves is FHS enabled.
+ * @deprecated Full height sidebar (FHS) has been rolled back. This hook always returns `false`.
+ * Remove usages of it (treat it as `false`); 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
  */
 var useIsFhsEnabled = exports.useIsFhsEnabled = function useIsFhsEnabled() {
-  var isFhsEnabled = (0, _react.useContext)(_isFhsEnabledContext.IsFhsEnabledContext);
-  return typeof isFhsEnabled === 'boolean' ? isFhsEnabled : isFhsEnabled();
+  return false;
 };

package/dist/cjs/ui/page-layout/banner.compiled.css

@@ -1,6 +1,5 @@
 ._nd5ldkfm{grid-area:banner}._152tidpf{inset-block-start:0}
 ._18m915vq{overflow-y:hidden}
-._1pby11wp{z-index:3}
 ._1pbyegat{z-index:4}
 ._1reo15vq{overflow-x:hidden}
 ._4t3iutvi{height:var(--n_bnrM)}

package/dist/cjs/ui/page-layout/banner.js

@@ -12,7 +12,6 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _useSkipLinkInternal = require("../../context/skip-links/use-skip-link-internal");
-var _useIsFhsEnabled = require("../fhs-rollout/use-is-fhs-enabled");
 var _constants = require("./constants");
 var _dangerouslyHoistCssVarToDocumentRoot = require("./dangerously-hoist-css-var-to-document-root");
 var _hoistCssVarToLocalGrid = require("./hoist-css-var-to-local-grid");
@@ -20,8 +19,7 @@ var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
 var _useLayoutId = require("./use-layout-id");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
-  root: "_nd5ldkfm _1reo15vq _18m915vq _4t3iutvi _152tidpf _kqsw1if8 _1pbyegat",
-  fullHeightSidebar: "_1pby11wp"
+  root: "_nd5ldkfm _1reo15vq _18m915vq _4t3iutvi _152tidpf _kqsw1if8 _1pbyegat"
 };
 
 /**
@@ -42,7 +40,6 @@ function Banner(_ref) {
   var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
   });
-  var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
 
   /**
    * Don't show the skip link if the slot has 0 height.
@@ -57,7 +54,7 @@ function Banner(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     "data-layout-slot": true,
-    className: (0, _runtime.ax)([styles.root, isFhsEnabled && styles.fullHeightSidebar, xcss]),
+    className: (0, _runtime.ax)([styles.root, xcss]),
     "data-testid": testId
   }, /*#__PURE__*/React.createElement(_hoistCssVarToLocalGrid.HoistCssVarToLocalGrid, {
     variableName: _constants.bannerMountedVar,

package/dist/cjs/ui/page-layout/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topNavMountedVar = exports.sideNavVar = exports.sideNavPanelSplitterId = exports.sideNavLiveWidthVar = exports.ribbonVar = exports.panelVar = exports.panelPanelSplitterId = exports.openLayerObserverTopNavStartNamespace = exports.openLayerObserverTopNavMiddleNamespace = exports.openLayerObserverTopNavEndNamespace = exports.openLayerObserverSideNavNamespace = exports.mainMinimumWidthVar = exports.localSlotLayers = exports.contentInsetBlockStart = exports.contentHeightWhenFixed = exports.chatPanelVar = exports.chatPanelLiveWidthVar = exports.bannerMountedVar = exports.asideVar = exports.asidePanelSplitterId = exports.UNSAFE_topNavVar = exports.UNSAFE_sideNavLayoutVar = exports.UNSAFE_ribbonVar = exports.UNSAFE_panelLayoutVar = exports.UNSAFE_bannerVar = exports.UNSAFE_asideLayoutVar = exports.UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = void 0;
+exports.topNavMountedVar = exports.sideNavVar = exports.sideNavPanelSplitterId = exports.sideNavLiveWidthVar = exports.ribbonVar = exports.panelVar = exports.panelPanelSplitterId = exports.openLayerObserverTopNavMiddleNamespace = exports.openLayerObserverTopNavEndNamespace = exports.openLayerObserverSideNavNamespace = exports.mainMinimumWidthVar = exports.localSlotLayers = exports.contentInsetBlockStart = exports.contentHeightWhenFixed = exports.chatPanelVar = exports.chatPanelLiveWidthVar = exports.bannerMountedVar = exports.asideVar = exports.asidePanelSplitterId = exports.UNSAFE_topNavVar = exports.UNSAFE_sideNavLayoutVar = exports.UNSAFE_ribbonVar = exports.UNSAFE_panelLayoutVar = exports.UNSAFE_bannerVar = exports.UNSAFE_asideLayoutVar = exports.UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = void 0;
 /**
  * These variables are shared across the different page layout slots.
  * This violates the [UI styling standard](https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-imported-style-values/usage).
@@ -65,23 +65,11 @@ var localSlotLayers = exports.localSlotLayers = {
   // Chat overlays the app, including TopNav and SideNav, below the banner.
   chatPanelOverlay: 5,
   ribbon: 4,
-  // The side nav panel splitter is layered above the top nav when FHS is enabled.
-  // It has the same z-index value, but is rendered after the top nav in the DOM so is stacked above.
-  sideNavPanelSplitterFHS: 4,
   topBar: 4,
   banner: 4,
-  // When FHS is enabled, the side nav is layered below the top nav,
-  // but above the panel
-  bannerFHS: 3,
-  topNavFHS: 3,
   sideNav: 2,
   panelSmallViewports: 1
 };
 var openLayerObserverSideNavNamespace = exports.openLayerObserverSideNavNamespace = 'side-nav';
-// We have separate OpenLayerObserver namespaces for each top nav layout area, instead of a single namespace for the entire top nav,
-// as we need to know if there are open layers in TopNavStart specifically to prevent the side nav from peeking.
-// The OpenLayerObserver doesn't support nested namespaces. We could update it, but for now it's simple enough to just have separate
-// namespaces.
-var openLayerObserverTopNavStartNamespace = exports.openLayerObserverTopNavStartNamespace = 'top-nav-start';
 var openLayerObserverTopNavMiddleNamespace = exports.openLayerObserverTopNavMiddleNamespace = 'top-nav-middle';
 var openLayerObserverTopNavEndNamespace = exports.openLayerObserverTopNavEndNamespace = 'top-nav-end';

package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter.compiled.css

@@ -31,7 +31,6 @@
 ._vp7g6x5g:focus-within{color:var(--ds-text-selected,#1868db)}
 ._30l31ihb:hover{color:var(--ds-border-bold,#7d818a)}
 ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
-._d0al11mm:hover{cursor:col-resize}
 ._d0aluf7j:hover{cursor:ew-resize}
 ._1gglglyw:active{transition:none}
 ._9h8h12zz:active{color:var(--ds-link-pressed,#1558bc)}

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

@@ -30,7 +30,6 @@ var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/utils/prevent
 var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
 var _TooltipContainer = _interopRequireDefault(require("@atlaskit/tooltip/TooltipContainer"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden/visually-hidden"));
-var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _constants = require("../constants");
 var _convertResizeBoundToPixels = require("./convert-resize-bound-to-pixels");
 var _getPercentageWithinPixelBounds = require("./get-percentage-within-pixel-bounds");
@@ -55,8 +54,7 @@ var containerStyles = {
 };
 var grabAreaStyles = {
   root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _1oec6ebc _1lww188d _6fl41ytf _k8m01ylx _d0aluf7j _vp7g6x5g _30l36x5g _1gglglyw _9h8h12zz",
-  rootFinesse: "_vp7g1ihb _30l31ihb _9h8hq98m",
-  fullHeightSidebar: "_d0al11mm"
+  rootFinesse: "_vp7g1ihb _30l31ihb _9h8hq98m"
 };
 var lineStyles = {
   root: "_kqswstnw _1e0c1ule _1bsb1l7b _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
@@ -155,7 +153,6 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
     position = _ref3.position,
     tooltipContent = _ref3.tooltipContent,
     shortcut = _ref3.shortcut;
-  var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
   var splitterRef = (0, _react.useRef)(null);
   var labelId = (0, _useId.useId)();
   // Separate state used for the input range width to remove the UI's dependency on the "persisted" layout state value being updated
@@ -465,7 +462,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
     ref: splitterRef,
     "data-testid": testId,
     onDoubleClick: onDoubleClick,
-    className: (0, _runtime.ax)([grabAreaStyles.root, (0, _fg.fg)('platform-dst-tokens-finesse') && grabAreaStyles.rootFinesse, isFhsEnabled && grabAreaStyles.fullHeightSidebar])
+    className: (0, _runtime.ax)([grabAreaStyles.root, (0, _fg.fg)('platform-dst-tokens-finesse') && grabAreaStyles.rootFinesse])
   }, /*#__PURE__*/React.createElement(_visuallyHidden.default, null, /*#__PURE__*/React.createElement("input", {
     type: "range",
     value: rangeInputValue,

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

@@ -6,73 +6,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SideNavPanelSplitter = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
-var _useOpenLayerObserver = require("@atlaskit/layering/use-open-layer-observer");
-var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _constants = require("../constants");
 var _useToggleSideNav = require("../side-nav/use-toggle-side-nav");
 var _onDoubleClickContext = require("./on-double-click-context");
 var _panelSplitter = require("./panel-splitter");
 var _panelSplitterContext = require("./panel-splitter-context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-/**
- * Namespaces to check for open layers that would interfere with the panel splitter.
- *
- * Placed outside the component for stability, as the list is used as an effect dependency.
- */
-var openLayerNamespacesToCheck = [
-// The side nav panel splitter is layered above the side nav, so needs to be disabled when there are open popups in the side nav.
-_constants.openLayerObserverSideNavNamespace,
-// The side nav panel splitter is layered above the top nav, so needs to be disabled when there are open popups in the top nav.
-_constants.openLayerObserverTopNavStartNamespace, _constants.openLayerObserverTopNavMiddleNamespace, _constants.openLayerObserverTopNavEndNamespace];
-
-/**
- * Returns whether there are any open popups in the side nav or top nav
- */
-function useHasOpenPopupsInSideNavOrTopNav() {
-  var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
-  var openLayerObserver = (0, _useOpenLayerObserver.useOpenLayerObserver)();
-  // Setting the initial state to false, as it is unlikely that there would be any open popups when the app starts.
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    hasOpenPopups = _useState2[0],
-    setHasOpenPopups = _useState2[1];
-  (0, _react.useEffect)(function () {
-    if (!openLayerObserver || !isFhsEnabled) {
-      return;
-    }
-    function updateState() {
-      if (!openLayerObserver) {
-        return;
-      }
-      var hasAnyOpenLayers = openLayerNamespacesToCheck.some(function (namespace) {
-        return openLayerObserver.getCount({
-          namespace: namespace,
-          type: 'popup'
-        }) > 0;
-      });
-      setHasOpenPopups(hasAnyOpenLayers);
-    }
-
-    // Initial check. We do this _in case_ a popup is already open when the component mounts.
-    updateState();
-
-    // Subscribe to each namespace
-    var cleanups = openLayerNamespacesToCheck.map(function (namespace) {
-      return openLayerObserver.onChange(updateState, {
-        namespace: namespace
-      });
-    });
-    return function cleanupHook() {
-      cleanups.forEach(function (cleanup) {
-        return cleanup();
-      });
-    };
-  }, [isFhsEnabled, openLayerObserver]);
-  return hasOpenPopups;
-}
 /**
  * _SideNavPanelSplitter_
  *
@@ -99,15 +40,6 @@ var SideNavPanelSplitter = exports.SideNavPanelSplitter = function SideNavPanelS
   var toggleSideNav = (0, _useToggleSideNav.useToggleSideNav)({
     trigger: 'double-click'
   });
-  var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
-
-  // The logic and state for disabling the panel splitter when there are open popups
-  // in the side nav or top nav is being placed here, instead of in `SideNav`, to prevent
-  // re-rendering the side nav anytime the number of open popups changes.
-  var hasOpenLayersInSideNavOrTopNav = useHasOpenPopupsInSideNavOrTopNav();
-  if (hasOpenLayersInSideNavOrTopNav && isFhsEnabled) {
-    return null;
-  }
   return /*#__PURE__*/_react.default.createElement(_onDoubleClickContext.OnDoubleClickContext.Provider, {
     value: shouldCollapseOnDoubleClick ? toggleSideNav : undefined
   }, /*#__PURE__*/_react.default.createElement(_panelSplitter.PanelSplitter, {

package/dist/cjs/ui/page-layout/ribbon.js

@@ -18,15 +18,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var localSlotLayersStatic = {
   chatPanelOverlay: 5,
   ribbon: 4,
-  // The side nav panel splitter is layered above the top nav when FHS is enabled.
-  // It has the same z-index value, but is rendered after the top nav in the DOM so is stacked above.
-  sideNavPanelSplitterFHS: 4,
   topBar: 4,
   banner: 4,
-  // When FHS is enabled, the side nav is layered below the top nav,
-  // but above the panel
-  bannerFHS: 3,
-  topNavFHS: 3,
   sideNav: 2,
   panelSmallViewports: 1
 };

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

@@ -1,7 +1,6 @@
 /* side-nav-content.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -10,8 +9,6 @@ exports.SideNavBody = void 0;
 require("./side-nav-content.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
-var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
-var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * The main content of the side nav, filling up the middle section. It acts as a scroll container.
@@ -29,13 +26,8 @@ var styles = {
 function _SideNavContent(_ref, forwardedRef) {
   var children = _ref.children,
     testId = _ref.testId;
-  var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
-  var internalRef = (0, _react.useRef)(null);
-  var mergedRef = (0, _react.useMemo)(function () {
-    return (0, _mergeRefs.default)([internalRef, forwardedRef]);
-  }, [forwardedRef]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    ref: isFhsEnabled ? mergedRef : forwardedRef,
+    ref: forwardedRef,
     "data-testid": testId,
     className: (0, _runtime.ax)([styles.scrollContainer])
   }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/cjs/ui/page-layout/side-nav/side-nav.compiled.css

@@ -1,6 +1,5 @@
 ._191wglyw{border-inline-start:none}
 ._t51zglyw{border-inline-end:none}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
-._15yekb7n{--animation-direction:1}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1bah1yb4{justify-content:space-between}
 ._1bsb1ego{width:min(90%,20pc)}
@@ -9,24 +8,18 @@
 ._1e0cglyw{display:none}
 ._1p2s1vfh{--exit-animation:var(--ds-sidenav-exit-left,200ms cubic-bezier(0,0.4,0,1) SlideOut100PercentLeft)}
 ._1pbycs5v{z-index:2}
-._1pbyegat{z-index:4}
 ._2lx21bp4{flex-direction:column}
 ._4t3i1osq{height:100%}
 ._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._cjprp6j8{--enter-animation:var(--ds-sidenav-enter-left,250ms cubic-bezier(0,0.4,0,1) SlideIn100PercentLeft)}
 ._kqsw1if8{position:sticky}
-._kqsw1n9t{position:fixed}
-._t9ectl5p{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px))))}
-._u7coidpf{inset-block-end:0}
 ._vchhusvi{box-sizing:border-box}
 [dir=rtl] ._1jq41dy6{--enter-animation:var(--ds-sidenav-enter-right,250ms cubic-bezier(0,0.4,0,1) SlideIn100PercentRight)}
 [dir=rtl] ._2qe0jwwr{--exit-animation:var(--ds-sidenav-exit-right,200ms cubic-bezier(0,0.4,0,1) SlideOut100PercentRight)}
-[dir=rtl] ._65m41mrw{--animation-direction:-1}
-@media (prefers-reduced-motion:no-preference){._10t81t0s{transition-property:display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpi9qs{transition-duration:var(--ds-duration-medium,.2s)}._10t88iot{transition-property:transform,display}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._k1affm5y{animation:var(--exit-animation)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._k1af10ed{animation:var(--enter-animation)}}
+@media (prefers-reduced-motion:no-preference){._10t81t0s{transition-property:display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpi9qs{transition-duration:var(--ds-duration-medium,.2s)}._1lh81gzg{grid-area:main}._k1affm5y{animation:var(--exit-animation)}._k1af10ed{animation:var(--enter-animation)}}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
-@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._p0az1elq{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px)) - var(--ds-border-width, 1px)))}._cpcf1gzg._cpcf1gzg{grid-area:main}._6kttglyw._6kttglyw{border-inline-end:none}._w8v11bhr._w8v11bhr{background-color:var(--ds-surface-overlay,#fff)}._1jug130s._1jug130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._qilnk0mc{grid-area:side-nav}._p5clia51{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
-@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._17ly1wzp{transition-property:grid-area,display}._hjoi1wsm{transition-duration:var(--ds-duration-instant,0ms),var(--ds-duration-medium,.2s)}._1wxo1cio{transition-delay:19ms,var(--ds-duration-instant,0ms)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._1xpz1gzg{grid-area:main}}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}._17ly1q8v{transition-property:grid-area}._hjoi147i{transition-duration:var(--ds-duration-instant,0ms)}._1wxo4so3{transition-delay:24ms}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
-@media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
+@media (min-width:64rem){._cpcf1gzg._cpcf1gzg{grid-area:main}._6kttglyw._6kttglyw{border-inline-end:none}._w8v11bhr._w8v11bhr{background-color:var(--ds-surface-overlay,#fff)}._1jug130s._1jug130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._qilnk0mc{grid-area:side-nav}._p5clia51{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
+@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._17ly1wzp{transition-property:grid-area,display}._hjoi1wsm{transition-duration:var(--ds-duration-instant,0ms),var(--ds-duration-medium,.2s)}._1wxo1cio{transition-delay:19ms,var(--ds-duration-instant,0ms)}@starting-style{._1xpz1gzg{grid-area:main}}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}._17ly1q8v{transition-property:grid-area}._hjoi147i{transition-duration:var(--ds-duration-instant,0ms)}._1wxo4so3{transition-delay:24ms}}
 @media not (min-width:64rem){._89fi1b6c{grid-area:main/aside/aside/aside}}
 @supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xci10ed{animation:var(--enter-animation)}._1tpv1mzy{transition-duration:var(--ds-duration-long,.25s)}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xcifm5y{animation:var(--exit-animation)}._1tpvi9qs{transition-duration:var(--ds-duration-medium,.2s)}._sylc1a5r{transition-behavior:allow-discrete}}}