@atlaskit/navigation-system 4.6.0 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlassian/navigation-system
 
+## 5.0.0
+
+### Major Changes
+
+- [`ea9dfe33b50c1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ea9dfe33b50c1) -
+  Several changes have been made to the tooltip keyboard shortcut functionality:
+  - The `shortcut` prop has been removed from `SideNavToggleButton`, `PanelSplitter`, and
+    `SideNavPanelSplitter`. The keyboard shortcut used in the tooltips for these components is now
+    controlled internally for consistency, and cannot be configured. It is set to `["Ctrl", "["]`.
+    The shortcuts will only be displayed in the tooltips for `SideNavToggleButton` and
+    `SideNavPanelSplitter` when the `isSideNavShortcutEnabled` prop is enabled on the `Root`
+    component. This is behind the `navx-full-height-sidebar` feature flag - previously, the
+    `shortcuts` prop (now removed) was behind the `platform-dst-tooltip-shortcuts` feature flag.
+
+  - The `shortcuts` prop has been added to `PanelSplitterProvider`, so that layout components (e.g.
+    `SideNav`) can specify the keyboard shortcuts used for the panel splitters that are rendered
+    within them, instead of consumers needing to specify them.
+
+  - `SideNavPanelSplitter` will now only render a tooltip if `shouldCollapseOnDoubleClick` is true.
+    If it is false, the `tooltipContent` prop will be ignored.
+
 ## 4.6.0
 
 ### Minor Changes

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

@@ -59,7 +59,7 @@ var MaybeTooltip = function MaybeTooltip(_ref) {
   var tooltipContent = _ref.tooltipContent,
     shortcut = _ref.shortcut,
     children = _ref.children;
-  if ((tooltipContent || shortcut) && (0, _platformFeatureFlags.fg)('platform-dst-tooltip-shortcuts')) {
+  if (tooltipContent && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
     return /*#__PURE__*/React.createElement(_tooltip.default, {
       content: tooltipContent,
       shortcut: shortcut,
@@ -348,8 +348,7 @@ var PanelSplitter = exports.PanelSplitter = function PanelSplitter(_ref7) {
     onResizeStart = _ref7.onResizeStart,
     onResizeEnd = _ref7.onResizeEnd,
     testId = _ref7.testId,
-    tooltipContent = _ref7.tooltipContent,
-    shortcut = _ref7.shortcut;
+    tooltipContent = _ref7.tooltipContent;
   var _useState7 = (0, _react.useState)(null),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     panel = _useState8[0],
@@ -368,7 +367,8 @@ var PanelSplitter = exports.PanelSplitter = function PanelSplitter(_ref7) {
     onCompleteResize = context.onCompleteResize,
     getResizeBounds = context.getResizeBounds,
     resizingCssVar = context.resizingCssVar,
-    position = context.position;
+    position = context.position,
+    shortcut = context.shortcut;
 
   /**
    * **Explanation**

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

@@ -24,6 +24,7 @@ var PanelSplitterProvider = exports.PanelSplitterProvider = function PanelSplitt
     position = _ref$position === void 0 ? 'end' : _ref$position,
     _ref$isEnabled = _ref.isEnabled,
     isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
+    shortcut = _ref.shortcut,
     children = _ref.children;
   var portalRef = (0, _react.useRef)(null);
   var context = (0, _react.useMemo)(function () {
@@ -36,9 +37,10 @@ var PanelSplitterProvider = exports.PanelSplitterProvider = function PanelSplitt
       position: position,
       panelRef: panelRef,
       isEnabled: isEnabled,
-      portalRef: portalRef
+      portalRef: portalRef,
+      shortcut: shortcut
     };
-  }, [panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, position, portalRef, panelRef, isEnabled]);
+  }, [panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, position, portalRef, panelRef, isEnabled, shortcut]);
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_context.PanelSplitterContext.Provider, {
     value: context
   }, children), /*#__PURE__*/_react.default.createElement("div", {

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

@@ -22,7 +22,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * Example usage:
  * ```tsx
  * <SideNav>
- *   <SideNavPanelSplitter label="Resize or collapse Side Nav"  />
+ *   <SideNavPanelSplitter label="Double click to collapse"  />
  * </SideNav>
  * ```
  */
@@ -33,8 +33,7 @@ var SideNavPanelSplitter = exports.SideNavPanelSplitter = function SideNavPanelS
     testId = _ref.testId,
     _ref$shouldCollapseOn = _ref.shouldCollapseOnDoubleClick,
     shouldCollapseOnDoubleClick = _ref$shouldCollapseOn === void 0 ? true : _ref$shouldCollapseOn,
-    tooltipContent = _ref.tooltipContent,
-    shortcut = _ref.shortcut;
+    tooltipContent = _ref.tooltipContent;
   var context = (0, _react.useContext)(_context.PanelSplitterContext);
   (0, _tinyInvariant.default)((context === null || context === void 0 ? void 0 : context.panelId) === _constants.sideNavPanelSplitterId, 'SideNavPanelSplitter must be rendered as a child of <SideNav />.');
   var toggleSideNav = (0, _useToggleSideNav.useToggleSideNav)({
@@ -47,7 +46,9 @@ var SideNavPanelSplitter = exports.SideNavPanelSplitter = function SideNavPanelS
     onResizeStart: onResizeStart,
     onResizeEnd: onResizeEnd,
     testId: testId,
-    tooltipContent: tooltipContent,
-    shortcut: shortcut
+    tooltipContent:
+    // Only displaying the tooltip if double click to collapse is enabled.
+    // Otherwise, we would be displaying a tooltip with "Double click to collapse", when it actually won't.
+    shouldCollapseOnDoubleClick ? tooltipContent : undefined
   }));
 };

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sideNavToggleTooltipKeyboardShortcut = void 0;
+/**
+ * The keyboard shortcut used in tooltips for indicating how to toggle the side nav.
+ *
+ * Used in `SideNavToggleButton` and `SideNavPanelSplitter` tooltips.
+ */
+var sideNavToggleTooltipKeyboardShortcut = exports.sideNavToggleTooltipKeyboardShortcut = ['Ctrl', '['];

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

@@ -34,6 +34,8 @@ var _useResizingWidthCssVarOnRootElement = require("../use-resizing-width-css-va
 var _useSafeDefaultWidth = require("../use-safe-default-width");
 var _elementContext = require("./element-context");
 var _flyoutCloseDelayMs = require("./flyout-close-delay-ms");
+var _isSideNavShortcutEnabledContext = require("./is-side-nav-shortcut-enabled-context");
+var _sideNavToggleTooltipKeyboardShortcut = require("./side-nav-toggle-tooltip-keyboard-shortcut");
 var _toggleButtonContext = require("./toggle-button-context");
 var _useExpandSideNav = require("./use-expand-side-nav");
 var _useSideNavToggleKeyboardShortcut = require("./use-side-nav-toggle-keyboard-shortcut");
@@ -650,6 +652,8 @@ function SideNavInternal(_ref) {
   (0, _useSideNavToggleKeyboardShortcut.useSideNavToggleKeyboardShortcut)({
     canToggleWithShortcut: canToggleWithShortcut
   });
+  // Used to conditionally display the keyboard shortcut in the SideNavPanelSplitter tooltip.
+  var isShortcutEnabled = (0, _isSideNavShortcutEnabledContext.useIsSideNavShortcutEnabled)();
   (0, _useResizingWidthCssVarOnRootElement.useResizingWidthCssVarOnRootElement)({
     isEnabled: true,
     cssVar: panelSplitterResizingVar,
@@ -724,7 +728,8 @@ function SideNavInternal(_ref) {
     onCompleteResize: setWidth,
     getResizeBounds: getResizeBounds,
     resizingCssVar: panelSplitterResizingVar,
-    isEnabled: isExpandedOnDesktop && !isFlyoutVisible
+    isEnabled: isExpandedOnDesktop && !isFlyoutVisible,
+    shortcut: isShortcutEnabled ? _sideNavToggleTooltipKeyboardShortcut.sideNavToggleTooltipKeyboardShortcut : undefined
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)([styles.flexContainer])
   }, children)));

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

@@ -17,6 +17,8 @@ var _sidebarCollapse = _interopRequireDefault(require("@atlaskit/icon/core/sideb
 var _sidebarExpand = _interopRequireDefault(require("@atlaskit/icon/core/sidebar-expand"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _migration = require("../../top-nav-items/themed/migration");
+var _isSideNavShortcutEnabledContext = require("./is-side-nav-shortcut-enabled-context");
+var _sideNavToggleTooltipKeyboardShortcut = require("./side-nav-toggle-tooltip-keyboard-shortcut");
 var _toggleButtonContext = require("./toggle-button-context");
 var _useSideNavVisibility2 = require("./use-side-nav-visibility");
 var _useToggleSideNav = require("./use-toggle-side-nav");
@@ -45,8 +47,7 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
     collapseLabel = _ref.collapseLabel,
     testId = _ref.testId,
     interactionName = _ref.interactionName,
-    onClick = _ref.onClick,
-    shortcut = _ref.shortcut;
+    onClick = _ref.onClick;
   var _useSideNavVisibility = (0, _useSideNavVisibility2.useSideNavVisibility)({
       defaultCollapsed: defaultCollapsed
     }),
@@ -130,14 +131,15 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
       className: (0, _runtime.ax)(["_1e0c1bgi _lcxvglyw"])
     }, isSideNavExpanded ? /*#__PURE__*/_react.default.createElement(_sidebarCollapse.default, props) : /*#__PURE__*/_react.default.createElement(_sidebarExpand.default, props));
   };
+  var isShortcutEnabled = (0, _isSideNavShortcutEnabledContext.useIsSideNavShortcutEnabled)();
   var tooltipProps = (0, _react.useMemo)(function () {
-    if ((0, _platformFeatureFlags.fg)('platform-dst-tooltip-shortcuts')) {
+    if ((0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
       return _objectSpread(_objectSpread({}, toggleButtonTooltipOptions), {}, {
-        shortcut: shortcut
+        shortcut: isShortcutEnabled ? _sideNavToggleTooltipKeyboardShortcut.sideNavToggleTooltipKeyboardShortcut : undefined
       });
     }
     return toggleButtonTooltipOptions;
-  }, [shortcut]);
+  }, [isShortcutEnabled]);
   return /*#__PURE__*/_react.default.createElement(_migration.IconButton, {
     appearance: "subtle",
     label: isSideNavExpanded ? collapseLabel : expandLabel,

package/dist/cjs/ui/top-nav-items/icon-renderer.js

@@ -20,8 +20,8 @@ function isIconRenderProp(func) {
  * __Icon renderer__
  *
  * Used to support render props with icons.
- * 
- * This is copied from @atlaskit/button to render IconButtons. Some IconButton's DOM element 
+ *
+ * This is copied from @atlaskit/button to render IconButtons. Some IconButton's DOM element
  * will be re-created during SSR -> SPA hydration without using this, which delays TTVC. As
  * IconRenderer is already used in @atlaskit/button to mitigate this issue, add it here to
  * mitigate the same issue for IconButtons in navigation-system, especially for ThemedIconButton.

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

@@ -49,7 +49,7 @@ const MaybeTooltip = ({
   shortcut,
   children
 }) => {
-  if ((tooltipContent || shortcut) && fg('platform-dst-tooltip-shortcuts')) {
+  if (tooltipContent && fg('navx-full-height-sidebar')) {
     return /*#__PURE__*/React.createElement(Tooltip, {
       content: tooltipContent,
       shortcut: shortcut,
@@ -327,8 +327,7 @@ export const PanelSplitter = ({
   onResizeStart,
   onResizeEnd,
   testId,
-  tooltipContent,
-  shortcut
+  tooltipContent
 }) => {
   const [panel, setPanel] = useState(null);
   const [portal, setPortal] = useState(null);
@@ -343,7 +342,8 @@ export const PanelSplitter = ({
     onCompleteResize,
     getResizeBounds,
     resizingCssVar,
-    position
+    position,
+    shortcut
   } = context;
 
   /**

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

@@ -14,6 +14,7 @@ export const PanelSplitterProvider = ({
   panelRef,
   position = 'end',
   isEnabled = true,
+  shortcut,
   children
 }) => {
   const portalRef = useRef(null);
@@ -26,8 +27,9 @@ export const PanelSplitterProvider = ({
     position,
     panelRef,
     isEnabled,
-    portalRef
-  }), [panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, position, portalRef, panelRef, isEnabled]);
+    portalRef,
+    shortcut
+  }), [panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, position, portalRef, panelRef, isEnabled, shortcut]);
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(PanelSplitterContext.Provider, {
     value: context
   }, children), /*#__PURE__*/React.createElement("div", {

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

@@ -13,7 +13,7 @@ import { PanelSplitter } from './panel-splitter';
  * Example usage:
  * ```tsx
  * <SideNav>
- *   <SideNavPanelSplitter label="Resize or collapse Side Nav"  />
+ *   <SideNavPanelSplitter label="Double click to collapse"  />
  * </SideNav>
  * ```
  */
@@ -23,8 +23,7 @@ export const SideNavPanelSplitter = ({
   onResizeEnd,
   testId,
   shouldCollapseOnDoubleClick = true,
-  tooltipContent,
-  shortcut
+  tooltipContent
 }) => {
   const context = useContext(PanelSplitterContext);
   invariant((context === null || context === void 0 ? void 0 : context.panelId) === sideNavPanelSplitterId, 'SideNavPanelSplitter must be rendered as a child of <SideNav />.');
@@ -38,7 +37,9 @@ export const SideNavPanelSplitter = ({
     onResizeStart: onResizeStart,
     onResizeEnd: onResizeEnd,
     testId: testId,
-    tooltipContent: tooltipContent,
-    shortcut: shortcut
+    tooltipContent:
+    // Only displaying the tooltip if double click to collapse is enabled.
+    // Otherwise, we would be displaying a tooltip with "Double click to collapse", when it actually won't.
+    shouldCollapseOnDoubleClick ? tooltipContent : undefined
   }));
 };

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

@@ -0,0 +1,6 @@
+/**
+ * The keyboard shortcut used in tooltips for indicating how to toggle the side nav.
+ *
+ * Used in `SideNavToggleButton` and `SideNavPanelSplitter` tooltips.
+ */
+export const sideNavToggleTooltipKeyboardShortcut = ['Ctrl', '['];

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

@@ -23,6 +23,8 @@ import { useResizingWidthCssVarOnRootElement } from '../use-resizing-width-css-v
 import { useSafeDefaultWidth } from '../use-safe-default-width';
 import { useSideNavRef } from './element-context';
 import { sideNavFlyoutCloseDelayMs } from './flyout-close-delay-ms';
+import { useIsSideNavShortcutEnabled } from './is-side-nav-shortcut-enabled-context';
+import { sideNavToggleTooltipKeyboardShortcut } from './side-nav-toggle-tooltip-keyboard-shortcut';
 import { SideNavToggleButtonElement } from './toggle-button-context';
 import { useExpandSideNav } from './use-expand-side-nav';
 import { useSideNavToggleKeyboardShortcut } from './use-side-nav-toggle-keyboard-shortcut';
@@ -638,6 +640,8 @@ function SideNavInternal({
   useSideNavToggleKeyboardShortcut({
     canToggleWithShortcut
   });
+  // Used to conditionally display the keyboard shortcut in the SideNavPanelSplitter tooltip.
+  const isShortcutEnabled = useIsSideNavShortcutEnabled();
   useResizingWidthCssVarOnRootElement({
     isEnabled: true,
     cssVar: panelSplitterResizingVar,
@@ -715,7 +719,8 @@ function SideNavInternal({
     onCompleteResize: setWidth,
     getResizeBounds: getResizeBounds,
     resizingCssVar: panelSplitterResizingVar,
-    isEnabled: isExpandedOnDesktop && !isFlyoutVisible
+    isEnabled: isExpandedOnDesktop && !isFlyoutVisible,
+    shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([styles.flexContainer])
   }, children)));

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

@@ -7,6 +7,8 @@ import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { IconButton } from '../../top-nav-items/themed/migration';
+import { useIsSideNavShortcutEnabled } from './is-side-nav-shortcut-enabled-context';
+import { sideNavToggleTooltipKeyboardShortcut } from './side-nav-toggle-tooltip-keyboard-shortcut';
 import { SideNavToggleButtonAttachRef } from './toggle-button-context';
 import { useSideNavVisibility } from './use-side-nav-visibility';
 import { useToggleSideNav } from './use-toggle-side-nav';
@@ -31,8 +33,7 @@ export const SideNavToggleButton = ({
   collapseLabel,
   testId,
   interactionName,
-  onClick,
-  shortcut
+  onClick
 }) => {
   const {
     isExpandedOnDesktop: isSideNavExpandedOnDesktop,
@@ -111,15 +112,16 @@ export const SideNavToggleButton = ({
   const icon = props => /*#__PURE__*/React.createElement("span", {
     className: ax(["_1e0c1bgi _lcxvglyw"])
   }, isSideNavExpanded ? /*#__PURE__*/React.createElement(SidebarCollapseIcon, props) : /*#__PURE__*/React.createElement(SidebarExpandIcon, props));
+  const isShortcutEnabled = useIsSideNavShortcutEnabled();
   const tooltipProps = useMemo(() => {
-    if (fg('platform-dst-tooltip-shortcuts')) {
+    if (fg('navx-full-height-sidebar')) {
       return {
         ...toggleButtonTooltipOptions,
-        shortcut
+        shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined
       };
     }
     return toggleButtonTooltipOptions;
-  }, [shortcut]);
+  }, [isShortcutEnabled]);
   return /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     label: isSideNavExpanded ? collapseLabel : expandLabel,

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

@@ -13,8 +13,8 @@ function isIconRenderProp(func) {
  * __Icon renderer__
  *
  * Used to support render props with icons.
- * 
- * This is copied from @atlaskit/button to render IconButtons. Some IconButton's DOM element 
+ *
+ * This is copied from @atlaskit/button to render IconButtons. Some IconButton's DOM element
  * will be re-created during SSR -> SPA hydration without using this, which delays TTVC. As
  * IconRenderer is already used in @atlaskit/button to mitigate this issue, add it here to
  * mitigate the same issue for IconButtons in navigation-system, especially for ThemedIconButton.

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

@@ -49,7 +49,7 @@ var MaybeTooltip = function MaybeTooltip(_ref) {
   var tooltipContent = _ref.tooltipContent,
     shortcut = _ref.shortcut,
     children = _ref.children;
-  if ((tooltipContent || shortcut) && fg('platform-dst-tooltip-shortcuts')) {
+  if (tooltipContent && fg('navx-full-height-sidebar')) {
     return /*#__PURE__*/React.createElement(Tooltip, {
       content: tooltipContent,
       shortcut: shortcut,
@@ -338,8 +338,7 @@ export var PanelSplitter = function PanelSplitter(_ref7) {
     onResizeStart = _ref7.onResizeStart,
     onResizeEnd = _ref7.onResizeEnd,
     testId = _ref7.testId,
-    tooltipContent = _ref7.tooltipContent,
-    shortcut = _ref7.shortcut;
+    tooltipContent = _ref7.tooltipContent;
   var _useState7 = useState(null),
     _useState8 = _slicedToArray(_useState7, 2),
     panel = _useState8[0],
@@ -358,7 +357,8 @@ export var PanelSplitter = function PanelSplitter(_ref7) {
     onCompleteResize = context.onCompleteResize,
     getResizeBounds = context.getResizeBounds,
     resizingCssVar = context.resizingCssVar,
-    position = context.position;
+    position = context.position,
+    shortcut = context.shortcut;
 
   /**
    * **Explanation**

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

@@ -16,6 +16,7 @@ export var PanelSplitterProvider = function PanelSplitterProvider(_ref) {
     position = _ref$position === void 0 ? 'end' : _ref$position,
     _ref$isEnabled = _ref.isEnabled,
     isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
+    shortcut = _ref.shortcut,
     children = _ref.children;
   var portalRef = useRef(null);
   var context = useMemo(function () {
@@ -28,9 +29,10 @@ export var PanelSplitterProvider = function PanelSplitterProvider(_ref) {
       position: position,
       panelRef: panelRef,
       isEnabled: isEnabled,
-      portalRef: portalRef
+      portalRef: portalRef,
+      shortcut: shortcut
     };
-  }, [panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, position, portalRef, panelRef, isEnabled]);
+  }, [panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, position, portalRef, panelRef, isEnabled, shortcut]);
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(PanelSplitterContext.Provider, {
     value: context
   }, children), /*#__PURE__*/React.createElement("div", {

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

@@ -13,7 +13,7 @@ import { PanelSplitter } from './panel-splitter';
  * Example usage:
  * ```tsx
  * <SideNav>
- *   <SideNavPanelSplitter label="Resize or collapse Side Nav"  />
+ *   <SideNavPanelSplitter label="Double click to collapse"  />
  * </SideNav>
  * ```
  */
@@ -24,8 +24,7 @@ export var SideNavPanelSplitter = function SideNavPanelSplitter(_ref) {
     testId = _ref.testId,
     _ref$shouldCollapseOn = _ref.shouldCollapseOnDoubleClick,
     shouldCollapseOnDoubleClick = _ref$shouldCollapseOn === void 0 ? true : _ref$shouldCollapseOn,
-    tooltipContent = _ref.tooltipContent,
-    shortcut = _ref.shortcut;
+    tooltipContent = _ref.tooltipContent;
   var context = useContext(PanelSplitterContext);
   invariant((context === null || context === void 0 ? void 0 : context.panelId) === sideNavPanelSplitterId, 'SideNavPanelSplitter must be rendered as a child of <SideNav />.');
   var toggleSideNav = useToggleSideNav({
@@ -38,7 +37,9 @@ export var SideNavPanelSplitter = function SideNavPanelSplitter(_ref) {
     onResizeStart: onResizeStart,
     onResizeEnd: onResizeEnd,
     testId: testId,
-    tooltipContent: tooltipContent,
-    shortcut: shortcut
+    tooltipContent:
+    // Only displaying the tooltip if double click to collapse is enabled.
+    // Otherwise, we would be displaying a tooltip with "Double click to collapse", when it actually won't.
+    shouldCollapseOnDoubleClick ? tooltipContent : undefined
   }));
 };

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

@@ -0,0 +1,6 @@
+/**
+ * The keyboard shortcut used in tooltips for indicating how to toggle the side nav.
+ *
+ * Used in `SideNavToggleButton` and `SideNavPanelSplitter` tooltips.
+ */
+export var sideNavToggleTooltipKeyboardShortcut = ['Ctrl', '['];

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

@@ -27,6 +27,8 @@ import { useResizingWidthCssVarOnRootElement } from '../use-resizing-width-css-v
 import { useSafeDefaultWidth } from '../use-safe-default-width';
 import { useSideNavRef } from './element-context';
 import { sideNavFlyoutCloseDelayMs } from './flyout-close-delay-ms';
+import { useIsSideNavShortcutEnabled } from './is-side-nav-shortcut-enabled-context';
+import { sideNavToggleTooltipKeyboardShortcut } from './side-nav-toggle-tooltip-keyboard-shortcut';
 import { SideNavToggleButtonElement } from './toggle-button-context';
 import { useExpandSideNav } from './use-expand-side-nav';
 import { useSideNavToggleKeyboardShortcut } from './use-side-nav-toggle-keyboard-shortcut';
@@ -640,6 +642,8 @@ function SideNavInternal(_ref) {
   useSideNavToggleKeyboardShortcut({
     canToggleWithShortcut: canToggleWithShortcut
   });
+  // Used to conditionally display the keyboard shortcut in the SideNavPanelSplitter tooltip.
+  var isShortcutEnabled = useIsSideNavShortcutEnabled();
   useResizingWidthCssVarOnRootElement({
     isEnabled: true,
     cssVar: panelSplitterResizingVar,
@@ -714,7 +718,8 @@ function SideNavInternal(_ref) {
     onCompleteResize: setWidth,
     getResizeBounds: getResizeBounds,
     resizingCssVar: panelSplitterResizingVar,
-    isEnabled: isExpandedOnDesktop && !isFlyoutVisible
+    isEnabled: isExpandedOnDesktop && !isFlyoutVisible,
+    shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([styles.flexContainer])
   }, children)));

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

@@ -11,6 +11,8 @@ import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { IconButton } from '../../top-nav-items/themed/migration';
+import { useIsSideNavShortcutEnabled } from './is-side-nav-shortcut-enabled-context';
+import { sideNavToggleTooltipKeyboardShortcut } from './side-nav-toggle-tooltip-keyboard-shortcut';
 import { SideNavToggleButtonAttachRef } from './toggle-button-context';
 import { useSideNavVisibility } from './use-side-nav-visibility';
 import { useToggleSideNav } from './use-toggle-side-nav';
@@ -36,8 +38,7 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
     collapseLabel = _ref.collapseLabel,
     testId = _ref.testId,
     interactionName = _ref.interactionName,
-    onClick = _ref.onClick,
-    shortcut = _ref.shortcut;
+    onClick = _ref.onClick;
   var _useSideNavVisibility = useSideNavVisibility({
       defaultCollapsed: defaultCollapsed
     }),
@@ -121,14 +122,15 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
       className: ax(["_1e0c1bgi _lcxvglyw"])
     }, isSideNavExpanded ? /*#__PURE__*/React.createElement(SidebarCollapseIcon, props) : /*#__PURE__*/React.createElement(SidebarExpandIcon, props));
   };
+  var isShortcutEnabled = useIsSideNavShortcutEnabled();
   var tooltipProps = useMemo(function () {
-    if (fg('platform-dst-tooltip-shortcuts')) {
+    if (fg('navx-full-height-sidebar')) {
       return _objectSpread(_objectSpread({}, toggleButtonTooltipOptions), {}, {
-        shortcut: shortcut
+        shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined
       });
     }
     return toggleButtonTooltipOptions;
-  }, [shortcut]);
+  }, [isShortcutEnabled]);
   return /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     label: isSideNavExpanded ? collapseLabel : expandLabel,

package/dist/esm/ui/top-nav-items/icon-renderer.js

@@ -13,8 +13,8 @@ function isIconRenderProp(func) {
  * __Icon renderer__
  *
  * Used to support render props with icons.
- * 
- * This is copied from @atlaskit/button to render IconButtons. Some IconButton's DOM element 
+ *
+ * This is copied from @atlaskit/button to render IconButtons. Some IconButton's DOM element
  * will be re-created during SSR -> SPA hydration without using this, which delays TTVC. As
  * IconRenderer is already used in @atlaskit/button to mitigate this issue, add it here to
  * mitigate the same issue for IconButtons in navigation-system, especially for ThemedIconButton.

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

@@ -1,4 +1,5 @@
 import { type MutableRefObject } from 'react';
+import type { TooltipProps } from '@atlaskit/tooltip';
 import { type ResizeBounds } from './types';
 export type PanelSplitterContextType = {
     /**
@@ -47,6 +48,12 @@ export type PanelSplitterContextType = {
      * If `false`, the panel splitter will not be rendered.
      */
     isEnabled?: boolean;
+    /**
+     * The keyboard shortcut to display in the tooltip.
+     * Only used if the `platform-dst-tooltip-shortcuts` feature flag is enabled.
+     * Note this does not handle the keyboard shortcut functionality, it only displays the shortcut in the tooltip.
+     */
+    shortcut?: TooltipProps['shortcut'];
 };
 /**
  * Context for the panel splitter. Only internally exported.

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

@@ -25,17 +25,13 @@ export type PanelSplitterProps = {
     testId?: string;
     /**
      * Displays a tooltip with the provided content.
+     *
      * The `tooltipContent` will not be announced by screen readers because it pertains to the draggable element, which lacks keyboard functionality.
      * Use the `label` prop to provide accessible information about the panel splitter.
-     * Only used if the `platform-dst-tooltip-shortcuts` feature flag is enabled.
+     *
+     * Only used if the `navx-full-height-sidebar` feature flag is enabled.
      */
     tooltipContent?: TooltipProps['content'];
-    /**
-     * The keyboard shortcut to display in the tooltip.
-     * Only used if the `platform-dst-tooltip-shortcuts` feature flag is enabled.
-     * Note this does not handle the keyboard shortcut functionality, it only displays the shortcut in the tooltip.
-     */
-    shortcut?: TooltipProps['shortcut'];
 };
 type PanelSplitterDragData = {
     panelId: string | symbol | undefined;
@@ -60,5 +56,5 @@ export declare function isPanelSplitterDragData(data: Record<string | symbol, un
  * </SideNav>
  * ```
  */
-export declare const PanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, tooltipContent, shortcut, }: PanelSplitterProps) => ReactNode;
+export declare const PanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, tooltipContent, }: PanelSplitterProps) => ReactNode;
 export {};

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

@@ -9,4 +9,4 @@ export type PanelSplitterProviderProps = Omit<PanelSplitterContextType, 'portalR
  *
  * Should be used in the layout area components, e.g. SideNav, Aside etc, as opposed to products.
  */
-export declare const PanelSplitterProvider: ({ panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, panelRef, position, isEnabled, children, }: PanelSplitterProviderProps) => React.JSX.Element;
+export declare const PanelSplitterProvider: ({ panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, panelRef, position, isEnabled, shortcut, children, }: PanelSplitterProviderProps) => React.JSX.Element;

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

@@ -1,7 +1,25 @@
 import { type ReactNode } from 'react';
 import { type PanelSplitterProps } from './panel-splitter';
-type SideNavPanelSplitterProps = Omit<PanelSplitterProps, 'onDoubleClick'> & {
+type SideNavPanelSplitterProps = Omit<PanelSplitterProps, 'onDoubleClick' | 'tooltipContent'> & {
+    /**
+     * Whether the side nav should collapse on double click.
+     *
+     * If not provided, it will default to `true`.
+     */
     shouldCollapseOnDoubleClick?: boolean;
+    /**
+     * Displays a tooltip with the provided content. It is expected to be a string that explains the double click to collapse interaction.
+     *
+     * It will only be displayed if the `shouldCollapseOnDoubleClick` prop is `true`, or not provided (as it defaults to `true`).
+     *
+     * The `tooltipContent` will not be announced by screen readers because it pertains to the draggable element, which lacks keyboard functionality.
+     * Use the `label` prop to provide accessible information about the panel splitter.
+     *
+     * If the `isSideNavShortcutEnabled` prop is enabled on `<Root />`, the built-in keyboard shortcut will be displayed with the tooltip.
+     *
+     * Only used if the `navx-full-height-sidebar` feature flag is enabled.
+     */
+    tooltipContent?: PanelSplitterProps['tooltipContent'];
 };
 /**
  * _SideNavPanelSplitter_
@@ -12,9 +30,9 @@ type SideNavPanelSplitterProps = Omit<PanelSplitterProps, 'onDoubleClick'> & {
  * Example usage:
  * ```tsx
  * <SideNav>
- *   <SideNavPanelSplitter label="Resize or collapse Side Nav"  />
+ *   <SideNavPanelSplitter label="Double click to collapse"  />
  * </SideNav>
  * ```
  */
-export declare const SideNavPanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, shouldCollapseOnDoubleClick, tooltipContent, shortcut, }: SideNavPanelSplitterProps) => ReactNode;
+export declare const SideNavPanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, shouldCollapseOnDoubleClick, tooltipContent, }: SideNavPanelSplitterProps) => ReactNode;
 export {};

package/dist/types/ui/page-layout/side-nav/side-nav-toggle-tooltip-keyboard-shortcut.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The keyboard shortcut used in tooltips for indicating how to toggle the side nav.
+ *
+ * Used in `SideNavToggleButton` and `SideNavPanelSplitter` tooltips.
+ */
+export declare const sideNavToggleTooltipKeyboardShortcut: string[];

package/dist/types/ui/page-layout/side-nav/toggle-button.d.ts

@@ -12,7 +12,7 @@ export type SideNavVisibilityChangeAnalyticsAttributes = {
  *
  * Button for toggling the side nav. It should be used in the top bar.
  */
-export declare const SideNavToggleButton: ({ defaultCollapsed, expandLabel, collapseLabel, testId, interactionName, onClick, shortcut, }: {
+export declare const SideNavToggleButton: ({ defaultCollapsed, expandLabel, collapseLabel, testId, interactionName, onClick, }: {
     /**
      * @deprecated
      *
@@ -49,10 +49,4 @@ export declare const SideNavToggleButton: ({ defaultCollapsed, expandLabel, coll
      * The callback function that is called when the toggle button is clicked.
      */
     onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent, attributes?: SideNavVisibilityChangeAnalyticsAttributes) => void;
-    /**
-     * Display a keyboard shortcut in the tooltip.
-     * Only used if the `platform-dst-tooltip-shortcuts` feature flag is enabled.
-     * Note this does not handle the keyboard shortcut functionality, it only displays the shortcut in the tooltip.
-     */
-    shortcut?: string[];
 }) => JSX.Element;

package/dist/types-ts4.5/ui/page-layout/panel-splitter/context.d.ts

@@ -1,4 +1,5 @@
 import { type MutableRefObject } from 'react';
+import type { TooltipProps } from '@atlaskit/tooltip';
 import { type ResizeBounds } from './types';
 export type PanelSplitterContextType = {
     /**
@@ -47,6 +48,12 @@ export type PanelSplitterContextType = {
      * If `false`, the panel splitter will not be rendered.
      */
     isEnabled?: boolean;
+    /**
+     * The keyboard shortcut to display in the tooltip.
+     * Only used if the `platform-dst-tooltip-shortcuts` feature flag is enabled.
+     * Note this does not handle the keyboard shortcut functionality, it only displays the shortcut in the tooltip.
+     */
+    shortcut?: TooltipProps['shortcut'];
 };
 /**
  * Context for the panel splitter. Only internally exported.

package/dist/types-ts4.5/ui/page-layout/panel-splitter/panel-splitter.d.ts

@@ -25,17 +25,13 @@ export type PanelSplitterProps = {
     testId?: string;
     /**
      * Displays a tooltip with the provided content.
+     *
      * The `tooltipContent` will not be announced by screen readers because it pertains to the draggable element, which lacks keyboard functionality.
      * Use the `label` prop to provide accessible information about the panel splitter.
-     * Only used if the `platform-dst-tooltip-shortcuts` feature flag is enabled.
+     *
+     * Only used if the `navx-full-height-sidebar` feature flag is enabled.
      */
     tooltipContent?: TooltipProps['content'];
-    /**
-     * The keyboard shortcut to display in the tooltip.
-     * Only used if the `platform-dst-tooltip-shortcuts` feature flag is enabled.
-     * Note this does not handle the keyboard shortcut functionality, it only displays the shortcut in the tooltip.
-     */
-    shortcut?: TooltipProps['shortcut'];
 };
 type PanelSplitterDragData = {
     panelId: string | symbol | undefined;
@@ -60,5 +56,5 @@ export declare function isPanelSplitterDragData(data: Record<string | symbol, un
  * </SideNav>
  * ```
  */
-export declare const PanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, tooltipContent, shortcut, }: PanelSplitterProps) => ReactNode;
+export declare const PanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, tooltipContent, }: PanelSplitterProps) => ReactNode;
 export {};

package/dist/types-ts4.5/ui/page-layout/panel-splitter/provider.d.ts

@@ -9,4 +9,4 @@ export type PanelSplitterProviderProps = Omit<PanelSplitterContextType, 'portalR
  *
  * Should be used in the layout area components, e.g. SideNav, Aside etc, as opposed to products.
  */
-export declare const PanelSplitterProvider: ({ panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, panelRef, position, isEnabled, children, }: PanelSplitterProviderProps) => React.JSX.Element;
+export declare const PanelSplitterProvider: ({ panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, panelRef, position, isEnabled, shortcut, children, }: PanelSplitterProviderProps) => React.JSX.Element;

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

@@ -1,7 +1,25 @@
 import { type ReactNode } from 'react';
 import { type PanelSplitterProps } from './panel-splitter';
-type SideNavPanelSplitterProps = Omit<PanelSplitterProps, 'onDoubleClick'> & {
+type SideNavPanelSplitterProps = Omit<PanelSplitterProps, 'onDoubleClick' | 'tooltipContent'> & {
+    /**
+     * Whether the side nav should collapse on double click.
+     *
+     * If not provided, it will default to `true`.
+     */
     shouldCollapseOnDoubleClick?: boolean;
+    /**
+     * Displays a tooltip with the provided content. It is expected to be a string that explains the double click to collapse interaction.
+     *
+     * It will only be displayed if the `shouldCollapseOnDoubleClick` prop is `true`, or not provided (as it defaults to `true`).
+     *
+     * The `tooltipContent` will not be announced by screen readers because it pertains to the draggable element, which lacks keyboard functionality.
+     * Use the `label` prop to provide accessible information about the panel splitter.
+     *
+     * If the `isSideNavShortcutEnabled` prop is enabled on `<Root />`, the built-in keyboard shortcut will be displayed with the tooltip.
+     *
+     * Only used if the `navx-full-height-sidebar` feature flag is enabled.
+     */
+    tooltipContent?: PanelSplitterProps['tooltipContent'];
 };
 /**
  * _SideNavPanelSplitter_
@@ -12,9 +30,9 @@ type SideNavPanelSplitterProps = Omit<PanelSplitterProps, 'onDoubleClick'> & {
  * Example usage:
  * ```tsx
  * <SideNav>
- *   <SideNavPanelSplitter label="Resize or collapse Side Nav"  />
+ *   <SideNavPanelSplitter label="Double click to collapse"  />
  * </SideNav>
  * ```
  */
-export declare const SideNavPanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, shouldCollapseOnDoubleClick, tooltipContent, shortcut, }: SideNavPanelSplitterProps) => ReactNode;
+export declare const SideNavPanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, shouldCollapseOnDoubleClick, tooltipContent, }: SideNavPanelSplitterProps) => ReactNode;
 export {};

package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-toggle-tooltip-keyboard-shortcut.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The keyboard shortcut used in tooltips for indicating how to toggle the side nav.
+ *
+ * Used in `SideNavToggleButton` and `SideNavPanelSplitter` tooltips.
+ */
+export declare const sideNavToggleTooltipKeyboardShortcut: string[];

package/dist/types-ts4.5/ui/page-layout/side-nav/toggle-button.d.ts

@@ -12,7 +12,7 @@ export type SideNavVisibilityChangeAnalyticsAttributes = {
  *
  * Button for toggling the side nav. It should be used in the top bar.
  */
-export declare const SideNavToggleButton: ({ defaultCollapsed, expandLabel, collapseLabel, testId, interactionName, onClick, shortcut, }: {
+export declare const SideNavToggleButton: ({ defaultCollapsed, expandLabel, collapseLabel, testId, interactionName, onClick, }: {
     /**
      * @deprecated
      *
@@ -49,10 +49,4 @@ export declare const SideNavToggleButton: ({ defaultCollapsed, expandLabel, coll
      * The callback function that is called when the toggle button is clicked.
      */
     onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent, attributes?: SideNavVisibilityChangeAnalyticsAttributes) => void;
-    /**
-     * Display a keyboard shortcut in the tooltip.
-     * Only used if the `platform-dst-tooltip-shortcuts` feature flag is enabled.
-     * Note this does not handle the keyboard shortcut functionality, it only displays the shortcut in the tooltip.
-     */
-    shortcut?: string[];
 }) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "4.6.0",
+	"version": "5.0.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",