@atlaskit/navigation-system 2.12.0 → 2.14.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @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
+
+- [`9d65ef412f30c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9d65ef412f30c) -
+  Cleans up the `platform_design_system_nav4_sidenav_border` feature gate. The side nav border is
+  now only applied when it does not have a shadow.
+
+### Patch Changes
+
+- [`437668dfbdec9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/437668dfbdec9) -
+  Add explicit types to a number of DST components
+- Updated dependencies
+
 ## 2.12.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/side-nav.compiled.css

@@ -1,7 +1,6 @@
 
 ._nd5l1b6c{grid-area:main/aside/aside/aside}
 ._191wglyw{border-inline-start:none}
-._t51z7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
 ._t51zglyw{border-inline-end:none}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
 ._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
 ._1bah1yb4{justify-content:space-between}
@@ -16,5 +15,5 @@
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
-@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._p5clglyw{border-inline-end:none}._qiln1gzg{grid-area:main}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
+@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
 @supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}}

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

@@ -51,11 +51,8 @@ function getResizeBounds() {
 }
 var openLayerObserverSideNavNamespace = 'side-nav';
 var styles = {
-  root: "_nd5l1b6c _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _4ap3vuon _scbpglyw",
-  oldBorder: "_t51z7r9e",
-  newBorder: "_191wglyw _t51zglyw _p5cl7r9e",
-  newBorderFlyoutOpen: "_p5clglyw",
-  flyoutOpen: "_qiln1gzg _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
+  root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5cl7r9e _4ap3vuon _scbpglyw",
+  flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
   flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
   hiddenMobileAndDesktop: "_1e0cglyw",
@@ -583,7 +580,7 @@ function SideNavInternal(_ref) {
     style: (0, _defineProperty2.default)({}, _constants.sideNavVar, clampedWidth),
     ref: mergedRef,
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('platform_design_system_nav4_sidenav_border') ? styles.newBorder : styles.oldBorder, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && (0, _platformFeatureFlags.fg)('platform_design_system_nav4_sidenav_border') && styles.newBorderFlyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed, isFlyoutClosed && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebar])
+    className: (0, _runtime.ax)([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed, isFlyoutClosed && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebar])
   }), /*#__PURE__*/React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.sideNavLiveWidthVar,
     value: "0px",

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/cjs/ui/top-nav-items/themed/button.js

@@ -132,16 +132,7 @@ var ThemedPressable = /*#__PURE__*/(0, _react.forwardRef)(function ThemedPressab
     isDisabled: isDisabled
   }));
 });
-/**
- * Intentionally an almost-duplicate of `ThemedPressable` - make sure to update both.
- *
- * More 'clever' solutions were tried but I couldn't get them working in an acceptable state.
- *
- * Polymorphism had many typing issues and required sacrificing type safety.
- *
- * Render props had problems passing down styles through `xcss` to the `children` function.
- */
-var ThemedAnchor = (0, _forwardRefWithGeneric.default)(function ThemedAnchor(_ref3, ref) {
+function ThemedAnchorFn(_ref3, ref) {
   var _ref3$appearance = _ref3.appearance,
     appearance = _ref3$appearance === void 0 ? 'default' : _ref3$appearance,
     _ref3$shape = _ref3.shape,
@@ -161,7 +152,17 @@ var ThemedAnchor = (0, _forwardRefWithGeneric.default)(function ThemedAnchor(_re
     ,
     xcss: (0, _react2.cx)(styles.root, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled)
   }));
-});
+}
+/**
+ * Intentionally an almost-duplicate of `ThemedPressable` - make sure to update both.
+ *
+ * More 'clever' solutions were tried but I couldn't get them working in an acceptable state.
+ *
+ * Polymorphism had many typing issues and required sacrificing type safety.
+ *
+ * Render props had problems passing down styles through `xcss` to the `children` function.
+ */
+var ThemedAnchor = (0, _forwardRefWithGeneric.default)(ThemedAnchorFn);
 var textButtonStyles = {
   iconBefore: "_vwz4idpf",
   text: "_k48p1wq8"
@@ -191,12 +192,7 @@ var ThemedButton = exports.ThemedButton = /*#__PURE__*/(0, _react.forwardRef)(fu
     className: (0, _runtime.ax)([textButtonStyles.text])
   }, children));
 });
-/**
- * __Themed link button__
- *
- * A themed link button for the top bar.
- */
-var ThemedLinkButton = exports.ThemedLinkButton = (0, _forwardRefWithGeneric.default)(function ThemedLinkButton(_ref5, ref) {
+function ThemedLinkButtonFn(_ref5, ref) {
   var IconBefore = _ref5.iconBefore,
     children = _ref5.children,
     props = (0, _objectWithoutProperties2.default)(_ref5, _excluded5);
@@ -210,7 +206,13 @@ var ThemedLinkButton = exports.ThemedLinkButton = (0, _forwardRefWithGeneric.def
   })), /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _runtime.ax)([textButtonStyles.text])
   }, children));
-});
+}
+/**
+ * __Themed link button__
+ *
+ * A themed link button for the top bar.
+ */
+var ThemedLinkButton = exports.ThemedLinkButton = (0, _forwardRefWithGeneric.default)(ThemedLinkButtonFn);
 
 /**
  * Props shared by `ThemedIconButtonProps` and `ThemedLinkIconButton`
@@ -283,12 +285,7 @@ var ThemedIconButton = exports.ThemedIconButton = /*#__PURE__*/(0, _react.forwar
     );
   });
 });
-/**
- * __Themed link icon button__
- *
- * A themed link icon button for the top bar.
- */
-var ThemedLinkIconButton = exports.ThemedLinkIconButton = (0, _forwardRefWithGeneric.default)(function ThemedLinkIconButton(_ref7, ref) {
+function ThemedLinkIconButtonFn(_ref7, ref) {
   var _tooltip$content2;
   var Icon = _ref7.icon,
     label = _ref7.label,
@@ -349,4 +346,11 @@ var ThemedLinkIconButton = exports.ThemedLinkIconButton = (0, _forwardRefWithGen
       }), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, label))
     );
   });
-});
+}
+
+/**
+ * __Themed link icon button__
+ *
+ * A themed link icon button for the top bar.
+ */
+var ThemedLinkIconButton = exports.ThemedLinkIconButton = (0, _forwardRefWithGeneric.default)(ThemedLinkIconButtonFn);

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/side-nav.compiled.css

@@ -1,7 +1,6 @@
 
 ._nd5l1b6c{grid-area:main/aside/aside/aside}
 ._191wglyw{border-inline-start:none}
-._t51z7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
 ._t51zglyw{border-inline-end:none}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
 ._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
 ._1bah1yb4{justify-content:space-between}
@@ -16,5 +15,5 @@
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
-@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._p5clglyw{border-inline-end:none}._qiln1gzg{grid-area:main}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
+@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
 @supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}}

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

@@ -38,11 +38,8 @@ function getResizeBounds() {
 }
 const openLayerObserverSideNavNamespace = 'side-nav';
 const styles = {
-  root: "_nd5l1b6c _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _4ap3vuon _scbpglyw",
-  oldBorder: "_t51z7r9e",
-  newBorder: "_191wglyw _t51zglyw _p5cl7r9e",
-  newBorderFlyoutOpen: "_p5clglyw",
-  flyoutOpen: "_qiln1gzg _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
+  root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5cl7r9e _4ap3vuon _scbpglyw",
+  flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
   flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
   hiddenMobileAndDesktop: "_1e0cglyw",
@@ -575,7 +572,7 @@ function SideNavInternal({
     },
     ref: mergedRef,
     "data-testid": testId,
-    className: ax([styles.root, fg('platform_design_system_nav4_sidenav_border') ? styles.newBorder : styles.oldBorder, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && fg('platform_design_system_nav4_sidenav_border') && styles.newBorderFlyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed, isFlyoutClosed && fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
+    className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed, isFlyoutClosed && fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
   }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",

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);