@atlaskit/navigation-system 6.0.0 → 6.2.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlassian/navigation-system
 
+## 6.2.0
+
+### Minor Changes
+
+- [`7719c436631e8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7719c436631e8) -
+  The feature gate `platform-dst-side-nav-layering-fixes` has been cleaned up.
+  - Layers inside the side nav that are rendered to parent (`shouldRenderToParent`) will be layered
+    below the top nav and banner.
+  - Refactors have been made to the positioning and render location of the side nav panel splitter.
+
+### Patch Changes
+
+- [`ff38389affe15`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ff38389affe15) -
+  Tidies the react-uid => react.useId() feature gates to use concurrent safe ids n
+- Updated dependencies
+
+## 6.1.0
+
+### Minor Changes
+
+- [`7ae800ebd066d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7ae800ebd066d) -
+  Cleans up the `platform_dst_nav4_side_nav_toggle_button_slot` feature gate. The
+  `sideNavToggleButton` prop on `TopNavStart` is now required, but can be explicitly set to `null`.
+
 ## 6.0.0
 
 ### Major Changes

package/constellation/index/examples.mdx

@@ -1,17 +1,15 @@
 import SectionMessage from '@atlaskit/section-message';
 
-Navigation is how users get around a site to complete their tasks. The navigation-system package
+Navigation is how users get around a site to complete their tasks. The `navigation-system` package
 provides the following:
 
 - [Layout](/components/navigation-system/layout) defines a page’s structure and the areas for
   navigation and content.
-- [Side nav items](/components/navigation-system/side-nav-items) create different sections, actions,
-  and links in the side nav.
 - [Top nav items](/components/navigation-system/top-nav-items) provide familiar actions and
   utilities in the top nav.
 
-For ready-made navigation experiences see
-[navigation guidelines (Atlassians only)](https://hello.atlassian.net/wiki/spaces/GLOBALNAV/pages/5104144812/Nav4+resources+for+makers).
+For more navigation components, see
+[navigation guidelines (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE).
 
 <SectionMessage title="Required: Compiled CSS configuration">
 	<p>
@@ -29,14 +27,10 @@ For ready-made navigation experiences see
 
 ## Examples
 
-- <a href="https://go.atlassian.com/nav4-interactive-example" target="_blank">
-  	Full screen interactive example
-  </a>
-  (only available for Atlassian employees at this stage).
+See the full screen [interactive example](https://go.atlassian.com/nav4-interactive-example).
 
 ## Related
 
 - [Layout](/components/navigation-system/layout)
-- [Side nav items](/components/navigation-system/side-nav-items)
 - [Top nav items](/components/navigation-system/top-nav-items)
-- [Navigation experience guidelines (Atlassians only)](https://hello.atlassian.net/wiki/spaces/GLOBALNAV/pages/5104144812/Nav4+resources+for+makers)
+- [Navigation resources (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE)

package/constellation/layout/examples.mdx

@@ -13,7 +13,7 @@ import { ToggleSideNavKeyboardShortcutExample } from '../../examples/constellati
 import { PageLayoutDiagram } from './diagram';
 
 The full page layout with all areas rendered has the structure depicted below, or see the
-[interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
+[interactive example](https://go.atlassian.com/nav4-interactive-example).
 
 <PageLayoutDiagram />
 
@@ -60,7 +60,8 @@ See the [custom theming](/components/navigation-system/layout/custom-theming) ta
 
 ### Side nav
 
-- Use the `SideNav` to render [side nav items](/components/navigation-system/side-nav-items). It
+- Use the `SideNav` to
+  render [side nav items](https://atlaskit.atlassian.com/packages/navigation/side-nav-items). It
   will show on the left of the screen. The default width of the side nav is 320px.
 - Use the [side nav slots](#side-nav-slots) to position content within the side nav.
 - The side nav is collapsable and expandable, resizable, responsive, and offers flyout behaviour.

package/constellation/layout/usage.mdx

@@ -39,8 +39,8 @@ When applying components to the navigational areas,
 		</ol>
 	</li>
 	<li>
-		<strong>Side nav:</strong> Use to display{' '}
-		<a href="/components/navigation-system/side-nav-items">side nav items</a>. Is resizable and
+		<strong>Side nav:</strong> Use to display [side nav
+		items](https://atlaskit.atlassian.com/packages/navigation/side-nav-items). Is resizable and
 		collapsible.
 		<ol type="a" start="4">
 			<li>
@@ -123,7 +123,6 @@ The main difference between Aside, Panel and Modal dialog is their behaviours:
 ## Related
 
 - [Page header](/components/page-header)
-- [Side nav items](/components/navigation-system/side-nav-items)
 - [Top nav items](/components/navigation-system/top-nav-items)
-- [Navigation experience guidelines (Atlassians only)](https://hello.atlassian.net/wiki/spaces/navx/pages/5104144812)
+- [Navigation resources (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE)
 - [Preview panel (Atlassians only)](https://atlaskit-website-staging.stg-east.frontend.public.atl-paas.net/#/packages/navigation/preview-panel)

package/constellation/top-nav-items/examples.mdx

@@ -31,8 +31,8 @@ area. They are left-aligned in the following order:
 
 - SideNavToggleButton - Opens and closes the
   [side nav](/components/navigation-system/layout/examples#side-nav).
-- AppSwitcher - Use to open and close an app switcher.
-  [See navigation experience guidelines (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE)
+- AppSwitcher - Use to open and close an app switcher. See
+  [navigation experience guidelines (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE)
   for recommended platform components.
 
 Use one of the following logo components to orient users and provide a persistent link to the app
@@ -87,8 +87,8 @@ centre-aligned.
 
 - It should consist of a search component and a create component, in that order to maintain the
   correct layout behaviour.
-- We have provided placeholder components.
-  [See navigation experience guidelines (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE)
+- We have provided placeholder components. See
+  [navigation experience guidelines (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE)
   for recommended platform components.
 - Our placeholder search field scales to fill the available area of common actions, up to a maximum
   width of 780px. At `xxs` breakpoints (less than 480px), the search field converts to an icon only
@@ -119,7 +119,7 @@ order:
 - Settings - Use to open and close a settings menu.
 - Profile/Login - A placeholder for an account component.
 
-[See navigation experience guidelines (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE)
+See [navigation experience guidelines (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE)
 for recommended platform components for these buttons, or triggered by these buttons.
 
 At `xs` breakpoints and below (less than 768px), these buttons collapse into a single 'more' button.

package/constellation/top-nav-items/usage.mdx

@@ -77,5 +77,4 @@ navigation follows Atlassian patterns consistently,
 ## Related
 
 - [Layout](/components/navigation-system/layout)
-- [Side nav items](/components/navigation-system/side-nav-items)
-- [Navigation experience guidelines (Atlassians only)](https://hello.atlassian.net/wiki/spaces/navx/pages/5104144812)
+- [Navigation resources (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE)

package/dist/cjs/components/badge-container.js

@@ -1,4 +1,4 @@
-/* badge-container.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* badge-container.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/components/list-item.js

@@ -1,4 +1,4 @@
-/* list-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* list-item.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/components/list.js

@@ -1,4 +1,4 @@
-/* list.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* list.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* skip-link.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* skip-link.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -10,7 +10,7 @@ require("./skip-link.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 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); }
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 var styles = {
@@ -108,7 +108,7 @@ var SkipLink = exports.SkipLink = function SkipLink(_ref) {
   }, [id, onBeforeNavigate]);
   return /*#__PURE__*/_react.default.createElement("li", {
     className: (0, _runtime.ax)([styles.skipLinkListItem])
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Anchor
+  }, /*#__PURE__*/_react.default.createElement(_compiled.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

@@ -1,4 +1,4 @@
-/* skip-links-container.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* skip-links-container.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* aside.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* aside.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* banner.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* banner.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -10,7 +10,6 @@ require("./banner.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _skipLinksContext = require("../../context/skip-links/skip-links-context");
 var _useIsFhsEnabled = require("../fhs-rollout/use-is-fhs-enabled");
 var _constants = require("./constants");
@@ -20,7 +19,7 @@ var _idUtils = require("./id-utils");
 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",
-  fullHeightSidebarWithLayeringFixes: "_1pby11wp"
+  fullHeightSidebar: "_1pby11wp"
 };
 
 /**
@@ -54,7 +53,7 @@ function Banner(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     "data-layout-slot": true,
-    className: (0, _runtime.ax)([styles.root, isFhsEnabled && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && styles.fullHeightSidebarWithLayeringFixes, xcss]),
+    className: (0, _runtime.ax)([styles.root, isFhsEnabled && styles.fullHeightSidebar, xcss]),
     "data-testid": testId
   }, /*#__PURE__*/React.createElement(_hoistUtils.HoistCssVarToLocalGrid, {
     variableName: _constants.bannerMountedVar,

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

@@ -57,12 +57,12 @@ var UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_EN
  */
 var localSlotLayers = exports.localSlotLayers = {
   ribbon: 4,
-  // The side nav panel splitter is layered above the top nav when FHS and 'platform-dst-side-nav-layering-fixes' is enabled.
+  // 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 and 'platform-dst-side-nav-layering-fixes' is enabled, the side nav is layered below the top nav,
+  // When FHS is enabled, the side nav is layered below the top nav,
   // but above the panel
   bannerFHS: 3,
   topNavFHS: 3,

package/dist/cjs/ui/page-layout/main/main-sticky-header.js

@@ -1,4 +1,4 @@
-/* main-sticky-header.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* main-sticky-header.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* main.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* main.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* panel-splitter.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* panel-splitter.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -57,8 +57,7 @@ var lineStyles = {
   root: "_kqswstnw _1e0c1ule _1bsb1l7b _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
 };
 var tooltipStyles = {
-  root: "_ahbq196n",
-  fullHeightSidebarWithLayeringFixes: "_1bsb1ris"
+  root: "_ahbq196n _1bsb1ris"
 };
 var panelSplitterDragDataSymbol = Symbol('panel-splitter-drag-data');
 function signPanelSplitterDragData(data) {
@@ -100,7 +99,7 @@ var PanelSplitterTooltip = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
     // Must be statically passed
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides
     ,
-    className: (0, _runtime.ax)([tooltipStyles.root, (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && tooltipStyles.fullHeightSidebarWithLayeringFixes, className])
+    className: (0, _runtime.ax)([tooltipStyles.root, className])
     // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
     ,
 

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PanelSplitterProvider = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _context = require("./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); }
 /**
@@ -39,13 +38,13 @@ var PanelSplitterProvider = exports.PanelSplitterProvider = function PanelSplitt
       position: position,
       panelRef: panelRef,
       isEnabled: isEnabled,
-      portalRef: typeof providedPortalRef !== 'undefined' && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') ? providedPortalRef : portalRef,
+      portalRef: typeof providedPortalRef !== 'undefined' ? providedPortalRef : portalRef,
       shortcut: shortcut
     };
   }, [panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, position, panelRef, isEnabled, providedPortalRef, shortcut]);
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_context.PanelSplitterContext.Provider, {
     value: context
-  }, children), typeof providedPortalRef !== 'undefined' && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') ? null : /*#__PURE__*/_react.default.createElement("div", {
+  }, children), typeof providedPortalRef !== 'undefined' ? null : /*#__PURE__*/_react.default.createElement("div", {
     ref: portalRef
   }));
 };

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

@@ -10,7 +10,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _constants = require("../constants");
 var _useToggleSideNav = require("../side-nav/use-toggle-side-nav");
@@ -40,7 +39,7 @@ function useHasOpenPopupsInSideNavOrTopNav() {
     hasOpenPopups = _useState2[0],
     setHasOpenPopups = _useState2[1];
   (0, _react.useEffect)(function () {
-    if (!openLayerObserver || !isFhsEnabled || !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes')) {
+    if (!openLayerObserver || !isFhsEnabled) {
       return;
     }
     function updateState() {
@@ -105,7 +104,7 @@ var SideNavPanelSplitter = exports.SideNavPanelSplitter = function SideNavPanelS
   // 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 && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes')) {
+  if (hasOpenLayersInSideNavOrTopNav && isFhsEnabled) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_context.OnDoubleClickContext.Provider, {

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

@@ -1,4 +1,4 @@
-/* panel.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* panel.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* ribbon.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ribbon.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* root.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* root.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -71,7 +71,7 @@ function Root(_ref) {
     testId: testId
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
-    className: (0, _runtime.ax)([styles.root, isFhsEnabled && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') && styles.sideNavScrollTimeline, (0, _platformFeatureFlags.fg)('platform_dst_nav4_ribbon_slot') && styles.ribbon, xcss]),
+    className: (0, _runtime.ax)([styles.root, isFhsEnabled && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') && styles.sideNavScrollTimeline, (0, _platformFeatureFlags.fg)('platform_dst_nav4_ribbon_slot') && styles.ribbon, xcss]),
     id: gridRootId,
     "data-testid": testId
   }, children)))))))));

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

@@ -1,14 +1,10 @@
-
-._1un9baqb{scroll-timeline:--sNcst block}._16jlkb7n{flex-grow:1}
+._16jlkb7n{flex-grow:1}
 ._18m91wug{overflow-y:auto}
 ._1o9zkb7n{flex-shrink:1}
 ._1q51utpp{padding-block-start:var(--ds-space-150,9pt)}
 ._1reo1wug{overflow-x:auto}
-._21o1gc9s{animation-timeline:--sNcst}
 ._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._i0dlf1ug{flex-basis:0%}
-._j7hq4n8p{animation-name:k1gwhnxc}
 ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
-@keyframes k1gwhnxc{0%{box-shadow:none}0.1%{box-shadow:0 -1px var(--ds-border,#0b120e24)}to{box-shadow:0 -1px var(--ds-border,#0b120e24)}}
 @media (min-width:64rem){@supports (scroll-timeline-axis:block){._1sfqgc9s{scroll-timeline-name:--sNcst}._1q1x1ule{scroll-timeline-axis:block}html:has([data-private-side-nav-header]) ._8pm2gc9s{animation-timeline:--sNcst}html:has([data-private-side-nav-header]) ._1gd94n8p{animation-name:k1gwhnxc}}@supports (scroll-timeline-axis:block){@keyframes k1gwhnxc{0%{box-shadow:none}0.1%{box-shadow:0 -1px var(--ds-border,#0b120e24)}to{box-shadow:0 -1px var(--ds-border,#0b120e24)}}}}

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

@@ -1,4 +1,4 @@
-/* side-nav-content.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* side-nav-content.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -40,10 +40,8 @@ var styles = {
  * whereas this CSS approach should show even before hydration.
  */
 var scrolledBorder = null;
-var scrollTimelineVar = '--sNcst';
 var fullHeightSidebarStyles = {
-  scrollContainer: "_1un9baqb _21o1gc9s _j7hq4n8p",
-  scrollContainerWithLayeringFixes: "_1sfqgc9s _1q1x1ule _8pm2gc9s _1gd94n8p"
+  scrollContainer: "_1sfqgc9s _1q1x1ule _8pm2gc9s _1gd94n8p"
 };
 function _SideNavContent(_ref, forwardedRef) {
   var children = _ref.children,
@@ -58,7 +56,7 @@ function _SideNavContent(_ref, forwardedRef) {
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: isFhsEnabled ? mergedRef : forwardedRef,
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.scrollContainer, isFhsEnabled && !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') && fullHeightSidebarStyles.scrollContainer, isFhsEnabled && isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') && fullHeightSidebarStyles.scrollContainerWithLayeringFixes])
+    className: (0, _runtime.ax)([styles.scrollContainer, isFhsEnabled && isExpandedOnDesktop && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') && fullHeightSidebarStyles.scrollContainer])
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)([styles.paddingContainer])
   }, children));

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

@@ -1,4 +1,4 @@
-/* side-nav-footer.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* side-nav-footer.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* side-nav-header.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* side-nav-header.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -36,7 +36,7 @@ var SideNavHeader = exports.SideNavHeader = function SideNavHeader(_ref) {
      * - If SideNavHeader does not exist, the scroll indicator line is applied to TopNavStart. This ensures
      * the scroll indicator line is visible even when the top nav has a z-index higher than the side nav.
      */
-    "data-private-side-nav-header": (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') ? 'true' : undefined,
+    "data-private-side-nav-header": (0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') ? undefined : 'true',
     className: (0, _runtime.ax)([styles.root])
   }, children);
 };

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

@@ -22,7 +22,7 @@
 [dir=rtl] ._65m41mrw{--animation-direction:-1}
 @media (prefers-reduced-motion:no-preference){._10t88iot{transition-property:transform,display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
-@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._p0az1elq{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px)) - var(--ds-border-width, 1px)))}._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 (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)))}._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}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}}
 @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
 @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}}}

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

@@ -1,4 +1,4 @@
-/* side-nav.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* side-nav.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -84,8 +84,7 @@ var styles = {
   expandAnimationMobile: "_1xq51ku9 _1nu51p9u",
   collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadi1p9u",
   expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2eg1p9u",
-  collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1u1p9u",
-  fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
+  collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1u1p9u"
 };
 var fallbackDefaultWidth = 320;
 var onPeekStartDelayMs = exports.onPeekStartDelayMs = 500;
@@ -691,7 +690,6 @@ function SideNavInternal(_ref) {
     cssVar: panelSplitterResizingVar,
     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;
 
   /**
@@ -749,7 +747,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 && 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 && !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && 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])
   }), /*#__PURE__*/_react.default.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.sideNavLiveWidthVar,
     value: "0px",
@@ -768,21 +766,18 @@ function SideNavInternal(_ref) {
   , /*#__PURE__*/_react.default.createElement(_provider.PanelSplitterProvider, {
     panelId: _constants.sideNavPanelSplitterId,
     panelRef: navRef,
-    portalRef: isFhsEnabled && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') ? panelSplitterPortalTargetRef : undefined,
+    portalRef: isFhsEnabled ? panelSplitterPortalTargetRef : undefined,
     panelWidth: width,
     onCompleteResize: setWidth,
     getResizeBounds: getResizeBounds,
     resizingCssVar: panelSplitterResizingVar
     // Not resizable when in peek (flyout) mode.
     ,
-    isEnabled: (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') ? !isFlyoutVisible :
-    // Old behaviour has a bug: the panel splitter would only be visible on sm screens (between 48rem and 64rem)
-    // if the side nav was expanded on desktop.
-    isExpandedOnDesktop && !isFlyoutVisible,
+    isEnabled: !isFlyoutVisible,
     shortcut: isShortcutEnabled ? _sideNavToggleTooltipKeyboardShortcut.sideNavToggleTooltipKeyboardShortcut : undefined
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)([styles.flexContainer])
-  }, children))), isFhsEnabled && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && /*#__PURE__*/_react.default.createElement("div", {
+  }, children))), isFhsEnabled && /*#__PURE__*/_react.default.createElement("div", {
     ref: panelSplitterPortalTargetRef,
     "data-layout-slot": true,
     style: (0, _defineProperty2.default)({}, sideNavClampedWidthVar, clampedWidth),

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

@@ -1,4 +1,4 @@
-/* toggle-button.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* toggle-button.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -6,7 +6,6 @@
 ._1e0cglyw{display:none}
 ._1ul9zwfg{min-width:2pc}
 ._4cvr1h6o{align-items:center}
-._lcxv1wug{pointer-events:auto}
 ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
 @media (min-width:48rem){._181n1txw{display:flex}._1d2y1ris{min-width:max-content}}
 @media (min-width:64rem){._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._ndwch9n0{justify-self:end}}