@atlaskit/navigation-system 2.21.1 → 2.23.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlassian/navigation-system
 
+## 2.23.0
+
+### Minor Changes
+
+- [`46f39b03ba41d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/46f39b03ba41d) -
+  The menu item `actionsOnHover` slot has been updated to improve accessibility. These changes were
+  previously behind a feature flag, which has now been removed. These changes are now available for
+  all consumers.
+  - Popup triggers placed inside the slot will now correctly be focused when closing their
+    respective popups.
+
+  - Interactive elements placed inside the slot will be in the tab order when tabbing backwards.
+
+## 2.22.0
+
+### Minor Changes
+
+- [`3c732646f3e19`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3c732646f3e19) -
+  The tooltip for truncated side nav menu item has been updated behind the feature gate
+  `platform_dst_side_nav_remove_custom_tooltip`:
+  - The tooltip now uses the standard tooltip styling and behavior, instead of using a custom
+    component.
+  - The tooltip position has been updated to `right-start` (previously it was `right`).
+
 ## 2.21.1
 
 ### Patch Changes
@@ -15,7 +39,6 @@
   This change is behind the feature gate `navx-full-height-sidebar`.
 
   This includes:
-
   - `SideNav` peek animations
   - `SideNav` expand and collapse animations
   - `TopNavStart` reorder animations
@@ -62,7 +85,6 @@
 - [`dc96cee1f923a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dc96cee1f923a) -
   Minor improvements to the side nav peek (flyout) animations. These changes are behind the
   `navx-full-height-sidebar` feature flag.
-
   - The timing functions for the peek and hide animations have been slightly tweaked to align with
     the new full height sidebar animations
   - The peek animation duration has been increased to 300ms from 200ms to align with the new full
@@ -425,7 +447,6 @@
 - [`e40aa48c11a02`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e40aa48c11a02) -
   The menu item `actionsOnHover` slot has been updated, behind a feature flag, to improve
   accessibility.
-
   - Popup triggers placed inside the slot will now correctly be focused when closing their
     respective popups.
 
@@ -863,12 +884,10 @@
 - [#171544](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/171544)
   [`855881697b291`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/855881697b291) -
   The following components have been renamed:
-
   - `MenuLinkItem` -> `LinkMenuItem`
   - `MenuButtonItem` -> `ButtonMenuItem`
 
   Their imports have been updated to use the new names.
-
   - `@atlassian/navigation-system/side-nav/menu-link-item` ->
     `@atlassian/navigation-system/side-nav/link-menu-item`
   - `@atlassian/navigation-system/side-nav/menu-button-item` ->
@@ -902,7 +921,6 @@
 - [#169983](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/169983)
   [`c72e85f165c1b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c72e85f165c1b) -
   A number of components have been renamed:
-
   - `TopBar` -> `TopNav`
   - `HomeActions` -> `TopNavStart`
   - `CommonActions` -> `TopNavMiddle`
@@ -914,7 +932,6 @@
 
   The following components have been moved from the `@atlassian/navigation-system/top-nav-items`
   entrypoint to the `@atlassian/navigation-system/layout/top-nav` entrypoint:
-
   - `TopNavStart`
   - `TopNavMiddle`
   - `TopNavEnd`
@@ -1183,7 +1200,6 @@
 - [#152893](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/152893)
   [`ffd9759e99c3e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ffd9759e99c3e) -
   Notifications and Help now re-use `UserAction` internally, which means:
-
   - They now support the `onMouseEnter` prop.
   - They now support the `isListItem` prop. This allows you to disable the default list item
     wrapper. It is intended for use with dropdown menus or popups, and requires you to render your
@@ -1357,7 +1373,6 @@
 - [#137059](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137059)
   [`8d6a3a75c70f1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8d6a3a75c70f1) -
   [ux] Changes the resizing bounds of the `Panel` slot to have a:
-
   - Minimum resizing width equal to the `defaultWidth` (up to a maximum of `400px`)
   - Maximum resizing width of half the viewport width after the sidebar has been removed. This means
     that the `Panel` will not be larger than the content.
@@ -2230,7 +2245,6 @@
   Color inputs should be parsed into `RGB` objects before providing them as the custom theme.
 
   We now export multiple utility functions to assist with color parsing:
-
   - Hex parsing with `parseHex` from
     `@atlassian/navigation-system/experimental/color-utils/parse-hex`
   - CSS `hsl()` parsing with `parseHsl` from
@@ -2295,14 +2309,12 @@
 - [#176005](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/176005)
   [`a7f4659856234`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a7f4659856234) -
   Adds `visualContentRef` prop to:
-
   - `ExpandableMenuItemTrigger`
   - `FlyoutMenuItemTrigger`
   - `MenuButtonItem`
   - `MenuLinkItem`
 
   Adds `listItemRef` to:
-
   - `MenuButtonItem`
   - `MenuLinkItem`
 
@@ -2357,14 +2369,12 @@
 
   The following components previously had an optional `label` prop, which has now been made
   required:
-
   - Help
   - NavLogo
   - Notifications
 
   The following components previously used the `children` prop as the label, but have now been
   updated to use a required `label` prop:
-
   - Settings
   - Profile
   - UserAction
@@ -2437,7 +2447,6 @@
 - [#162526](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162526)
   [`9a0c103641a2f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9a0c103641a2f) -
   Menu items are now more resilient to narrow widths and deep nesting.
-
   - A minimum width of 72px has been set on menu items.
   - The menu item slots (elemBefore, elemAfter, actions, actionsOnHover) now hide overflowing
     content to prevent content spilling out or overlapping other slots when space is limited.
@@ -2549,7 +2558,6 @@
   [`c3366ec919883`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c3366ec919883) -
   The side nav slots and scroll container feature flag has been cleaned up. The following changes
   are now available for all consumers:
-
   - `PanelSplitterProvider` no longer renders a scroll container, and no longer adds a flex
     container.
   - `SideNavContent` renders a scroll container.
@@ -2593,7 +2601,6 @@
 - [#159268](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/159268)
   [`487d22f32a93f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/487d22f32a93f) -
   Trivial CSS changes to bring this inline with @atlaskit/css typing:
-
   - We now allow certain `zIndex` values.
   - `background` is a banned property, use `backgroundColor` instead
   - Migrates a few things to the new `@atlaskit/css` JSX pragmas.
@@ -2741,7 +2748,6 @@
   [`b6738b5acfef0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b6738b5acfef0) -
   We are making changes to the side nav scroll container behind a feature flag, in order to support
   the new header and footer slot components.
-
   - `PanelSplitterProvider` no longer renders a scroll container, and no longer adds a flex
     container.
   - `SideNavContent` renders a scroll container.
@@ -2920,7 +2926,6 @@
 - [#148601](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/148601)
   [`eff2b0c0e6815`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/eff2b0c0e6815) -
   Two required label props have been added to `SideNavToggleButton`:
-
   - `collapseLabel`: used as the button label when the toggle button will collapse the side nav
   - `expandLabel`: used as the button label when the toggle button will expand the side nav
 
@@ -3003,7 +3008,6 @@
 - [#145878](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/145878)
   [`72e885acee099`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/72e885acee099) -
   [ux] Side nav buttons have been consolidated.
-
   - `SideNavToggleButton` (used in the top bar) is now always visible. It no longer has built in
     visibility logic for showing/hiding itself based on whether the side nav is expanded or
     collapsed.
@@ -3122,7 +3126,6 @@
   [`e484ea0d5c1e2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e484ea0d5c1e2) -
   The `NavLogo` component logo and mobileLogo props have changed to prevent invalid and inaccessible
   states.
-
   - `logo` now takes a component reference that matches `@atlaskit/logo` props instead of arbitrary
     JSX
   - `mobileLogo` has been renamed to `icon` and now takes a component reference that matches

package/dist/cjs/ui/menu-item/menu-item.compiled.css

@@ -1,4 +1,3 @@
-
 ._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._1r04ze3t{inset:var(--ds-space-0,0)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
@@ -25,13 +24,11 @@
 ._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
 ._1e0c11p5{display:grid}
 ._1e0c13yo{display:var(--elem-after-display)}
-._1e0c1c3z{display:var(--actions-on-hover-display)}
 ._1e0c1txw{display:flex}
 ._1i4q1hna{overflow-wrap:break-word}
 ._1ifmglyw{-webkit-touch-callout:none}
 ._1lmcu4vt{grid-template-areas:"elem-before interactive elem-after actions"}
 ._1o9zidpf{flex-shrink:0}
-._1ojv1txw:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-display:flex}
 ._1q511b66{padding-block-start:var(--ds-space-050,4px)}
 ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
 ._1rbv1wug:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-width:auto}
@@ -64,8 +61,6 @@
 ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
 ._db801b66{--actions-on-hover-padding:var(--ds-space-050,4px)}
 ._db80idpf{--actions-on-hover-padding:0}
-._ek6g1txw{--actions-on-hover-display:flex}
-._ek6gglyw{--actions-on-hover-display:none}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}
 ._kwq51b66:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-padding:var(--ds-space-050,4px)}
@@ -93,12 +88,11 @@
 ._yv0e7dup{grid-template-columns:minmax(0,auto) 1fr minmax(0,auto) minmax(0,auto)}
 ._yv0enbh3{grid-template-columns:subgrid}
 ._12s918uv:focus-within{overflow-y:initial}
-._1brr1txw:focus-within{--actions-on-hover-display:flex}
 ._1guo18uv:focus-within{overflow-x:initial}
 ._1mfcglyw:focus-within{--elem-after-display:none}
 ._91nl1wug:focus-within{--actions-on-hover-width:auto}
 ._iy5o1b66:focus-within{--actions-on-hover-padding:var(--ds-space-050,4px)}
-._t7p8kb7n:focus-within{--actions-on-hover-opacity:1}._109x1txw:hover{--actions-on-hover-display:flex}
+._t7p8kb7n:focus-within{--actions-on-hover-opacity:1}
 ._11om6b4r:hover{animation-name:k1xyysw3}
 ._1sjuglyw:hover{--elem-after-display:none}
 ._1uy01amc:hover{animation-delay:.8s}

package/dist/cjs/ui/menu-item/menu-item.js

@@ -63,8 +63,6 @@ var defaultAvatarValues = {
   size: 'small'
 };
 var elemAfterDisplayVar = '--elem-after-display';
-// Note: actionsOnHoverDisplayVar wll be cleaned up with fg('platform_dst_nav4_actionsonhover_focus_fix')
-var actionsOnHoverDisplayVar = '--actions-on-hover-display';
 var actionsOnHoverOpacityVar = '--actions-on-hover-opacity';
 var actionsOnHoverWidthVar = '--actions-on-hover-width';
 var actionsOnHoverPaddingInlineEndVar = '--actions-on-hover-padding';
@@ -151,12 +149,9 @@ var onTopOfButtonOrAnchorStyles = {
  */
 var nestedOpenPopupCSSSelector = exports.nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
 var containerStyles = {
-  root: "_2rko12b0 _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syaz1gjq _1yyu1j28 _91ju1txw _1swv108i _irr3108i",
-  actionsOnHoverFocusFixEnabled: "_uomdidpf _pmxpidpf _db80idpf _qxq9kb7n _1rbv1wug _kwq51b66 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
-  actionsOnHoverFocusFixDisabled: "_ek6gglyw _1ojv1txw _1brr1txw _109x1txw",
+  root: "_2rko12b0 _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syaz1gjq _1yyu1j28 _91ju1txw _uomdidpf _pmxpidpf _db80idpf _qxq9kb7n _1rbv1wug _kwq51b66 _1swv108i _irr3108i _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
   removeElemAfter: "_91juglyw",
-  showHoverActionsWithFocusFixEnabled: "_uomdkb7n _pmxp1wug _db801b66",
-  showHoverActionsWithFocusFixDisabled: "_ek6g1txw",
+  showHoverActions: "_uomdkb7n _pmxp1wug _db801b66",
   removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
   selected: "_bfhkfg4m _syazaqb7 _1yyu1fvw _1swvi1yw _30l3aqb7 _irr3i1yw",
   disabled: "_syaz1lh4 _irr3n7od",
@@ -178,9 +173,7 @@ var actionStyles = {
   root: "_zulp1b66 _nd5lbc26 _1reo15vq _18m915vq _1e0c1txw _4cvr1h6o _y4ti1b66 _1guo18uv _12s918uv"
 };
 var actionsOnHoverStyles = {
-  root: "_nd5l16dh _zulp1b66 _1reo15vq _18m915vq _4cvr1h6o _1guo18uv _12s918uv",
-  focusFixEnabled: "_1e0c1txw _tzy4pnc3 _1bsbty16 _y4tidria",
-  focusFixDisabled: "_1e0c1c3z _y4ti1b66"
+  root: "_nd5l16dh _zulp1b66 _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _tzy4pnc3 _1bsbty16 _y4tidria _1guo18uv _12s918uv"
 };
 var textStyles = {
   root: "_zulpv77o _1reo15vq _18m915vq _y4ti1b66 _bozg1b66 _1e0c1txw _2lx21bp4 _1ul91c9m _1guo18uv _12s918uv",
@@ -333,15 +326,15 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref3, forwardedRef) {
     ref: visualContentRef,
     "data-testid": testId ? "".concat(testId, "-container") : undefined,
     "data-selected": isSelected,
-    className: (0, _runtime.ax)([containerStyles.root, (0, _platformFeatureFlags.fg)('platform_dst_nav4_actionsonhover_focus_fix') ? containerStyles.actionsOnHoverFocusFixEnabled : containerStyles.actionsOnHoverFocusFixDisabled, isSelected && containerStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_actionsonhover_focus_fix') && containerStyles.showHoverActionsWithFocusFixDisabled, showHoverActionsWhenNotHovered && (0, _platformFeatureFlags.fg)('platform_dst_nav4_actionsonhover_focus_fix') && containerStyles.showHoverActionsWithFocusFixEnabled, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
+    className: (0, _runtime.ax)([containerStyles.root, isSelected && containerStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
   }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: function content() {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, children), description ? /*#__PURE__*/_react.default.createElement("div", null, description) : null);
     },
-    position: "right"
+    position: (0, _platformFeatureFlags.fg)('platform_dst_side_nav_remove_custom_tooltip') ? 'right-start' : 'right'
     // NOTE: Types in React 18 have changed and `forwardRef(() => <TooltipPrimitive>)` no longer appears to match 100%
     ,
-    component: MenuItemTooltip,
+    component: (0, _platformFeatureFlags.fg)('platform_dst_side_nav_remove_custom_tooltip') ? undefined : MenuItemTooltip,
     ignoreTooltipPointerEvents: true,
     hideTooltipOnMouseDown: true
     // We don't need a duplicate hidden element containing tooltip content
@@ -407,7 +400,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref3, forwardedRef) {
   }), showElemBefore && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)([elemBeforeStyles.root, topLevelSiblingStyles.root, onTopOfButtonOrAnchorStyles.root])
   }, elemBefore), actionsOnHover && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)([actionsOnHoverStyles.root, (0, _platformFeatureFlags.fg)('platform_dst_nav4_actionsonhover_focus_fix') ? actionsOnHoverStyles.focusFixEnabled : actionsOnHoverStyles.focusFixDisabled])
+    className: (0, _runtime.ax)([actionsOnHoverStyles.root])
   }, actionsOnHover), elemAfter && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)([elemAfterStyles.root, topLevelSiblingStyles.root, onTopOfButtonOrAnchorStyles.root])
   }, elemAfter), actions && /*#__PURE__*/_react.default.createElement("div", {

package/dist/es2019/ui/menu-item/menu-item.compiled.css

@@ -1,4 +1,3 @@
-
 ._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._1r04ze3t{inset:var(--ds-space-0,0)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
@@ -25,13 +24,11 @@
 ._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
 ._1e0c11p5{display:grid}
 ._1e0c13yo{display:var(--elem-after-display)}
-._1e0c1c3z{display:var(--actions-on-hover-display)}
 ._1e0c1txw{display:flex}
 ._1i4q1hna{overflow-wrap:break-word}
 ._1ifmglyw{-webkit-touch-callout:none}
 ._1lmcu4vt{grid-template-areas:"elem-before interactive elem-after actions"}
 ._1o9zidpf{flex-shrink:0}
-._1ojv1txw:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-display:flex}
 ._1q511b66{padding-block-start:var(--ds-space-050,4px)}
 ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
 ._1rbv1wug:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-width:auto}
@@ -64,8 +61,6 @@
 ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
 ._db801b66{--actions-on-hover-padding:var(--ds-space-050,4px)}
 ._db80idpf{--actions-on-hover-padding:0}
-._ek6g1txw{--actions-on-hover-display:flex}
-._ek6gglyw{--actions-on-hover-display:none}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}
 ._kwq51b66:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-padding:var(--ds-space-050,4px)}
@@ -93,12 +88,11 @@
 ._yv0e7dup{grid-template-columns:minmax(0,auto) 1fr minmax(0,auto) minmax(0,auto)}
 ._yv0enbh3{grid-template-columns:subgrid}
 ._12s918uv:focus-within{overflow-y:initial}
-._1brr1txw:focus-within{--actions-on-hover-display:flex}
 ._1guo18uv:focus-within{overflow-x:initial}
 ._1mfcglyw:focus-within{--elem-after-display:none}
 ._91nl1wug:focus-within{--actions-on-hover-width:auto}
 ._iy5o1b66:focus-within{--actions-on-hover-padding:var(--ds-space-050,4px)}
-._t7p8kb7n:focus-within{--actions-on-hover-opacity:1}._109x1txw:hover{--actions-on-hover-display:flex}
+._t7p8kb7n:focus-within{--actions-on-hover-opacity:1}
 ._11om6b4r:hover{animation-name:k1xyysw3}
 ._1sjuglyw:hover{--elem-after-display:none}
 ._1uy01amc:hover{animation-delay:.8s}

package/dist/es2019/ui/menu-item/menu-item.js

@@ -46,8 +46,6 @@ const defaultAvatarValues = {
   size: 'small'
 };
 const elemAfterDisplayVar = '--elem-after-display';
-// Note: actionsOnHoverDisplayVar wll be cleaned up with fg('platform_dst_nav4_actionsonhover_focus_fix')
-const actionsOnHoverDisplayVar = '--actions-on-hover-display';
 const actionsOnHoverOpacityVar = '--actions-on-hover-opacity';
 const actionsOnHoverWidthVar = '--actions-on-hover-width';
 const actionsOnHoverPaddingInlineEndVar = '--actions-on-hover-padding';
@@ -134,12 +132,9 @@ const onTopOfButtonOrAnchorStyles = {
  */
 export const nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
 const containerStyles = {
-  root: "_2rko12b0 _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syaz1gjq _1yyu1j28 _91ju1txw _1swv108i _irr3108i",
-  actionsOnHoverFocusFixEnabled: "_uomdidpf _pmxpidpf _db80idpf _qxq9kb7n _1rbv1wug _kwq51b66 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
-  actionsOnHoverFocusFixDisabled: "_ek6gglyw _1ojv1txw _1brr1txw _109x1txw",
+  root: "_2rko12b0 _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syaz1gjq _1yyu1j28 _91ju1txw _uomdidpf _pmxpidpf _db80idpf _qxq9kb7n _1rbv1wug _kwq51b66 _1swv108i _irr3108i _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
   removeElemAfter: "_91juglyw",
-  showHoverActionsWithFocusFixEnabled: "_uomdkb7n _pmxp1wug _db801b66",
-  showHoverActionsWithFocusFixDisabled: "_ek6g1txw",
+  showHoverActions: "_uomdkb7n _pmxp1wug _db801b66",
   removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
   selected: "_bfhkfg4m _syazaqb7 _1yyu1fvw _1swvi1yw _30l3aqb7 _irr3i1yw",
   disabled: "_syaz1lh4 _irr3n7od",
@@ -161,9 +156,7 @@ const actionStyles = {
   root: "_zulp1b66 _nd5lbc26 _1reo15vq _18m915vq _1e0c1txw _4cvr1h6o _y4ti1b66 _1guo18uv _12s918uv"
 };
 const actionsOnHoverStyles = {
-  root: "_nd5l16dh _zulp1b66 _1reo15vq _18m915vq _4cvr1h6o _1guo18uv _12s918uv",
-  focusFixEnabled: "_1e0c1txw _tzy4pnc3 _1bsbty16 _y4tidria",
-  focusFixDisabled: "_1e0c1c3z _y4ti1b66"
+  root: "_nd5l16dh _zulp1b66 _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _tzy4pnc3 _1bsbty16 _y4tidria _1guo18uv _12s918uv"
 };
 const textStyles = {
   root: "_zulpv77o _1reo15vq _18m915vq _y4ti1b66 _bozg1b66 _1e0c1txw _2lx21bp4 _1ul91c9m _1guo18uv _12s918uv",
@@ -318,13 +311,13 @@ const MenuItemBaseNoRef = ({
     ref: visualContentRef,
     "data-testid": testId ? `${testId}-container` : undefined,
     "data-selected": isSelected,
-    className: ax([containerStyles.root, fg('platform_dst_nav4_actionsonhover_focus_fix') ? containerStyles.actionsOnHoverFocusFixEnabled : containerStyles.actionsOnHoverFocusFixDisabled, isSelected && containerStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && !fg('platform_dst_nav4_actionsonhover_focus_fix') && containerStyles.showHoverActionsWithFocusFixDisabled, showHoverActionsWhenNotHovered && fg('platform_dst_nav4_actionsonhover_focus_fix') && containerStyles.showHoverActionsWithFocusFixEnabled, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
+    className: ax([containerStyles.root, isSelected && containerStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
   }, /*#__PURE__*/React.createElement(Tooltip, {
     content: () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, children), description ? /*#__PURE__*/React.createElement("div", null, description) : null),
-    position: "right"
+    position: fg('platform_dst_side_nav_remove_custom_tooltip') ? 'right-start' : 'right'
     // NOTE: Types in React 18 have changed and `forwardRef(() => <TooltipPrimitive>)` no longer appears to match 100%
     ,
-    component: MenuItemTooltip,
+    component: fg('platform_dst_side_nav_remove_custom_tooltip') ? undefined : MenuItemTooltip,
     ignoreTooltipPointerEvents: true,
     hideTooltipOnMouseDown: true
     // We don't need a duplicate hidden element containing tooltip content
@@ -391,7 +384,7 @@ const MenuItemBaseNoRef = ({
   }), showElemBefore && /*#__PURE__*/React.createElement("div", {
     className: ax([elemBeforeStyles.root, topLevelSiblingStyles.root, onTopOfButtonOrAnchorStyles.root])
   }, elemBefore), actionsOnHover && /*#__PURE__*/React.createElement("div", {
-    className: ax([actionsOnHoverStyles.root, fg('platform_dst_nav4_actionsonhover_focus_fix') ? actionsOnHoverStyles.focusFixEnabled : actionsOnHoverStyles.focusFixDisabled])
+    className: ax([actionsOnHoverStyles.root])
   }, actionsOnHover), elemAfter && /*#__PURE__*/React.createElement("div", {
     className: ax([elemAfterStyles.root, topLevelSiblingStyles.root, onTopOfButtonOrAnchorStyles.root])
   }, elemAfter), actions && /*#__PURE__*/React.createElement("div", {

package/dist/esm/ui/menu-item/menu-item.compiled.css

@@ -1,4 +1,3 @@
-
 ._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._1r04ze3t{inset:var(--ds-space-0,0)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
@@ -25,13 +24,11 @@
 ._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
 ._1e0c11p5{display:grid}
 ._1e0c13yo{display:var(--elem-after-display)}
-._1e0c1c3z{display:var(--actions-on-hover-display)}
 ._1e0c1txw{display:flex}
 ._1i4q1hna{overflow-wrap:break-word}
 ._1ifmglyw{-webkit-touch-callout:none}
 ._1lmcu4vt{grid-template-areas:"elem-before interactive elem-after actions"}
 ._1o9zidpf{flex-shrink:0}
-._1ojv1txw:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-display:flex}
 ._1q511b66{padding-block-start:var(--ds-space-050,4px)}
 ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
 ._1rbv1wug:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-width:auto}
@@ -64,8 +61,6 @@
 ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
 ._db801b66{--actions-on-hover-padding:var(--ds-space-050,4px)}
 ._db80idpf{--actions-on-hover-padding:0}
-._ek6g1txw{--actions-on-hover-display:flex}
-._ek6gglyw{--actions-on-hover-display:none}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}
 ._kwq51b66:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-padding:var(--ds-space-050,4px)}
@@ -93,12 +88,11 @@
 ._yv0e7dup{grid-template-columns:minmax(0,auto) 1fr minmax(0,auto) minmax(0,auto)}
 ._yv0enbh3{grid-template-columns:subgrid}
 ._12s918uv:focus-within{overflow-y:initial}
-._1brr1txw:focus-within{--actions-on-hover-display:flex}
 ._1guo18uv:focus-within{overflow-x:initial}
 ._1mfcglyw:focus-within{--elem-after-display:none}
 ._91nl1wug:focus-within{--actions-on-hover-width:auto}
 ._iy5o1b66:focus-within{--actions-on-hover-padding:var(--ds-space-050,4px)}
-._t7p8kb7n:focus-within{--actions-on-hover-opacity:1}._109x1txw:hover{--actions-on-hover-display:flex}
+._t7p8kb7n:focus-within{--actions-on-hover-opacity:1}
 ._11om6b4r:hover{animation-name:k1xyysw3}
 ._1sjuglyw:hover{--elem-after-display:none}
 ._1uy01amc:hover{animation-delay:.8s}

package/dist/esm/ui/menu-item/menu-item.js

@@ -52,8 +52,6 @@ var defaultAvatarValues = {
   size: 'small'
 };
 var elemAfterDisplayVar = '--elem-after-display';
-// Note: actionsOnHoverDisplayVar wll be cleaned up with fg('platform_dst_nav4_actionsonhover_focus_fix')
-var actionsOnHoverDisplayVar = '--actions-on-hover-display';
 var actionsOnHoverOpacityVar = '--actions-on-hover-opacity';
 var actionsOnHoverWidthVar = '--actions-on-hover-width';
 var actionsOnHoverPaddingInlineEndVar = '--actions-on-hover-padding';
@@ -140,12 +138,9 @@ var onTopOfButtonOrAnchorStyles = {
  */
 export var nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
 var containerStyles = {
-  root: "_2rko12b0 _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syaz1gjq _1yyu1j28 _91ju1txw _1swv108i _irr3108i",
-  actionsOnHoverFocusFixEnabled: "_uomdidpf _pmxpidpf _db80idpf _qxq9kb7n _1rbv1wug _kwq51b66 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
-  actionsOnHoverFocusFixDisabled: "_ek6gglyw _1ojv1txw _1brr1txw _109x1txw",
+  root: "_2rko12b0 _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syaz1gjq _1yyu1j28 _91ju1txw _uomdidpf _pmxpidpf _db80idpf _qxq9kb7n _1rbv1wug _kwq51b66 _1swv108i _irr3108i _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
   removeElemAfter: "_91juglyw",
-  showHoverActionsWithFocusFixEnabled: "_uomdkb7n _pmxp1wug _db801b66",
-  showHoverActionsWithFocusFixDisabled: "_ek6g1txw",
+  showHoverActions: "_uomdkb7n _pmxp1wug _db801b66",
   removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
   selected: "_bfhkfg4m _syazaqb7 _1yyu1fvw _1swvi1yw _30l3aqb7 _irr3i1yw",
   disabled: "_syaz1lh4 _irr3n7od",
@@ -167,9 +162,7 @@ var actionStyles = {
   root: "_zulp1b66 _nd5lbc26 _1reo15vq _18m915vq _1e0c1txw _4cvr1h6o _y4ti1b66 _1guo18uv _12s918uv"
 };
 var actionsOnHoverStyles = {
-  root: "_nd5l16dh _zulp1b66 _1reo15vq _18m915vq _4cvr1h6o _1guo18uv _12s918uv",
-  focusFixEnabled: "_1e0c1txw _tzy4pnc3 _1bsbty16 _y4tidria",
-  focusFixDisabled: "_1e0c1c3z _y4ti1b66"
+  root: "_nd5l16dh _zulp1b66 _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _tzy4pnc3 _1bsbty16 _y4tidria _1guo18uv _12s918uv"
 };
 var textStyles = {
   root: "_zulpv77o _1reo15vq _18m915vq _y4ti1b66 _bozg1b66 _1e0c1txw _2lx21bp4 _1ul91c9m _1guo18uv _12s918uv",
@@ -322,15 +315,15 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref3, forwardedRef) {
     ref: visualContentRef,
     "data-testid": testId ? "".concat(testId, "-container") : undefined,
     "data-selected": isSelected,
-    className: ax([containerStyles.root, fg('platform_dst_nav4_actionsonhover_focus_fix') ? containerStyles.actionsOnHoverFocusFixEnabled : containerStyles.actionsOnHoverFocusFixDisabled, isSelected && containerStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && !fg('platform_dst_nav4_actionsonhover_focus_fix') && containerStyles.showHoverActionsWithFocusFixDisabled, showHoverActionsWhenNotHovered && fg('platform_dst_nav4_actionsonhover_focus_fix') && containerStyles.showHoverActionsWithFocusFixEnabled, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
+    className: ax([containerStyles.root, isSelected && containerStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
   }, /*#__PURE__*/React.createElement(Tooltip, {
     content: function content() {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, children), description ? /*#__PURE__*/React.createElement("div", null, description) : null);
     },
-    position: "right"
+    position: fg('platform_dst_side_nav_remove_custom_tooltip') ? 'right-start' : 'right'
     // NOTE: Types in React 18 have changed and `forwardRef(() => <TooltipPrimitive>)` no longer appears to match 100%
     ,
-    component: MenuItemTooltip,
+    component: fg('platform_dst_side_nav_remove_custom_tooltip') ? undefined : MenuItemTooltip,
     ignoreTooltipPointerEvents: true,
     hideTooltipOnMouseDown: true
     // We don't need a duplicate hidden element containing tooltip content
@@ -396,7 +389,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref3, forwardedRef) {
   }), showElemBefore && /*#__PURE__*/React.createElement("div", {
     className: ax([elemBeforeStyles.root, topLevelSiblingStyles.root, onTopOfButtonOrAnchorStyles.root])
   }, elemBefore), actionsOnHover && /*#__PURE__*/React.createElement("div", {
-    className: ax([actionsOnHoverStyles.root, fg('platform_dst_nav4_actionsonhover_focus_fix') ? actionsOnHoverStyles.focusFixEnabled : actionsOnHoverStyles.focusFixDisabled])
+    className: ax([actionsOnHoverStyles.root])
   }, actionsOnHover), elemAfter && /*#__PURE__*/React.createElement("div", {
     className: ax([elemAfterStyles.root, topLevelSiblingStyles.root, onTopOfButtonOrAnchorStyles.root])
   }, elemAfter), actions && /*#__PURE__*/React.createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "2.21.1",
+	"version": "2.23.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -84,7 +84,7 @@
 		"@atlaskit/tooltip": "^20.5.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.3",
+		"@compiled/react": "^0.18.6",
 		"bind-event-listener": "^3.0.0",
 		"raf-schd": "^4.0.3",
 		"tiny-invariant": "^1.2.0"
@@ -162,9 +162,6 @@
 		"platform_dst_nav4_layering_in_main_slot_fixes": {
 			"type": "boolean"
 		},
-		"platform_dst_nav4_actionsonhover_focus_fix": {
-			"type": "boolean"
-		},
 		"platform_dst_nav4_flyoutmenuitem_render_to_parent": {
 			"type": "boolean"
 		},
@@ -191,6 +188,9 @@
 		},
 		"platform_dst_flyout_menu_item_chevron_color": {
 			"type": "boolean"
+		},
+		"platform_dst_side_nav_remove_custom_tooltip": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/navigation-system"