@atlaskit/navigation-system 2.10.2 → 2.11.0

package/dist/cjs/ui/top-nav-items/themed/button.compiled.css

@@ -1,3 +1,4 @@
+
 ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._11q71c9b{background:var(--ds-top-bar-button-disabled-background)}
 ._11q71qds{background:var(--ds-top-bar-button-selected-background)}
@@ -32,27 +33,36 @@
 ._syaz1i3i{color:var(--ds-top-bar-button-disabled-text)}
 ._syaz1r31{color:currentColor}
 ._syazw5ct{color:var(--ds-top-bar-button-selected-text)}
-._vwz4idpf{line-height:0}
-._f8pj15o7:focus, ._105315o7:visited{color:var(--ds-top-bar-button-primary-text)}
-._f8pj1i3i:focus, ._10531i3i:visited{color:var(--ds-top-bar-button-disabled-text)}
-._f8pj1r31:focus, ._10531r31:visited{color:currentColor}
-._f8pjw5ct:focus, ._1053w5ct:visited{color:var(--ds-top-bar-button-selected-text)}
+._vwz4idpf{line-height:0}._105315o7:visited{color:var(--ds-top-bar-button-primary-text)}
+._10531i3i:visited{color:var(--ds-top-bar-button-disabled-text)}
+._10531r31:visited{color:currentColor}
+._1053w5ct:visited{color:var(--ds-top-bar-button-selected-text)}
+._1a3b1r31:focus{text-decoration-color:currentColor}
+._4fprglyw:focus{text-decoration-line:none}
+._5goinqa1:focus{text-decoration-style:solid}
+._f8pj15o7:focus{color:var(--ds-top-bar-button-primary-text)}
+._f8pj1i3i:focus{color:var(--ds-top-bar-button-disabled-text)}
+._f8pj1r31:focus{color:currentColor}
+._f8pjw5ct:focus{color:var(--ds-top-bar-button-selected-text)}
 ._19lc1c9b:hover{background:var(--ds-top-bar-button-disabled-background)}
 ._19lc1rps:hover{background:var(--ds-top-bar-button-background-hovered)}
 ._19lcjrv1:hover{background:var(--ds-top-bar-button-selected-background-hovered)}
 ._19lcp6hf:hover{background:var(--ds-top-bar-button-primary-background-hovered)}
+._1bnxglyw:hover{text-decoration-line:none}
 ._30l315o7:hover{color:var(--ds-top-bar-button-primary-text)}
 ._30l31i3i:hover{color:var(--ds-top-bar-button-disabled-text)}
 ._30l31r31:hover{color:currentColor}
 ._30l3w5ct:hover{color:var(--ds-top-bar-button-selected-text)}
+._9oik1r31:hover{text-decoration-color:currentColor}
+._jf4cnqa1:hover{text-decoration-style:solid}
 ._j6xt1c9b:active{background:var(--ds-top-bar-button-disabled-background)}
 ._j6xt5sko:active{background:var(--ds-top-bar-button-primary-background-pressed)}
 ._j6xtnh62:active{background:var(--ds-top-bar-button-selected-background-pressed)}
 ._j6xtqtgh:active{background:var(--ds-top-bar-button-background-pressed)}
-._1iohnqa1:active, ._5goinqa1:focus, ._jf4cnqa1:hover{text-decoration-style:solid}
-._1nrm1r31:active, ._1a3b1r31:focus, ._9oik1r31:hover{text-decoration-color:currentColor}
+._1iohnqa1:active{text-decoration-style:solid}
+._1nrm1r31:active{text-decoration-color:currentColor}
 ._9h8h15o7:active{color:var(--ds-top-bar-button-primary-text)}
 ._9h8h1i3i:active{color:var(--ds-top-bar-button-disabled-text)}
 ._9h8h1r31:active{color:currentColor}
 ._9h8hw5ct:active{color:var(--ds-top-bar-button-selected-text)}
-._c2waglyw:active, ._4fprglyw:focus, ._1bnxglyw:hover{text-decoration-line:none}
+._c2waglyw:active{text-decoration-line:none}

package/dist/cjs/ui/top-nav-items/themed/button.js

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

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

@@ -1,4 +1,4 @@
-/* badge-container.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* badge-container.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./badge-container.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* list-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* list-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';

package/dist/es2019/components/list.js

@@ -1,4 +1,4 @@
-/* list.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* list.tsx generated by @compiled/babel-plugin v0.38.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';

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

@@ -1,4 +1,4 @@
-/* skip-link.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* skip-link.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./skip-link.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';

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

@@ -1,4 +1,4 @@
-/* skip-links-container.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* skip-links-container.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./skip-links-container.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/menu-item/container-avatar.js

@@ -1,4 +1,4 @@
-/* container-avatar.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* container-avatar.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./container-avatar.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/menu-item/drag-and-drop/drag-preview.js

@@ -1,4 +1,4 @@
-/* drag-preview.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* drag-preview.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./drag-preview.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/menu-item/drag-and-drop/use-menu-item-drag-and-drop.js

@@ -1,4 +1,4 @@
-/* use-menu-item-drag-and-drop.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* use-menu-item-drag-and-drop.tsx generated by @compiled/babel-plugin v0.38.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';

package/dist/es2019/ui/menu-item/drag-handle.js

@@ -1,4 +1,4 @@
-/* drag-handle.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* drag-handle.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./drag-handle.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item-content.js

@@ -1,4 +1,4 @@
-/* expandable-menu-item-content.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* expandable-menu-item-content.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./expandable-menu-item-content.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.compiled.css

@@ -1,4 +1,4 @@
-._12xsglyw:has(:focus-visible), ._p8btglyw:hover{--expandable-provided-elembefore-display:none}
+._12xsglyw:has(:focus-visible){--expandable-provided-elembefore-display:none}
 ._165n1bgi{--expandable-provided-elembefore-display:contents}
 ._165nglyw{--expandable-provided-elembefore-display:none}
 ._1e0c1xb2{display:var(--expandable-provided-elembefore-display)}
@@ -6,7 +6,9 @@
 ._1hl9glyw:has([aria-expanded=true][aria-haspopup=true]){--expandable-provided-elembefore-display:none}
 ._1mmi1txw{--expandable-chevron-display:flex}
 ._1mmiglyw{--expandable-chevron-display:none}
-._b31z1txw:has(:focus-visible), ._1vnl1txw:hover{--expandable-chevron-display:flex}
+._b31z1txw:has(:focus-visible){--expandable-chevron-display:flex}
 ._syaz1qo3{color:var(--ds-icon-selected,#0c66e4)}
 ._v9u71txw:has([aria-expanded=true][aria-haspopup=true]){--expandable-chevron-display:flex}
-[dir=rtl] ._1tz3r0mg{transform:scaleX(-1)}
+[dir=rtl] ._1tz3r0mg{transform:scaleX(-1)}
+._1vnl1txw:hover{--expandable-chevron-display:flex}
+._p8btglyw:hover{--expandable-provided-elembefore-display:none}

package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js

@@ -1,4 +1,4 @@
-/* expandable-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* expandable-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./expandable-menu-item-trigger.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item.js

@@ -1,4 +1,4 @@
-/* expandable-menu-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* expandable-menu-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./expandable-menu-item.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js

@@ -1,4 +1,4 @@
-/* flyout-menu-item-content.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* flyout-menu-item-content.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./flyout-menu-item-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';

package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item-trigger.js

@@ -1,10 +1,11 @@
-/* flyout-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* flyout-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./flyout-menu-item-trigger.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { PopupTrigger } from '@atlaskit/popup/experimental';
 import { MenuItemBase } from '../menu-item';
 const elemAfterStyles = {
@@ -41,7 +42,7 @@ export const FlyoutMenuItemTrigger = /*#__PURE__*/forwardRef(({
     className: ax([elemAfterStyles.root])
   }, /*#__PURE__*/React.createElement(ChevronRightIcon, {
     label: "",
-    color: "var(--ds-icon, #44546F)",
+    color: fg('platform_dst_flyout_menu_item_chevron_color') ? 'currentColor' : "var(--ds-icon, #44546F)",
     size: "small"
   })),
   onClick: onClick,

package/dist/es2019/ui/menu-item/link-menu-item.js

@@ -1,4 +1,4 @@
-/* link-menu-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* link-menu-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./link-menu-item.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/menu-item/menu-item.compiled.css

@@ -1,3 +1,4 @@
+
 ._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._1r04ze3t{inset:var(--ds-space-0,0)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
@@ -92,19 +93,23 @@
 ._yv0e7dup{grid-template-columns:minmax(0,auto) 1fr minmax(0,auto) minmax(0,auto)}
 ._yv0enbh3{grid-template-columns:subgrid}
 ._12s918uv:focus-within{overflow-y:initial}
-._1brr1txw:focus-within, ._109x1txw:hover{--actions-on-hover-display:flex}
+._1brr1txw:focus-within{--actions-on-hover-display:flex}
 ._1guo18uv:focus-within{overflow-x:initial}
-._1mfcglyw:focus-within, ._1sjuglyw:hover{--elem-after-display:none}
-._91nl1wug:focus-within, ._ynyi1wug:hover{--actions-on-hover-width:auto}
-._iy5o1b66:focus-within, ._v4o21b66:hover{--actions-on-hover-padding:var(--ds-space-050,4px)}
-._t7p8kb7n:focus-within, ._g4kikb7n:hover{--actions-on-hover-opacity:1}
+._1mfcglyw:focus-within{--elem-after-display:none}
+._91nl1wug:focus-within{--actions-on-hover-width:auto}
+._iy5o1b66:focus-within{--actions-on-hover-padding:var(--ds-space-050,4px)}
+._t7p8kb7n:focus-within{--actions-on-hover-opacity:1}._109x1txw:hover{--actions-on-hover-display:flex}
 ._11om6b4r:hover{animation-name:k1xyysw3}
+._1sjuglyw:hover{--elem-after-display:none}
 ._1uy01amc:hover{animation-delay:.8s}
 ._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
 ._7psyru3m:hover{animation-duration:0s}
 ._bir2q7pw:hover{animation-fill-mode:forwards}
+._g4kikb7n:hover{--actions-on-hover-opacity:1}
 ._irr3108i:hover{background-color:var(--ds-surface-hovered,#f1f2f4)}
 ._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
 ._irr3n7od:hover{background-color:unset}
+._v4o21b66:hover{--actions-on-hover-padding:var(--ds-space-050,4px)}
 ._x0kw1txw:hover{--drag-handle-display:flex}
+._ynyi1wug:hover{--actions-on-hover-width:auto}
 @keyframes k1xyysw3{to{cursor:grab}}

package/dist/es2019/ui/menu-item/menu-item.js

@@ -1,4 +1,4 @@
-/* menu-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* menu-item.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./menu-item.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/menu-item/top-level-spacer.js

@@ -1,4 +1,4 @@
-/* top-level-spacer.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* top-level-spacer.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./top-level-spacer.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/menu-section/divider.js

@@ -1,4 +1,4 @@
-/* divider.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* divider.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./divider.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/menu-section/menu-section-heading.js

@@ -1,4 +1,4 @@
-/* menu-section-heading.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* menu-section-heading.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./menu-section-heading.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* aside.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* aside.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./aside.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* banner.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* banner.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./banner.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* main-sticky-header.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* main-sticky-header.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./main-sticky-header.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';

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

@@ -1,4 +1,4 @@
-/* main.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* main.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./main.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -24,12 +24,15 @@
 ._syaz1kw7{color:inherit}
 ._u7coidpf{inset-block-end:0}
 ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
-._1cg4fnf5:focus-within, ._le1bfnf5:hover{transition-duration:.2s}
-._1dr21ylx:focus-within, ._1s5z1ylx:hover{transition-property:color}
-._vp7gaqb7:focus-within, ._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
+._1cg4fnf5:focus-within{transition-duration:.2s}
+._1dr21ylx:focus-within{transition-property:color}
+._vp7gaqb7:focus-within{color:var(--ds-text-selected,#0c66e4)}
 ._1gavfnf5:hover{transition-delay:.2s}
+._1s5z1ylx:hover{transition-property:color}
+._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
 ._d0al11mm:hover{cursor:col-resize}
 ._d0aluf7j:hover{cursor:ew-resize}
+._le1bfnf5:hover{transition-duration:.2s}
 ._1gglglyw:active{transition:none}
 ._9h8h16c2:active{color:var(--ds-link-pressed,#05c)}
 @media (min-width:48rem){._181n1ule{display:block}}

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

@@ -1,4 +1,4 @@
-/* panel-splitter.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* panel-splitter.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./panel-splitter.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* panel.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* panel.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./panel.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* root.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* root.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./root.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef } from 'react';

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

@@ -1,9 +1,10 @@
 ._16jlkb7n{flex-grow:1}
+._16qs10dg{box-shadow:0 -1px var(--ds-border,#091e4224)}
 ._18m91wug{overflow-y:auto}
-._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._1o9zkb7n{flex-shrink:1}
+._1q51utpp{padding-block-start:var(--ds-space-150,9pt)}
 ._1reo1wug{overflow-x:auto}
-._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
+._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
+._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._i0dlf1ug{flex-basis:0%}
-._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
-._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}

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

@@ -1,8 +1,11 @@
-/* side-nav-content.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* side-nav-content.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./side-nav-content.compiled.css";
-import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { forwardRef } from 'react';
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import rafSchd from 'raf-schd';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { fg } from '@atlaskit/platform-feature-flags';
 /**
  * The main content of the side nav, filling up the middle section. It acts as a scroll container.
  *
@@ -14,17 +17,51 @@ export const SideNavContent = /*#__PURE__*/forwardRef(_SideNavContent);
 // Placing this const below the function breaks Compiled!
 const styles = {
   scrollContainer: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo1wug _18m91wug",
-  paddingContainer: "_ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp"
+  paddingContainer: "_1q51utpp _y4tiutpp _85i5utpp _bozgutpp"
+};
+const fullHeightSidebarStyles = {
+  scrolled: "_16qs10dg"
 };
 function _SideNavContent({
   children,
   testId
-}, ref) {
+}, forwardedRef) {
+  const internalRef = useRef(null);
+  const mergedRef = useMemo(() => mergeRefs([internalRef, forwardedRef]), [forwardedRef]);
+  const isScrolled = useIsScrolled(internalRef);
   return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
+    ref: fg('navx-full-height-sidebar') ? mergedRef : forwardedRef,
     "data-testid": testId,
-    className: ax([styles.scrollContainer])
+    className: ax([styles.scrollContainer, isScrolled && fg('navx-full-height-sidebar') && fullHeightSidebarStyles.scrolled])
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([styles.paddingContainer])
   }, children));
+}
+function useIsScrolled(ref) {
+  const [isScrolled, setIsScrolled] = useState(false);
+  useEffect(() => {
+    if (!fg('navx-full-height-sidebar')) {
+      return;
+    }
+    if (!ref.current) {
+      return;
+    }
+    const scrollContainer = ref.current;
+
+    // Listener is throttled to requestAnimationFrame()
+    const listener = rafSchd(() => {
+      setIsScrolled(scrollContainer.scrollTop > 0);
+    });
+    return bind(scrollContainer, {
+      type: 'scroll',
+      options: {
+        // Passive means we cannot call event.preventDefault()
+        // It allows the browser to optimize scrolling performance:
+        // https://developer.chrome.com/docs/lighthouse/best-practices/uses-passive-event-listeners
+        passive: true
+      },
+      listener
+    });
+  }, [ref]);
+  return isScrolled;
 }

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

@@ -1,4 +1,4 @@
-/* side-nav-footer.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* side-nav-footer.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./side-nav-footer.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* side-nav-header.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* side-nav-header.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./side-nav-header.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* side-nav.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* side-nav.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./side-nav.compiled.css";
 import * as React from 'react';

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

@@ -1,4 +1,4 @@
-/* toggle-button.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* toggle-button.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./toggle-button.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';

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

@@ -8,4 +8,4 @@
 ._4cvr1h6o{align-items:center}
 ._lcxv1wug{pointer-events:auto}
 @media (min-width:48rem){._181n1txw{display:flex}._1d2y1ris{min-width:max-content}}
-@media (min-width:64rem){._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._ndwch9n0{justify-self:end}}
+@media (min-width:64rem){._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._ndwch9n0{justify-self:end}}

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

@@ -1,4 +1,4 @@
-/* top-nav-end.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* top-nav-end.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./top-nav-end.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
@@ -14,6 +14,7 @@ import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-the
 import { IconButton } from '../../top-nav-items/themed/migration';
 const containerStyles = {
   root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15ri1mjv _1gs5usvi _ndwch9n0",
+  jiraProductLogoUpdate: "_15rip2n4",
   fullHeightSidebar: "_lcxv1wug"
 };
 const listStyles = {
@@ -53,7 +54,7 @@ export function TopNavEnd({
   }, [query]);
   return /*#__PURE__*/React.createElement("nav", {
     "aria-label": label,
-    className: ax([containerStyles.root, fg('navx-full-height-sidebar') && containerStyles.fullHeightSidebar])
+    className: ax([containerStyles.root, fg('navx-full-height-sidebar') && containerStyles.fullHeightSidebar, fg('team25-eu-jira-logo-updates-csm-jsm') && containerStyles.jiraProductLogoUpdate])
   }, isMobile ? /*#__PURE__*/React.createElement(Popup, {
     isOpen: isOpen,
     onClose: () => setIsOpen(false),

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

@@ -1,4 +1,4 @@
-/* top-nav-middle.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* top-nav-middle.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./top-nav-middle.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';

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

@@ -5,4 +5,4 @@
 ._4t3i1osq{height:100%}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._lcxv1wug{pointer-events:auto}
-@media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._10jxnau3{max-width:calc(100% - var(--ds-space-200, 1pc))}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}}
+@media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._10jxnau3{max-width:calc(100% - var(--ds-space-200, 1pc))}._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}}

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

@@ -1,4 +1,4 @@
-/* top-nav-start.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* top-nav-start.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./top-nav-start.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
@@ -9,6 +9,7 @@ import { SideNavToggleButtonSlotProvider } from '../side-nav/toggle-button-provi
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 const styles = {
   root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15ri1mjv _1gs5usvi",
+  jiraProductLogoUpdate: "_15rip2n4",
   fullHeightSidebar: "_bozgutpp _lcxv1wug",
   fullHeightSidebarExpanded: "_15rin7od _glte1osq _10jxnau3"
 };
@@ -66,7 +67,7 @@ export function TopNavStart({
   return /*#__PURE__*/React.createElement("div", {
     ref: fg('platform_fix_component_state_update_for_suspense') ? elementRef : ref,
     "data-testid": testId,
-    className: ax([styles.root, fg('navx-full-height-sidebar') && styles.fullHeightSidebar, isExpandedOnDesktop && fg('navx-full-height-sidebar') && styles.fullHeightSidebarExpanded])
+    className: ax([styles.root, fg('navx-full-height-sidebar') && styles.fullHeightSidebar, isExpandedOnDesktop && fg('navx-full-height-sidebar') && styles.fullHeightSidebarExpanded, fg('team25-eu-jira-logo-updates-csm-jsm') && styles.jiraProductLogoUpdate])
   }, !fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {
     key: sideNavToggleButtonKey
   }, sideNavToggleButton), sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {

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

@@ -1,4 +1,4 @@
-/* top-nav.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* top-nav.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./top-nav.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* custom-title.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* custom-title.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./custom-title.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* app-logo.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* app-logo.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./app-logo.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useRef } from 'react';

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

@@ -1,4 +1,4 @@
-/* custom-logo.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* custom-logo.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./custom-logo.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef } from 'react';

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

@@ -1,4 +1,4 @@
-/* logo-renderer.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* logo-renderer.tsx generated by @compiled/babel-plugin v0.38.1 */
 import { ax, ix } from "@compiled/react/runtime";
 import React, { memo } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';

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

@@ -1,4 +1,4 @@
-/* search.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* search.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./search.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { Fragment } from 'react';

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

@@ -1,3 +1,4 @@
+
 ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._11q71c9b{background:var(--ds-top-bar-button-disabled-background)}
 ._11q71qds{background:var(--ds-top-bar-button-selected-background)}
@@ -32,27 +33,36 @@
 ._syaz1i3i{color:var(--ds-top-bar-button-disabled-text)}
 ._syaz1r31{color:currentColor}
 ._syazw5ct{color:var(--ds-top-bar-button-selected-text)}
-._vwz4idpf{line-height:0}
-._f8pj15o7:focus, ._105315o7:visited{color:var(--ds-top-bar-button-primary-text)}
-._f8pj1i3i:focus, ._10531i3i:visited{color:var(--ds-top-bar-button-disabled-text)}
-._f8pj1r31:focus, ._10531r31:visited{color:currentColor}
-._f8pjw5ct:focus, ._1053w5ct:visited{color:var(--ds-top-bar-button-selected-text)}
+._vwz4idpf{line-height:0}._105315o7:visited{color:var(--ds-top-bar-button-primary-text)}
+._10531i3i:visited{color:var(--ds-top-bar-button-disabled-text)}
+._10531r31:visited{color:currentColor}
+._1053w5ct:visited{color:var(--ds-top-bar-button-selected-text)}
+._1a3b1r31:focus{text-decoration-color:currentColor}
+._4fprglyw:focus{text-decoration-line:none}
+._5goinqa1:focus{text-decoration-style:solid}
+._f8pj15o7:focus{color:var(--ds-top-bar-button-primary-text)}
+._f8pj1i3i:focus{color:var(--ds-top-bar-button-disabled-text)}
+._f8pj1r31:focus{color:currentColor}
+._f8pjw5ct:focus{color:var(--ds-top-bar-button-selected-text)}
 ._19lc1c9b:hover{background:var(--ds-top-bar-button-disabled-background)}
 ._19lc1rps:hover{background:var(--ds-top-bar-button-background-hovered)}
 ._19lcjrv1:hover{background:var(--ds-top-bar-button-selected-background-hovered)}
 ._19lcp6hf:hover{background:var(--ds-top-bar-button-primary-background-hovered)}
+._1bnxglyw:hover{text-decoration-line:none}
 ._30l315o7:hover{color:var(--ds-top-bar-button-primary-text)}
 ._30l31i3i:hover{color:var(--ds-top-bar-button-disabled-text)}
 ._30l31r31:hover{color:currentColor}
 ._30l3w5ct:hover{color:var(--ds-top-bar-button-selected-text)}
+._9oik1r31:hover{text-decoration-color:currentColor}
+._jf4cnqa1:hover{text-decoration-style:solid}
 ._j6xt1c9b:active{background:var(--ds-top-bar-button-disabled-background)}
 ._j6xt5sko:active{background:var(--ds-top-bar-button-primary-background-pressed)}
 ._j6xtnh62:active{background:var(--ds-top-bar-button-selected-background-pressed)}
 ._j6xtqtgh:active{background:var(--ds-top-bar-button-background-pressed)}
-._1iohnqa1:active, ._5goinqa1:focus, ._jf4cnqa1:hover{text-decoration-style:solid}
-._1nrm1r31:active, ._1a3b1r31:focus, ._9oik1r31:hover{text-decoration-color:currentColor}
+._1iohnqa1:active{text-decoration-style:solid}
+._1nrm1r31:active{text-decoration-color:currentColor}
 ._9h8h15o7:active{color:var(--ds-top-bar-button-primary-text)}
 ._9h8h1i3i:active{color:var(--ds-top-bar-button-disabled-text)}
 ._9h8h1r31:active{color:currentColor}
 ._9h8hw5ct:active{color:var(--ds-top-bar-button-selected-text)}
-._c2waglyw:active, ._4fprglyw:focus, ._1bnxglyw:hover{text-decoration-line:none}
+._c2waglyw:active{text-decoration-line:none}