@atlaskit/navigation-system 11.1.2 → 11.2.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlassian/navigation-system
 
+## 11.2.0
+
+### Minor Changes
+
+- [`b536adef43f98`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b536adef43f98) -
+  Add a self-hiding Chat action with focus restoration and persistent TopNavEnd items behind
+  platform-dst-chat-panel-layout.
+
+  Persistent groups retain popup-layer protection and hide their complete accessible group when
+  inactive.
+
+  Persistent actions render last, after the other top-nav actions or their overflow button.
+
+## 11.1.3
+
+### Patch Changes
+
+- [`dc134f854c5c0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dc134f854c5c0) -
+  Remove the platform-dst-keep-desired-fhs-features gate and enable the desired FHS behavior by
+  default.
+- Updated dependencies
+
 ## 11.1.2
 
 ### Patch Changes

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

@@ -117,8 +117,7 @@ var MaybeTooltip = function MaybeTooltip(_ref2) {
     shortcut = _ref2.shortcut,
     children = _ref2.children,
     testId = _ref2.testId;
-  var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
-  if (tooltipContent && (isFhsEnabled || (0, _fg.fg)('platform-dst-keep-desired-fhs-features'))) {
+  if (tooltipContent) {
     return /*#__PURE__*/React.createElement(_Tooltip.default, {
       testId: testId,
       content: tooltipContent,

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

@@ -17,8 +17,6 @@ var _useAnalyticsEvents2 = require("@atlaskit/analytics-next/useAnalyticsEvents"
 var _sidebarCollapse = _interopRequireDefault(require("@atlaskit/icon/core/sidebar-collapse"));
 var _sidebarExpand = _interopRequireDefault(require("@atlaskit/icon/core/sidebar-expand"));
 var _useOpenLayerObserver = require("@atlaskit/layering/use-open-layer-observer");
-var _fg = require("@atlaskit/platform-feature-flags/fg");
-var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _iconButton = require("../../top-nav-items/themed/icon-button");
 var _sideNavToggleButtonAttachRef = require("./side-nav-toggle-button-attach-ref");
 var _sideNavToggleTooltipKeyboardShortcut = require("./side-nav-toggle-tooltip-keyboard-shortcut");
@@ -54,7 +52,6 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
     testId = _ref.testId,
     interactionName = _ref.interactionName,
     onClick = _ref.onClick;
-  var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
   var _useSideNavVisibility = (0, _useSideNavVisibility2.useSideNavVisibility)({
       defaultCollapsed: defaultCollapsed
     }),
@@ -111,10 +108,8 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-    if (isFhsEnabled || (0, _fg.fg)('platform-dst-keep-desired-fhs-features')) {
-      openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
-    }
-  }, [isFhsEnabled, isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
+    openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
+  }, [isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
   var handlePointerEnter = (0, _react.useCallback)(function () {
     // Hovers don't do anything on mobile, so not capturing
     var isDesktop = window.matchMedia('(min-width: 64rem)').matches;
@@ -155,13 +150,10 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
   };
   var isShortcutEnabled = (0, _useIsSideNavShortcutEnabled.useIsSideNavShortcutEnabled)();
   var tooltipProps = (0, _react.useMemo)(function () {
-    if (isFhsEnabled || (0, _fg.fg)('platform-dst-keep-desired-fhs-features')) {
-      return _objectSpread(_objectSpread({}, toggleButtonTooltipOptions), {}, {
-        shortcut: isShortcutEnabled ? _sideNavToggleTooltipKeyboardShortcut.sideNavToggleTooltipKeyboardShortcut : undefined
-      });
-    }
-    return toggleButtonTooltipOptions;
-  }, [isFhsEnabled, isShortcutEnabled]);
+    return _objectSpread(_objectSpread({}, toggleButtonTooltipOptions), {}, {
+      shortcut: isShortcutEnabled ? _sideNavToggleTooltipKeyboardShortcut.sideNavToggleTooltipKeyboardShortcut : undefined
+    });
+  }, [isShortcutEnabled]);
   return /*#__PURE__*/_react.default.createElement(_iconButton.IconButton, {
     appearance: "subtle",
     label: isSideNavExpanded ? collapseLabel : expandLabel,

package/dist/cjs/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js

@@ -9,8 +9,6 @@ var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
 var _useOpenLayerObserver = require("@atlaskit/layering/use-open-layer-observer");
-var _fg = require("@atlaskit/platform-feature-flags/fg");
-var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _useIsSideNavShortcutEnabled = require("./use-is-side-nav-shortcut-enabled");
 var _useToggleSideNav = require("./use-toggle-side-nav");
 /**
@@ -18,7 +16,6 @@ var _useToggleSideNav = require("./use-toggle-side-nav");
  */
 function useSideNavToggleKeyboardShortcut(_ref) {
   var canToggleWithShortcut = _ref.canToggleWithShortcut;
-  var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
   var openLayerObserver = (0, _useOpenLayerObserver.useOpenLayerObserver)();
   var toggleVisibilityByShortcut = (0, _useToggleSideNav.useToggleSideNav)({
     trigger: 'keyboard'
@@ -26,9 +23,6 @@ function useSideNavToggleKeyboardShortcut(_ref) {
   var canToggleWithShortcutStableRef = (0, _useStableRef.default)(canToggleWithShortcut);
   var isSideNavShortcutEnabled = (0, _useIsSideNavShortcutEnabled.useIsSideNavShortcutEnabled)();
   (0, _react.useEffect)(function () {
-    if (!isFhsEnabled && !(0, _fg.fg)('platform-dst-keep-desired-fhs-features')) {
-      return;
-    }
     if (!isSideNavShortcutEnabled) {
       return;
     }
@@ -56,5 +50,5 @@ function useSideNavToggleKeyboardShortcut(_ref) {
         }
       }
     });
-  }, [canToggleWithShortcutStableRef, isFhsEnabled, isSideNavShortcutEnabled, openLayerObserver, toggleVisibilityByShortcut]);
+  }, [canToggleWithShortcutStableRef, isSideNavShortcutEnabled, openLayerObserver, toggleVisibilityByShortcut]);
 }

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

@@ -16,6 +16,7 @@ var _react2 = require("@compiled/react");
 var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
 var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
 var _openLayerObserverNamespaceProvider = require("@atlaskit/layering/open-layer-observer-namespace-provider");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _popup = require("@atlaskit/popup/popup");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _list = require("../../../components/list");
@@ -26,6 +27,7 @@ var _constants = require("../constants");
 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 containerStyles = {
   root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15rip2n4 _1gs5usvi _ndwch9n0",
+  withPersistentItems: "_zulp1b66 _4cvr1h6o",
   fullHeightSidebar: "_y4tiutpp"
 };
 var listStyles = {
@@ -44,10 +46,12 @@ var listStyles = {
  */
 function TopNavEnd(_ref) {
   var children = _ref.children,
+    persistentItems = _ref.persistentItems,
     _ref$label = _ref.label,
     label = _ref$label === void 0 ? 'Actions' : _ref$label,
     _ref$showMoreButtonLa = _ref.showMoreButtonLabel,
     showMoreButtonLabel = _ref$showMoreButtonLa === void 0 ? 'Show more' : _ref$showMoreButtonLa;
+  var hasPersistentItems = (0, _fg.fg)('platform-dst-chat-panel-layout') && persistentItems != null;
   var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -73,7 +77,7 @@ function TopNavEnd(_ref) {
   }, [query]);
   return /*#__PURE__*/_react.default.createElement("nav", {
     "aria-label": label,
-    className: (0, _runtime.ax)([containerStyles.root, isFhsEnabled && containerStyles.fullHeightSidebar])
+    className: (0, _runtime.ax)([containerStyles.root, hasPersistentItems && containerStyles.withPersistentItems, isFhsEnabled && containerStyles.fullHeightSidebar])
   }, isMobile ? /*#__PURE__*/_react.default.createElement(_popup.Popup, {
     isOpen: isOpen,
     onClose: function onClose() {
@@ -105,5 +109,7 @@ function TopNavEnd(_ref) {
     xcss: (0, _react2.cx)(listStyles.root, listStyles.hideOnSmallViewport)
   }, /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
     namespace: _constants.openLayerObserverTopNavEndNamespace
-  }, children)));
+  }, children)), hasPersistentItems && /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
+    namespace: _constants.openLayerObserverTopNavEndNamespace
+  }, persistentItems));
 }

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

@@ -105,8 +105,7 @@ const MaybeTooltip = ({
   children,
   testId
 }) => {
-  const isFhsEnabled = useIsFhsEnabled();
-  if (tooltipContent && (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features'))) {
+  if (tooltipContent) {
     return /*#__PURE__*/React.createElement(Tooltip, {
       testId: testId,
       content: tooltipContent,

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

@@ -7,8 +7,6 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents'
 import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
 import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { IconButton } from '../../top-nav-items/themed/icon-button';
 import { SideNavToggleButtonAttachRef } from './side-nav-toggle-button-attach-ref';
 import { sideNavToggleTooltipKeyboardShortcut } from './side-nav-toggle-tooltip-keyboard-shortcut';
@@ -41,7 +39,6 @@ export const SideNavToggleButton = ({
   interactionName,
   onClick
 }) => {
-  const isFhsEnabled = useIsFhsEnabled();
   const {
     isExpandedOnDesktop: isSideNavExpandedOnDesktop,
     isExpandedOnMobile: isSideNavExpandedOnMobile
@@ -95,10 +92,8 @@ export const SideNavToggleButton = ({
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-    if (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features')) {
-      openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.closeLayers();
-    }
-  }, [isFhsEnabled, isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
+    openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.closeLayers();
+  }, [isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
   const handlePointerEnter = useCallback(() => {
     // Hovers don't do anything on mobile, so not capturing
     const isDesktop = window.matchMedia('(min-width: 64rem)').matches;
@@ -136,15 +131,10 @@ export const SideNavToggleButton = ({
     className: ax(["_1e0c1bgi _lcxvglyw"])
   }, isSideNavExpanded ? /*#__PURE__*/React.createElement(SidebarCollapseIcon, props) : /*#__PURE__*/React.createElement(SidebarExpandIcon, props));
   const isShortcutEnabled = useIsSideNavShortcutEnabled();
-  const tooltipProps = useMemo(() => {
-    if (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features')) {
-      return {
-        ...toggleButtonTooltipOptions,
-        shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined
-      };
-    }
-    return toggleButtonTooltipOptions;
-  }, [isFhsEnabled, isShortcutEnabled]);
+  const tooltipProps = useMemo(() => ({
+    ...toggleButtonTooltipOptions,
+    shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined
+  }), [isShortcutEnabled]);
   return /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     label: isSideNavExpanded ? collapseLabel : expandLabel,

package/dist/es2019/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js

@@ -2,8 +2,6 @@ import { useEffect } from 'react';
 import { bind } from 'bind-event-listener';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { useIsSideNavShortcutEnabled } from './use-is-side-nav-shortcut-enabled';
 import { useToggleSideNav } from './use-toggle-side-nav';
 
@@ -13,7 +11,6 @@ import { useToggleSideNav } from './use-toggle-side-nav';
 export function useSideNavToggleKeyboardShortcut({
   canToggleWithShortcut
 }) {
-  const isFhsEnabled = useIsFhsEnabled();
   const openLayerObserver = useOpenLayerObserver();
   const toggleVisibilityByShortcut = useToggleSideNav({
     trigger: 'keyboard'
@@ -21,9 +18,6 @@ export function useSideNavToggleKeyboardShortcut({
   const canToggleWithShortcutStableRef = useStableRef(canToggleWithShortcut);
   const isSideNavShortcutEnabled = useIsSideNavShortcutEnabled();
   useEffect(() => {
-    if (!isFhsEnabled && !fg('platform-dst-keep-desired-fhs-features')) {
-      return;
-    }
     if (!isSideNavShortcutEnabled) {
       return;
     }
@@ -51,5 +45,5 @@ export function useSideNavToggleKeyboardShortcut({
         }
       }
     });
-  }, [canToggleWithShortcutStableRef, isFhsEnabled, isSideNavShortcutEnabled, openLayerObserver, toggleVisibilityByShortcut]);
+  }, [canToggleWithShortcutStableRef, isSideNavShortcutEnabled, openLayerObserver, toggleVisibilityByShortcut]);
 }

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

@@ -7,6 +7,7 @@ import { cx } from '@compiled/react';
 import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
 import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/open-layer-observer-namespace-provider';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Popup } from '@atlaskit/popup/popup';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
 import { List } from '../../../components/list';
@@ -16,6 +17,7 @@ import { IconButton } from '../../top-nav-items/themed/icon-button';
 import { openLayerObserverTopNavEndNamespace } from '../constants';
 const containerStyles = {
   root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15rip2n4 _1gs5usvi _ndwch9n0",
+  withPersistentItems: "_zulp1b66 _4cvr1h6o",
   fullHeightSidebar: "_y4tiutpp"
 };
 const listStyles = {
@@ -34,9 +36,11 @@ const listStyles = {
  */
 export function TopNavEnd({
   children,
+  persistentItems,
   label = 'Actions',
   showMoreButtonLabel = 'Show more'
 }) {
+  const hasPersistentItems = fg('platform-dst-chat-panel-layout') && persistentItems != null;
   const isFhsEnabled = useIsFhsEnabled();
   const [isOpen, setIsOpen] = useState(false);
   // Always setting to `false` for the initial render (will flip in an effect for mobile)
@@ -56,7 +60,7 @@ export function TopNavEnd({
   }, [query]);
   return /*#__PURE__*/React.createElement("nav", {
     "aria-label": label,
-    className: ax([containerStyles.root, isFhsEnabled && containerStyles.fullHeightSidebar])
+    className: ax([containerStyles.root, hasPersistentItems && containerStyles.withPersistentItems, isFhsEnabled && containerStyles.fullHeightSidebar])
   }, isMobile ? /*#__PURE__*/React.createElement(Popup, {
     isOpen: isOpen,
     onClose: () => setIsOpen(false),
@@ -80,5 +84,7 @@ export function TopNavEnd({
     xcss: cx(listStyles.root, listStyles.hideOnSmallViewport)
   }, /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
     namespace: openLayerObserverTopNavEndNamespace
-  }, children)));
+  }, children)), hasPersistentItems && /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
+    namespace: openLayerObserverTopNavEndNamespace
+  }, persistentItems));
 }

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

@@ -108,8 +108,7 @@ var MaybeTooltip = function MaybeTooltip(_ref2) {
     shortcut = _ref2.shortcut,
     children = _ref2.children,
     testId = _ref2.testId;
-  var isFhsEnabled = useIsFhsEnabled();
-  if (tooltipContent && (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features'))) {
+  if (tooltipContent) {
     return /*#__PURE__*/React.createElement(Tooltip, {
       testId: testId,
       content: tooltipContent,

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

@@ -11,8 +11,6 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents'
 import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
 import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { IconButton } from '../../top-nav-items/themed/icon-button';
 import { SideNavToggleButtonAttachRef } from './side-nav-toggle-button-attach-ref';
 import { sideNavToggleTooltipKeyboardShortcut } from './side-nav-toggle-tooltip-keyboard-shortcut';
@@ -45,7 +43,6 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
     testId = _ref.testId,
     interactionName = _ref.interactionName,
     onClick = _ref.onClick;
-  var isFhsEnabled = useIsFhsEnabled();
   var _useSideNavVisibility = useSideNavVisibility({
       defaultCollapsed: defaultCollapsed
     }),
@@ -102,10 +99,8 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-    if (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features')) {
-      openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
-    }
-  }, [isFhsEnabled, isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
+    openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
+  }, [isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
   var handlePointerEnter = useCallback(function () {
     // Hovers don't do anything on mobile, so not capturing
     var isDesktop = window.matchMedia('(min-width: 64rem)').matches;
@@ -146,13 +141,10 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
   };
   var isShortcutEnabled = useIsSideNavShortcutEnabled();
   var tooltipProps = useMemo(function () {
-    if (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features')) {
-      return _objectSpread(_objectSpread({}, toggleButtonTooltipOptions), {}, {
-        shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined
-      });
-    }
-    return toggleButtonTooltipOptions;
-  }, [isFhsEnabled, isShortcutEnabled]);
+    return _objectSpread(_objectSpread({}, toggleButtonTooltipOptions), {}, {
+      shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined
+    });
+  }, [isShortcutEnabled]);
   return /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     label: isSideNavExpanded ? collapseLabel : expandLabel,

package/dist/esm/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js

@@ -2,8 +2,6 @@ import { useEffect } from 'react';
 import { bind } from 'bind-event-listener';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { useIsSideNavShortcutEnabled } from './use-is-side-nav-shortcut-enabled';
 import { useToggleSideNav } from './use-toggle-side-nav';
 
@@ -12,7 +10,6 @@ import { useToggleSideNav } from './use-toggle-side-nav';
  */
 export function useSideNavToggleKeyboardShortcut(_ref) {
   var canToggleWithShortcut = _ref.canToggleWithShortcut;
-  var isFhsEnabled = useIsFhsEnabled();
   var openLayerObserver = useOpenLayerObserver();
   var toggleVisibilityByShortcut = useToggleSideNav({
     trigger: 'keyboard'
@@ -20,9 +17,6 @@ export function useSideNavToggleKeyboardShortcut(_ref) {
   var canToggleWithShortcutStableRef = useStableRef(canToggleWithShortcut);
   var isSideNavShortcutEnabled = useIsSideNavShortcutEnabled();
   useEffect(function () {
-    if (!isFhsEnabled && !fg('platform-dst-keep-desired-fhs-features')) {
-      return;
-    }
     if (!isSideNavShortcutEnabled) {
       return;
     }
@@ -50,5 +44,5 @@ export function useSideNavToggleKeyboardShortcut(_ref) {
         }
       }
     });
-  }, [canToggleWithShortcutStableRef, isFhsEnabled, isSideNavShortcutEnabled, openLayerObserver, toggleVisibilityByShortcut]);
+  }, [canToggleWithShortcutStableRef, isSideNavShortcutEnabled, openLayerObserver, toggleVisibilityByShortcut]);
 }

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

@@ -8,6 +8,7 @@ import { cx } from '@compiled/react';
 import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
 import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/open-layer-observer-namespace-provider';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Popup } from '@atlaskit/popup/popup';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
 import { List } from '../../../components/list';
@@ -17,6 +18,7 @@ import { IconButton } from '../../top-nav-items/themed/icon-button';
 import { openLayerObserverTopNavEndNamespace } from '../constants';
 var containerStyles = {
   root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15rip2n4 _1gs5usvi _ndwch9n0",
+  withPersistentItems: "_zulp1b66 _4cvr1h6o",
   fullHeightSidebar: "_y4tiutpp"
 };
 var listStyles = {
@@ -35,10 +37,12 @@ var listStyles = {
  */
 export function TopNavEnd(_ref) {
   var children = _ref.children,
+    persistentItems = _ref.persistentItems,
     _ref$label = _ref.label,
     label = _ref$label === void 0 ? 'Actions' : _ref$label,
     _ref$showMoreButtonLa = _ref.showMoreButtonLabel,
     showMoreButtonLabel = _ref$showMoreButtonLa === void 0 ? 'Show more' : _ref$showMoreButtonLa;
+  var hasPersistentItems = fg('platform-dst-chat-panel-layout') && persistentItems != null;
   var isFhsEnabled = useIsFhsEnabled();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -64,7 +68,7 @@ export function TopNavEnd(_ref) {
   }, [query]);
   return /*#__PURE__*/React.createElement("nav", {
     "aria-label": label,
-    className: ax([containerStyles.root, isFhsEnabled && containerStyles.fullHeightSidebar])
+    className: ax([containerStyles.root, hasPersistentItems && containerStyles.withPersistentItems, isFhsEnabled && containerStyles.fullHeightSidebar])
   }, isMobile ? /*#__PURE__*/React.createElement(Popup, {
     isOpen: isOpen,
     onClose: function onClose() {
@@ -96,5 +100,7 @@ export function TopNavEnd(_ref) {
     xcss: cx(listStyles.root, listStyles.hideOnSmallViewport)
   }, /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
     namespace: openLayerObserverTopNavEndNamespace
-  }, children)));
+  }, children)), hasPersistentItems && /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
+    namespace: openLayerObserverTopNavEndNamespace
+  }, persistentItems));
 }

package/dist/types/ui/page-layout/panel-splitter/side-nav-panel-splitter.d.ts

@@ -17,7 +17,7 @@ type SideNavPanelSplitterProps = Omit<PanelSplitterProps, 'onDoubleClick' | 'too
      *
      * If the `isSideNavShortcutEnabled` prop is enabled on `<Root />`, the built-in keyboard shortcut will be displayed with the tooltip.
      *
-     * Only used if `platform-dst-keep-desired-fhs-features` or `useIsFhsEnabled` is enabled.
+     * Used when the panel splitter tooltip is enabled.
      */
     tooltipContent?: PanelSplitterProps['tooltipContent'];
 };

package/dist/types/ui/page-layout/root.d.ts

@@ -65,8 +65,7 @@ export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes,
      * is pressed, before the SideNav is toggled. You can use this to conditionally disable the shortcut based on your
      * your own custom checks, e.g. if there is a legacy dialog open.
      *
-     * Note: The built-in keyboard shortcut is behind the `platform-dst-keep-desired-fhs-features`
-     * feature gate, or `useIsFhsEnabled` for backwards compatibility.
+     * The built-in keyboard shortcut is available whenever this prop is enabled.
      */
     isSideNavShortcutEnabled?: boolean;
 }): JSX.Element;

package/dist/types/ui/page-layout/top-nav/top-nav-end.d.ts

@@ -11,13 +11,23 @@ import React from 'react';
  * On small viewports, the children will be placed inside a popup, and a button will be rendered to open the popup.
  * This is to prevent the actions from overflowing the top navigation.
  */
-export declare function TopNavEnd({ children, label, showMoreButtonLabel, }: {
+export declare function TopNavEnd({ children, persistentItems, label, showMoreButtonLabel, }: {
     /**
      * The content of the layout area.
      *
      * Should contain top nav end item components like `Notifications`, `Help`, `LogIn` etc.
      */
     children: React.ReactNode;
+    /**
+     * Actions at the inline end, after the other actions or their overflow button,
+     * that stay in the top nav at every viewport size outside the overflow popup.
+     * Items stay mounted when the viewport changes. Consumers must ensure
+     * that this content fits on small screens. Supply complete accessible groups
+     * (lists containing list items), and hide each group at its outermost element
+     * so hidden or absent actions do not leave empty lists or spacing behind.
+     * Enabled behind `platform-dst-chat-panel-layout`.
+     */
+    persistentItems?: React.ReactNode;
     /**
      * Provide an accessible label, often used by screen readers.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "11.1.2",
+	"version": "11.2.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"license": "Apache-2.0",
@@ -66,7 +66,7 @@
 		"@atlaskit/icon": "^38.0.0",
 		"@atlaskit/layering": "^6.0.0",
 		"@atlaskit/logo": "^23.3.0",
-		"@atlaskit/motion": "^9.1.0",
+		"@atlaskit/motion": "^9.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/platform-feature-flags-react": "^1.2.0",
 		"@atlaskit/popup": "^9.0.0",
@@ -74,7 +74,7 @@
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/side-nav-items": "^2.5.0",
-		"@atlaskit/tokens": "^20.1.0",
+		"@atlaskit/tokens": "^20.3.0",
 		"@atlaskit/tooltip": "^24.4.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -96,7 +96,7 @@
 		"@atlaskit/breadcrumbs": "^17.8.0",
 		"@atlaskit/dropdown-menu": "^21.0.0",
 		"@atlaskit/flag": "^19.0.0",
-		"@atlaskit/form": "^18.0.0",
+		"@atlaskit/form": "^18.1.0",
 		"@atlaskit/heading": "^8.0.0",
 		"@atlaskit/image": "^5.2.0",
 		"@atlaskit/inline-dialog": "^20.3.0",
@@ -116,13 +116,13 @@
 		"@atlaskit/tabs": "^21.3.0",
 		"@atlaskit/tag": "^17.0.0",
 		"@atlaskit/textfield": "^10.2.0",
-		"@atlaskit/top-layer": "^6.1.0",
+		"@atlaskit/top-layer": "^6.2.0",
 		"@atlassian/feature-flags-test-utils": "^1.3.0",
 		"@atlassian/gemini": "^1.54.0",
 		"@atlassian/panel-system": "^1.12.0",
 		"@atlassian/react-async": "^0.23.0",
 		"@atlassian/react-entrypoint": "^1.1.0",
-		"@atlassian/search-dialog": "^10.18.0",
+		"@atlassian/search-dialog": "^10.19.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.1.0",
 		"@atlassian/testing-library": "^0.11.0",
@@ -152,9 +152,6 @@
 		"navx-full-height-sidebar": {
 			"type": "boolean"
 		},
-		"platform-dst-keep-desired-fhs-features": {
-			"type": "boolean"
-		},
 		"platform_dst_button_chevron_sizing": {
 			"type": "boolean"
 		},