@atlaskit/navigation-system 2.13.0 → 2.14.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlassian/navigation-system
 
+## 2.14.0
+
+### Minor Changes
+
+- [`3ea3fab89f015`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3ea3fab89f015) -
+  `SideNavToggleButton` now supports displaying keyboard shortcuts in its tooltip through the
+  `shortcut` prop.
+
+  `PanelSplitter` can now display a tooltip with an optional keyboard shortcut on hover or focus. A
+  tooltip will be rendered when either the `tooltipContent` or `shortcut` prop is set.
+
+  These new props are currently behind the `platform-dst-tooltip-shortcuts` feature flag.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.13.0
 
 ### Minor Changes

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

@@ -26,6 +26,7 @@ var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _blockDraggingToIframes = require("@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes");
 var _disableNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview");
 var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _context = require("./context");
 var _convertResizeBoundToPixels = require("./convert-resize-bound-to-pixels");
@@ -51,6 +52,24 @@ var panelSplitterDragDataSymbol = Symbol('panel-splitter-drag-data');
 function signPanelSplitterDragData(data) {
   return _objectSpread(_objectSpread({}, data), {}, (0, _defineProperty2.default)({}, panelSplitterDragDataSymbol, true));
 }
+/**
+ * A wrapper component that renders a tooltip if the tooltipContent or shortcut is provided.
+ */
+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')) {
+    return /*#__PURE__*/React.createElement(_tooltip.default, {
+      content: tooltipContent,
+      shortcut: shortcut,
+      position: "mouse",
+      mousePosition: "right",
+      isScreenReaderAnnouncementDisabled: true
+    }, children);
+  }
+  return children;
+};
 function isPanelSplitterDragData(data) {
   return data[panelSplitterDragDataSymbol] === true;
 }
@@ -59,19 +78,21 @@ function getTextDirection(element) {
     direction = _window$getComputedSt.direction;
   return direction === 'rtl' ? 'rtl' : 'ltr';
 }
-var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
-  var label = _ref.label,
-    onResizeStart = _ref.onResizeStart,
-    onResizeEnd = _ref.onResizeEnd,
-    testId = _ref.testId,
-    panelId = _ref.panelId,
-    panelWidth = _ref.panelWidth,
-    onCompleteResize = _ref.onCompleteResize,
-    getResizeBounds = _ref.getResizeBounds,
-    panel = _ref.panel,
-    portal = _ref.portal,
-    resizingCssVar = _ref.resizingCssVar,
-    position = _ref.position;
+var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
+  var label = _ref2.label,
+    onResizeStart = _ref2.onResizeStart,
+    onResizeEnd = _ref2.onResizeEnd,
+    testId = _ref2.testId,
+    panelId = _ref2.panelId,
+    panelWidth = _ref2.panelWidth,
+    onCompleteResize = _ref2.onCompleteResize,
+    getResizeBounds = _ref2.getResizeBounds,
+    panel = _ref2.panel,
+    portal = _ref2.portal,
+    resizingCssVar = _ref2.resizingCssVar,
+    position = _ref2.position,
+    tooltipContent = _ref2.tooltipContent,
+    shortcut = _ref2.shortcut;
   var splitterRef = (0, _react.useRef)(null);
   var labelId = (0, _useId.useId)();
   // Separate state used for the input range width to remove the UI's dependency on the "persisted" layout state value being updated
@@ -108,8 +129,8 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
       element: splitter
     }), (0, _adapter.draggable)({
       element: splitter,
-      onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
-        var nativeSetDragImage = _ref2.nativeSetDragImage;
+      onGenerateDragPreview: function onGenerateDragPreview(_ref3) {
+        var nativeSetDragImage = _ref3.nativeSetDragImage;
         // We will be moving the line to indicate a drag. We can disable the native drag preview
         (0, _disableNativeDragPreview.disableNativeDragPreview)({
           nativeSetDragImage: nativeSetDragImage
@@ -136,8 +157,8 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
           direction: getTextDirection(panel)
         });
       },
-      onDragStart: function onDragStart(_ref3) {
-        var source = _ref3.source;
+      onDragStart: function onDragStart(_ref4) {
+        var source = _ref4.source;
         (0, _tinyInvariant.default)(isPanelSplitterDragData(source.data));
         onResizeStart === null || onResizeStart === void 0 || onResizeStart({
           initialWidth: source.data.initialWidth
@@ -146,9 +167,9 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
         // Close any open layers when the user starts resizing
         openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
       },
-      onDrag: function onDrag(_ref4) {
-        var location = _ref4.location,
-          source = _ref4.source;
+      onDrag: function onDrag(_ref5) {
+        var location = _ref5.location,
+          source = _ref5.source;
         (0, _tinyInvariant.default)(isPanelSplitterDragData(source.data));
         var _source$data = source.data,
           initialWidth = _source$data.initialWidth,
@@ -169,8 +190,8 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
         panel.style.setProperty(resizingCssVar, resizingWidth);
         source.data.resizingWidth = resizingWidth;
       },
-      onDrop: function onDrop(_ref5) {
-        var source = _ref5.source;
+      onDrop: function onDrop(_ref6) {
+        var source = _ref6.source;
         (0, _tinyInvariant.default)(isPanelSplitterDragData(source.data));
         _preventUnhandled.preventUnhandled.stop();
         var finalWidth = (0, _getWidth.getPixelWidth)(panel);
@@ -281,6 +302,9 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
   return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/React.createElement("div", {
     "data-testid": testId ? "".concat(testId, "-container") : undefined,
     className: (0, _runtime.ax)([containerStyles.root, position === 'start' && containerStyles.positionStart, position === 'end' && containerStyles.positionEnd])
+  }, /*#__PURE__*/React.createElement(MaybeTooltip, {
+    tooltipContent: tooltipContent,
+    shortcut: shortcut
   }, /*#__PURE__*/React.createElement("div", {
     ref: splitterRef,
     "data-testid": testId,
@@ -301,7 +325,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
     id: labelId
   }, label)), /*#__PURE__*/React.createElement("span", {
     className: (0, _runtime.ax)([lineStyles.root])
-  }))), portal);
+  })))), portal);
 };
 
 /**
@@ -319,11 +343,13 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
  * </SideNav>
  * ```
  */
-var PanelSplitter = exports.PanelSplitter = function PanelSplitter(_ref6) {
-  var label = _ref6.label,
-    onResizeStart = _ref6.onResizeStart,
-    onResizeEnd = _ref6.onResizeEnd,
-    testId = _ref6.testId;
+var PanelSplitter = exports.PanelSplitter = function PanelSplitter(_ref7) {
+  var label = _ref7.label,
+    onResizeStart = _ref7.onResizeStart,
+    onResizeEnd = _ref7.onResizeEnd,
+    testId = _ref7.testId,
+    tooltipContent = _ref7.tooltipContent,
+    shortcut = _ref7.shortcut;
   var _useState7 = (0, _react.useState)(null),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     panel = _useState8[0],
@@ -437,6 +463,8 @@ var PanelSplitter = exports.PanelSplitter = function PanelSplitter(_ref6) {
     onCompleteResize: onCompleteResize,
     getResizeBounds: getResizeBounds,
     resizingCssVar: resizingCssVar,
-    position: position
+    position: position,
+    tooltipContent: tooltipContent,
+    shortcut: shortcut
   });
 };

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

@@ -32,7 +32,9 @@ var SideNavPanelSplitter = exports.SideNavPanelSplitter = function SideNavPanelS
     onResizeEnd = _ref.onResizeEnd,
     testId = _ref.testId,
     _ref$shouldCollapseOn = _ref.shouldCollapseOnDoubleClick,
-    shouldCollapseOnDoubleClick = _ref$shouldCollapseOn === void 0 ? true : _ref$shouldCollapseOn;
+    shouldCollapseOnDoubleClick = _ref$shouldCollapseOn === void 0 ? true : _ref$shouldCollapseOn,
+    tooltipContent = _ref.tooltipContent,
+    shortcut = _ref.shortcut;
   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)({
@@ -44,6 +46,8 @@ var SideNavPanelSplitter = exports.SideNavPanelSplitter = function SideNavPanelS
     label: label,
     onResizeStart: onResizeStart,
     onResizeEnd: onResizeEnd,
-    testId: testId
+    testId: testId,
+    tooltipContent: tooltipContent,
+    shortcut: shortcut
   }));
 };

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

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SideNavToggleButton = void 0;
 require("./toggle-button.compiled.css");
 var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
@@ -20,6 +21,8 @@ var _toggleButtonContext = require("./toggle-button-context");
 var _useSideNavVisibility2 = require("./use-side-nav-visibility");
 var _useToggleSideNav = require("./use-toggle-side-nav");
 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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var toggleButtonTooltipOptions = {
   // We're disabling pointer events on the tooltip to prevent it from blocking mouse events, so that the side nav flyout stays open
   // when moving the mouse from the top bar to the side nav.
@@ -47,7 +50,8 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
     collapseLabel = _ref.collapseLabel,
     testId = _ref.testId,
     interactionName = _ref.interactionName,
-    onClick = _ref.onClick;
+    onClick = _ref.onClick,
+    shortcut = _ref.shortcut;
   var _useSideNavVisibility = (0, _useSideNavVisibility2.useSideNavVisibility)({
       defaultCollapsed: defaultCollapsed
     }),
@@ -111,6 +115,14 @@ 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 tooltipProps = (0, _react.useMemo)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform-dst-tooltip-shortcuts')) {
+      return _objectSpread(_objectSpread({}, toggleButtonTooltipOptions), {}, {
+        shortcut: shortcut
+      });
+    }
+    return toggleButtonTooltipOptions;
+  }, [shortcut]);
   var iconButton = /*#__PURE__*/_react.default.createElement(_migration.IconButton, {
     appearance: "subtle",
     label: isSideNavExpanded ? collapseLabel : expandLabel,
@@ -120,7 +132,7 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
     isTooltipDisabled: false,
     interactionName: interactionName,
     ref: (0, _platformFeatureFlags.fg)('platform_fix_component_state_update_for_suspense') ? elementRef : ref,
-    tooltip: toggleButtonTooltipOptions
+    tooltip: tooltipProps
   });
   var isInsideSlot = (0, _react.useContext)(_toggleButtonContext.SideNavToggleButtonSlotContext);
 

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

@@ -15,6 +15,7 @@ import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { blockDraggingToIFrames } from '@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes';
 import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+import Tooltip from '@atlaskit/tooltip';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { OnDoubleClickContext, PanelSplitterContext } from './context';
 import { convertResizeBoundToPixels } from './convert-resize-bound-to-pixels';
@@ -40,6 +41,25 @@ function signPanelSplitterDragData(data) {
     [panelSplitterDragDataSymbol]: true
   };
 }
+/**
+ * A wrapper component that renders a tooltip if the tooltipContent or shortcut is provided.
+ */
+const MaybeTooltip = ({
+  tooltipContent,
+  shortcut,
+  children
+}) => {
+  if ((tooltipContent || shortcut) && fg('platform-dst-tooltip-shortcuts')) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      content: tooltipContent,
+      shortcut: shortcut,
+      position: "mouse",
+      mousePosition: "right",
+      isScreenReaderAnnouncementDisabled: true
+    }, children);
+  }
+  return children;
+};
 export function isPanelSplitterDragData(data) {
   return data[panelSplitterDragDataSymbol] === true;
 }
@@ -61,7 +81,9 @@ const PortaledPanelSplitter = ({
   panel,
   portal,
   resizingCssVar,
-  position
+  position,
+  tooltipContent,
+  shortcut
 }) => {
   const splitterRef = useRef(null);
   const labelId = useId();
@@ -259,6 +281,9 @@ const PortaledPanelSplitter = ({
   return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
     "data-testid": testId ? `${testId}-container` : undefined,
     className: ax([containerStyles.root, position === 'start' && containerStyles.positionStart, position === 'end' && containerStyles.positionEnd])
+  }, /*#__PURE__*/React.createElement(MaybeTooltip, {
+    tooltipContent: tooltipContent,
+    shortcut: shortcut
   }, /*#__PURE__*/React.createElement("div", {
     ref: splitterRef,
     "data-testid": testId,
@@ -279,7 +304,7 @@ const PortaledPanelSplitter = ({
     id: labelId
   }, label)), /*#__PURE__*/React.createElement("span", {
     className: ax([lineStyles.root])
-  }))), portal);
+  })))), portal);
 };
 
 /**
@@ -301,7 +326,9 @@ export const PanelSplitter = ({
   label,
   onResizeStart,
   onResizeEnd,
-  testId
+  testId,
+  tooltipContent,
+  shortcut
 }) => {
   const [panel, setPanel] = useState(null);
   const [portal, setPortal] = useState(null);
@@ -412,6 +439,8 @@ export const PanelSplitter = ({
     onCompleteResize: onCompleteResize,
     getResizeBounds: getResizeBounds,
     resizingCssVar: resizingCssVar,
-    position: position
+    position: position,
+    tooltipContent: tooltipContent,
+    shortcut: shortcut
   });
 };

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

@@ -22,7 +22,9 @@ export const SideNavPanelSplitter = ({
   onResizeStart,
   onResizeEnd,
   testId,
-  shouldCollapseOnDoubleClick = true
+  shouldCollapseOnDoubleClick = true,
+  tooltipContent,
+  shortcut
 }) => {
   const context = useContext(PanelSplitterContext);
   invariant((context === null || context === void 0 ? void 0 : context.panelId) === sideNavPanelSplitterId, 'SideNavPanelSplitter must be rendered as a child of <SideNav />.');
@@ -35,6 +37,8 @@ export const SideNavPanelSplitter = ({
     label: label,
     onResizeStart: onResizeStart,
     onResizeEnd: onResizeEnd,
-    testId: testId
+    testId: testId,
+    tooltipContent: tooltipContent,
+    shortcut: shortcut
   }));
 };

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

@@ -1,7 +1,7 @@
 /* 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';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
@@ -36,7 +36,8 @@ export const SideNavToggleButton = ({
   collapseLabel,
   testId,
   interactionName,
-  onClick
+  onClick,
+  shortcut
 }) => {
   const {
     isExpandedOnDesktop: isSideNavExpandedOnDesktop,
@@ -98,6 +99,15 @@ 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 tooltipProps = useMemo(() => {
+    if (fg('platform-dst-tooltip-shortcuts')) {
+      return {
+        ...toggleButtonTooltipOptions,
+        shortcut
+      };
+    }
+    return toggleButtonTooltipOptions;
+  }, [shortcut]);
   const iconButton = /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     label: isSideNavExpanded ? collapseLabel : expandLabel,
@@ -107,7 +117,7 @@ export const SideNavToggleButton = ({
     isTooltipDisabled: false,
     interactionName: interactionName,
     ref: fg('platform_fix_component_state_update_for_suspense') ? elementRef : ref,
-    tooltip: toggleButtonTooltipOptions
+    tooltip: tooltipProps
   });
   const isInsideSlot = useContext(SideNavToggleButtonSlotContext);
 

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

@@ -19,6 +19,7 @@ import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { blockDraggingToIFrames } from '@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes';
 import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+import Tooltip from '@atlaskit/tooltip';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { OnDoubleClickContext, PanelSplitterContext } from './context';
 import { convertResizeBoundToPixels } from './convert-resize-bound-to-pixels';
@@ -41,6 +42,24 @@ var panelSplitterDragDataSymbol = Symbol('panel-splitter-drag-data');
 function signPanelSplitterDragData(data) {
   return _objectSpread(_objectSpread({}, data), {}, _defineProperty({}, panelSplitterDragDataSymbol, true));
 }
+/**
+ * A wrapper component that renders a tooltip if the tooltipContent or shortcut is provided.
+ */
+var MaybeTooltip = function MaybeTooltip(_ref) {
+  var tooltipContent = _ref.tooltipContent,
+    shortcut = _ref.shortcut,
+    children = _ref.children;
+  if ((tooltipContent || shortcut) && fg('platform-dst-tooltip-shortcuts')) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      content: tooltipContent,
+      shortcut: shortcut,
+      position: "mouse",
+      mousePosition: "right",
+      isScreenReaderAnnouncementDisabled: true
+    }, children);
+  }
+  return children;
+};
 export function isPanelSplitterDragData(data) {
   return data[panelSplitterDragDataSymbol] === true;
 }
@@ -49,19 +68,21 @@ function getTextDirection(element) {
     direction = _window$getComputedSt.direction;
   return direction === 'rtl' ? 'rtl' : 'ltr';
 }
-var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
-  var label = _ref.label,
-    onResizeStart = _ref.onResizeStart,
-    onResizeEnd = _ref.onResizeEnd,
-    testId = _ref.testId,
-    panelId = _ref.panelId,
-    panelWidth = _ref.panelWidth,
-    onCompleteResize = _ref.onCompleteResize,
-    getResizeBounds = _ref.getResizeBounds,
-    panel = _ref.panel,
-    portal = _ref.portal,
-    resizingCssVar = _ref.resizingCssVar,
-    position = _ref.position;
+var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
+  var label = _ref2.label,
+    onResizeStart = _ref2.onResizeStart,
+    onResizeEnd = _ref2.onResizeEnd,
+    testId = _ref2.testId,
+    panelId = _ref2.panelId,
+    panelWidth = _ref2.panelWidth,
+    onCompleteResize = _ref2.onCompleteResize,
+    getResizeBounds = _ref2.getResizeBounds,
+    panel = _ref2.panel,
+    portal = _ref2.portal,
+    resizingCssVar = _ref2.resizingCssVar,
+    position = _ref2.position,
+    tooltipContent = _ref2.tooltipContent,
+    shortcut = _ref2.shortcut;
   var splitterRef = useRef(null);
   var labelId = useId();
   // Separate state used for the input range width to remove the UI's dependency on the "persisted" layout state value being updated
@@ -98,8 +119,8 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
       element: splitter
     }), draggable({
       element: splitter,
-      onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
-        var nativeSetDragImage = _ref2.nativeSetDragImage;
+      onGenerateDragPreview: function onGenerateDragPreview(_ref3) {
+        var nativeSetDragImage = _ref3.nativeSetDragImage;
         // We will be moving the line to indicate a drag. We can disable the native drag preview
         disableNativeDragPreview({
           nativeSetDragImage: nativeSetDragImage
@@ -126,8 +147,8 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
           direction: getTextDirection(panel)
         });
       },
-      onDragStart: function onDragStart(_ref3) {
-        var source = _ref3.source;
+      onDragStart: function onDragStart(_ref4) {
+        var source = _ref4.source;
         invariant(isPanelSplitterDragData(source.data));
         onResizeStart === null || onResizeStart === void 0 || onResizeStart({
           initialWidth: source.data.initialWidth
@@ -136,9 +157,9 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
         // Close any open layers when the user starts resizing
         openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
       },
-      onDrag: function onDrag(_ref4) {
-        var location = _ref4.location,
-          source = _ref4.source;
+      onDrag: function onDrag(_ref5) {
+        var location = _ref5.location,
+          source = _ref5.source;
         invariant(isPanelSplitterDragData(source.data));
         var _source$data = source.data,
           initialWidth = _source$data.initialWidth,
@@ -159,8 +180,8 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
         panel.style.setProperty(resizingCssVar, resizingWidth);
         source.data.resizingWidth = resizingWidth;
       },
-      onDrop: function onDrop(_ref5) {
-        var source = _ref5.source;
+      onDrop: function onDrop(_ref6) {
+        var source = _ref6.source;
         invariant(isPanelSplitterDragData(source.data));
         preventUnhandled.stop();
         var finalWidth = getPixelWidth(panel);
@@ -271,6 +292,9 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
   return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
     "data-testid": testId ? "".concat(testId, "-container") : undefined,
     className: ax([containerStyles.root, position === 'start' && containerStyles.positionStart, position === 'end' && containerStyles.positionEnd])
+  }, /*#__PURE__*/React.createElement(MaybeTooltip, {
+    tooltipContent: tooltipContent,
+    shortcut: shortcut
   }, /*#__PURE__*/React.createElement("div", {
     ref: splitterRef,
     "data-testid": testId,
@@ -291,7 +315,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
     id: labelId
   }, label)), /*#__PURE__*/React.createElement("span", {
     className: ax([lineStyles.root])
-  }))), portal);
+  })))), portal);
 };
 
 /**
@@ -309,11 +333,13 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
  * </SideNav>
  * ```
  */
-export var PanelSplitter = function PanelSplitter(_ref6) {
-  var label = _ref6.label,
-    onResizeStart = _ref6.onResizeStart,
-    onResizeEnd = _ref6.onResizeEnd,
-    testId = _ref6.testId;
+export var PanelSplitter = function PanelSplitter(_ref7) {
+  var label = _ref7.label,
+    onResizeStart = _ref7.onResizeStart,
+    onResizeEnd = _ref7.onResizeEnd,
+    testId = _ref7.testId,
+    tooltipContent = _ref7.tooltipContent,
+    shortcut = _ref7.shortcut;
   var _useState7 = useState(null),
     _useState8 = _slicedToArray(_useState7, 2),
     panel = _useState8[0],
@@ -427,6 +453,8 @@ export var PanelSplitter = function PanelSplitter(_ref6) {
     onCompleteResize: onCompleteResize,
     getResizeBounds: getResizeBounds,
     resizingCssVar: resizingCssVar,
-    position: position
+    position: position,
+    tooltipContent: tooltipContent,
+    shortcut: shortcut
   });
 };

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

@@ -23,7 +23,9 @@ export var SideNavPanelSplitter = function SideNavPanelSplitter(_ref) {
     onResizeEnd = _ref.onResizeEnd,
     testId = _ref.testId,
     _ref$shouldCollapseOn = _ref.shouldCollapseOnDoubleClick,
-    shouldCollapseOnDoubleClick = _ref$shouldCollapseOn === void 0 ? true : _ref$shouldCollapseOn;
+    shouldCollapseOnDoubleClick = _ref$shouldCollapseOn === void 0 ? true : _ref$shouldCollapseOn,
+    tooltipContent = _ref.tooltipContent,
+    shortcut = _ref.shortcut;
   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({
@@ -35,6 +37,8 @@ export var SideNavPanelSplitter = function SideNavPanelSplitter(_ref) {
     label: label,
     onResizeStart: onResizeStart,
     onResizeEnd: onResizeEnd,
-    testId: testId
+    testId: testId,
+    tooltipContent: tooltipContent,
+    shortcut: shortcut
   }));
 };

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

@@ -1,8 +1,11 @@
 /* toggle-button.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./toggle-button.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
@@ -38,7 +41,8 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
     collapseLabel = _ref.collapseLabel,
     testId = _ref.testId,
     interactionName = _ref.interactionName,
-    onClick = _ref.onClick;
+    onClick = _ref.onClick,
+    shortcut = _ref.shortcut;
   var _useSideNavVisibility = useSideNavVisibility({
       defaultCollapsed: defaultCollapsed
     }),
@@ -102,6 +106,14 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
       className: ax(["_1e0c1bgi _lcxvglyw"])
     }, isSideNavExpanded ? /*#__PURE__*/React.createElement(SidebarCollapseIcon, props) : /*#__PURE__*/React.createElement(SidebarExpandIcon, props));
   };
+  var tooltipProps = useMemo(function () {
+    if (fg('platform-dst-tooltip-shortcuts')) {
+      return _objectSpread(_objectSpread({}, toggleButtonTooltipOptions), {}, {
+        shortcut: shortcut
+      });
+    }
+    return toggleButtonTooltipOptions;
+  }, [shortcut]);
   var iconButton = /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     label: isSideNavExpanded ? collapseLabel : expandLabel,
@@ -111,7 +123,7 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
     isTooltipDisabled: false,
     interactionName: interactionName,
     ref: fg('platform_fix_component_state_update_for_suspense') ? elementRef : ref,
-    tooltip: toggleButtonTooltipOptions
+    tooltip: tooltipProps
   });
   var isInsideSlot = useContext(SideNavToggleButtonSlotContext);
 

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

@@ -3,6 +3,7 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
+import { type TooltipProps } from '@atlaskit/tooltip';
 import type { ResizeBounds, ResizeEndCallback, ResizeStartCallback } from './types';
 export type PanelSplitterProps = {
     /**
@@ -22,6 +23,19 @@ export type PanelSplitterProps = {
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     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.
+     */
+    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;
@@ -46,5 +60,5 @@ export declare function isPanelSplitterDragData(data: Record<string | symbol, un
  * </SideNav>
  * ```
  */
-export declare const PanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, }: PanelSplitterProps) => ReactNode;
+export declare const PanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, tooltipContent, shortcut, }: PanelSplitterProps) => ReactNode;
 export {};

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

@@ -16,5 +16,5 @@ type SideNavPanelSplitterProps = Omit<PanelSplitterProps, 'onDoubleClick'> & {
  * </SideNav>
  * ```
  */
-export declare const SideNavPanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, shouldCollapseOnDoubleClick, }: SideNavPanelSplitterProps) => ReactNode;
+export declare const SideNavPanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, shouldCollapseOnDoubleClick, tooltipContent, shortcut, }: SideNavPanelSplitterProps) => ReactNode;
 export {};

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, }: {
+export declare const SideNavToggleButton: ({ defaultCollapsed, expandLabel, collapseLabel, testId, interactionName, onClick, shortcut, }: {
     /**
      * @deprecated
      *
@@ -49,4 +49,10 @@ 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/panel-splitter.d.ts

@@ -3,6 +3,7 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
+import { type TooltipProps } from '@atlaskit/tooltip';
 import type { ResizeBounds, ResizeEndCallback, ResizeStartCallback } from './types';
 export type PanelSplitterProps = {
     /**
@@ -22,6 +23,19 @@ export type PanelSplitterProps = {
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     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.
+     */
+    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;
@@ -46,5 +60,5 @@ export declare function isPanelSplitterDragData(data: Record<string | symbol, un
  * </SideNav>
  * ```
  */
-export declare const PanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, }: PanelSplitterProps) => ReactNode;
+export declare const PanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, tooltipContent, shortcut, }: PanelSplitterProps) => ReactNode;
 export {};

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

@@ -16,5 +16,5 @@ type SideNavPanelSplitterProps = Omit<PanelSplitterProps, 'onDoubleClick'> & {
  * </SideNav>
  * ```
  */
-export declare const SideNavPanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, shouldCollapseOnDoubleClick, }: SideNavPanelSplitterProps) => ReactNode;
+export declare const SideNavPanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, shouldCollapseOnDoubleClick, tooltipContent, shortcut, }: SideNavPanelSplitterProps) => ReactNode;
 export {};

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, }: {
+export declare const SideNavToggleButton: ({ defaultCollapsed, expandLabel, collapseLabel, testId, interactionName, onClick, shortcut, }: {
     /**
      * @deprecated
      *
@@ -49,4 +49,10 @@ 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": "2.13.0",
+	"version": "2.14.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -67,8 +67,8 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
-		"@atlaskit/avatar": "^25.2.0",
-		"@atlaskit/button": "^23.4.0",
+		"@atlaskit/avatar": "^25.3.0",
+		"@atlaskit/button": "^23.5.0",
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/ds-lib": "^5.1.0",
 		"@atlaskit/icon": "^28.3.0",
@@ -113,7 +113,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/select": "^21.3.0",
 		"@atlaskit/skeleton": "^2.1.0",
-		"@atlaskit/temp-nav-app-icons": "^0.12.0",
+		"@atlaskit/temp-nav-app-icons": "^0.13.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@atlassian/gemini": "^1.20.0",
@@ -186,6 +186,9 @@
 		"platform_dst_nav4_menu_section_heading_a11y": {
 			"type": "boolean"
 		},
+		"platform-dst-tooltip-shortcuts": {
+			"type": "boolean"
+		},
 		"platform_dst_nav4_side_nav_click_outside_fix": {
 			"type": "boolean"
 		},