@atlaskit/navigation-system 2.12.0 → 2.14.0

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

@@ -116,16 +116,7 @@ const ThemedPressable = /*#__PURE__*/forwardRef(function ThemedPressable({
     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.
- */
-const ThemedAnchor = forwardRefWithGeneric(function ThemedAnchor({
+function ThemedAnchorFn({
   appearance = 'default',
   shape = 'default',
   isSelected,
@@ -144,7 +135,17 @@ const ThemedAnchor = forwardRefWithGeneric(function ThemedAnchor({
     ,
     xcss: 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.
+ */
+const ThemedAnchor = forwardRefWithGeneric(ThemedAnchorFn);
 const textButtonStyles = {
   iconBefore: "_vwz4idpf",
   text: "_k48p1wq8"
@@ -175,12 +176,7 @@ export const ThemedButton = /*#__PURE__*/forwardRef(function ThemedButton({
     className: ax([textButtonStyles.text])
   }, children));
 });
-/**
- * __Themed link button__
- *
- * A themed link button for the top bar.
- */
-export const ThemedLinkButton = forwardRefWithGeneric(function ThemedLinkButton({
+function ThemedLinkButtonFn({
   iconBefore: IconBefore,
   children,
   ...props
@@ -195,7 +191,13 @@ export const ThemedLinkButton = forwardRefWithGeneric(function ThemedLinkButton(
   })), /*#__PURE__*/React.createElement("span", {
     className: ax([textButtonStyles.text])
   }, children));
-});
+}
+/**
+ * __Themed link button__
+ *
+ * A themed link button for the top bar.
+ */
+export const ThemedLinkButton = forwardRefWithGeneric(ThemedLinkButtonFn);
 
 /**
  * Props shared by `ThemedIconButtonProps` and `ThemedLinkIconButton`
@@ -266,12 +268,7 @@ export const ThemedIconButton = /*#__PURE__*/forwardRef(function ThemedIconButto
     color: "currentColor"
   }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)));
 });
-/**
- * __Themed link icon button__
- *
- * A themed link icon button for the top bar.
- */
-export const ThemedLinkIconButton = forwardRefWithGeneric(function ThemedLinkIconButton({
+function ThemedLinkIconButtonFn({
   icon: Icon,
   label,
   tooltip,
@@ -330,4 +327,11 @@ export const ThemedLinkIconButton = forwardRefWithGeneric(function ThemedLinkIco
     label: "",
     color: "currentColor"
   }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)));
-});
+}
+
+/**
+ * __Themed link icon button__
+ *
+ * A themed link icon button for the top bar.
+ */
+export const ThemedLinkIconButton = forwardRefWithGeneric(ThemedLinkIconButtonFn);

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/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/esm/ui/page-layout/side-nav/side-nav.js

@@ -42,11 +42,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",
@@ -574,7 +571,7 @@ function SideNavInternal(_ref) {
     style: _defineProperty({}, sideNavVar, clampedWidth),
     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/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/esm/ui/top-nav-items/themed/button.js

@@ -124,16 +124,7 @@ var ThemedPressable = /*#__PURE__*/forwardRef(function ThemedPressable(_ref2, re
     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 = forwardRefWithGeneric(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,
@@ -153,7 +144,17 @@ var ThemedAnchor = forwardRefWithGeneric(function ThemedAnchor(_ref3, ref) {
     ,
     xcss: 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 = forwardRefWithGeneric(ThemedAnchorFn);
 var textButtonStyles = {
   iconBefore: "_vwz4idpf",
   text: "_k48p1wq8"
@@ -183,12 +184,7 @@ export var ThemedButton = /*#__PURE__*/forwardRef(function ThemedButton(_ref4, r
     className: ax([textButtonStyles.text])
   }, children));
 });
-/**
- * __Themed link button__
- *
- * A themed link button for the top bar.
- */
-export var ThemedLinkButton = forwardRefWithGeneric(function ThemedLinkButton(_ref5, ref) {
+function ThemedLinkButtonFn(_ref5, ref) {
   var IconBefore = _ref5.iconBefore,
     children = _ref5.children,
     props = _objectWithoutProperties(_ref5, _excluded5);
@@ -202,7 +198,13 @@ export var ThemedLinkButton = forwardRefWithGeneric(function ThemedLinkButton(_r
   })), /*#__PURE__*/React.createElement("span", {
     className: ax([textButtonStyles.text])
   }, children));
-});
+}
+/**
+ * __Themed link button__
+ *
+ * A themed link button for the top bar.
+ */
+export var ThemedLinkButton = forwardRefWithGeneric(ThemedLinkButtonFn);
 
 /**
  * Props shared by `ThemedIconButtonProps` and `ThemedLinkIconButton`
@@ -275,12 +277,7 @@ export var ThemedIconButton = /*#__PURE__*/forwardRef(function ThemedIconButton(
     );
   });
 });
-/**
- * __Themed link icon button__
- *
- * A themed link icon button for the top bar.
- */
-export var ThemedLinkIconButton = forwardRefWithGeneric(function ThemedLinkIconButton(_ref7, ref) {
+function ThemedLinkIconButtonFn(_ref7, ref) {
   var _tooltip$content2;
   var Icon = _ref7.icon,
     label = _ref7.label,
@@ -341,4 +338,11 @@ export var ThemedLinkIconButton = forwardRefWithGeneric(function ThemedLinkIconB
       }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label))
     );
   });
-});
+}
+
+/**
+ * __Themed link icon button__
+ *
+ * A themed link icon button for the top bar.
+ */
+export var ThemedLinkIconButton = forwardRefWithGeneric(ThemedLinkIconButtonFn);

package/dist/types/ui/menu-item/link-menu-item.d.ts

@@ -19,20 +19,4 @@ export type LinkMenuItemProps<RouterLinkConfig extends Record<string, any> = nev
  *
  * A menu item link. It should be used within a `ul`.
  */
-export declare const LinkMenuItem: <RouterLinkConfig extends Record<string, any> = never>(props: import("./types").MenuItemCommonProps & import("./types").MenuItemSlots & {
-    description?: string;
-    listItemRef?: React.Ref<HTMLDivElement>;
-} & RouterLinkComponentProps<RouterLinkConfig> & {
-    /**
-     * The native `target` attribute for the anchor element.
-     */
-    target?: HTMLAnchorElement["target"];
-    /**
-     * Whether the menu item is selected.
-     */
-    isSelected?: boolean;
-    /**
-     * Called when the user has clicked on the trigger content.
-     */
-    onClick?: MenuItemOnClick<HTMLAnchorElement>;
-} & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+export declare const LinkMenuItem: <RouterLinkConfig extends Record<string, any> = never>(props: LinkMenuItemProps<RouterLinkConfig> & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;

package/dist/types/ui/menu-item/menu-item.d.ts

@@ -4,7 +4,7 @@
  * @jsx jsx
  */
 import React from 'react';
-import type { MenuItemOnClick } from './types';
+import type { MenuItemLinkOrButtonCommonProps, MenuItemOnClick } from './types';
 /**
  * This is being _internally_ exported so it can be used in other menu item wrapper components, like
  * ExpandableMenuItemTrigger.
@@ -20,28 +20,33 @@ import type { MenuItemOnClick } from './types';
  */
 export declare const nestedOpenPopupCSSSelector = "&:has([aria-expanded=\"true\"][aria-haspopup=\"true\"])";
 /**
- * __MenuItemBase__
- *
- * The base menu item component used to compose ButtonMenuItem and LinkMenuItem.
+ * Includes all props that are used by any menu item, as MenuItembase is the base component for all menu item components.
  *
- * It contains a type argument `<T>`, to specify the type of the interactive element (`button` or `a`).
- * This can be inferred from the type of the `onClick` prop.
+ * We also include additional `aria` props to support the menu item being a trigger for the FlyoutMenuItem popup and for the
+ * expanded content for ExpandableMenuItem.
  */
-export declare const MenuItemBase: <T extends HTMLAnchorElement | HTMLButtonElement>(props: import("./types").MenuItemCommonProps & import("./types").MenuItemSlots & {
-    description?: string;
-    listItemRef?: React.Ref<HTMLDivElement>;
-} & {
+type MenuItemBaseProps<T extends HTMLAnchorElement | HTMLButtonElement> = MenuItemLinkOrButtonCommonProps & {
     /**
      * ID attribute, passed to the interactive element (anchor/button). This is not publicly exposed, and is currently only
      * used internally by `ExpandableMenuItemTrigger` for the `aria-labelledby` attribute.
      */
     id?: string;
     href?: string | Record<string, any>;
-    target?: HTMLAnchorElement["target"];
+    target?: HTMLAnchorElement['target'];
     isDisabled?: boolean;
     isSelected?: boolean;
     ariaControls?: string;
     ariaExpanded?: boolean;
-    ariaHasPopup?: boolean | "dialog";
-    onClick?: MenuItemOnClick<T> | undefined;
-} & React.RefAttributes<T>) => React.ReactElement | null;
+    ariaHasPopup?: boolean | 'dialog';
+    onClick?: MenuItemOnClick<T>;
+};
+/**
+ * __MenuItemBase__
+ *
+ * The base menu item component used to compose ButtonMenuItem and LinkMenuItem.
+ *
+ * It contains a type argument `<T>`, to specify the type of the interactive element (`button` or `a`).
+ * This can be inferred from the type of the `onClick` prop.
+ */
+export declare const MenuItemBase: <T extends HTMLAnchorElement | HTMLButtonElement>(props: MenuItemBaseProps<T> & React.RefAttributes<T>) => React.ReactElement | null;
+export {};

package/dist/types/ui/menu-item/menu-list-item.d.ts

@@ -1,10 +1,11 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { ListItem } from '../../components/list-item';
 /**
  * __Menu list item__
  *
  * A [list item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) with visual styles removed.
  */
-export declare const MenuListItem: import("react").ForwardRefExoticComponent<{
-    children: import("react").ReactNode;
-    testId?: string;
-    xcss?: import("@atlaskit/css").StrictXCSSProp<"display" | "scrollMarginInline", never>;
-} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuListItem: typeof ListItem;

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/menu-item/link-menu-item.d.ts

@@ -19,20 +19,4 @@ export type LinkMenuItemProps<RouterLinkConfig extends Record<string, any> = nev
  *
  * A menu item link. It should be used within a `ul`.
  */
-export declare const LinkMenuItem: <RouterLinkConfig extends Record<string, any> = never>(props: import("./types").MenuItemCommonProps & import("./types").MenuItemSlots & {
-    description?: string;
-    listItemRef?: React.Ref<HTMLDivElement>;
-} & RouterLinkComponentProps<RouterLinkConfig> & {
-    /**
-     * The native `target` attribute for the anchor element.
-     */
-    target?: HTMLAnchorElement["target"];
-    /**
-     * Whether the menu item is selected.
-     */
-    isSelected?: boolean;
-    /**
-     * Called when the user has clicked on the trigger content.
-     */
-    onClick?: MenuItemOnClick<HTMLAnchorElement>;
-} & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+export declare const LinkMenuItem: <RouterLinkConfig extends Record<string, any> = never>(props: LinkMenuItemProps<RouterLinkConfig> & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;