@atlaskit/side-nav-items 1.7.1 → 1.7.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/side-nav-items
 
+## 1.7.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.7.2
+
+### Patch Changes
+
+- [`a9815b8d729e0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a9815b8d729e0) -
+  Fixes the nested popup trigger styling when `platform_dst_nav4_flyout_menu_slots_close_button` is
+  enabled.
+
 ## 1.7.1
 
 ### Patch Changes

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

@@ -1,12 +1,14 @@
 ._12xsglyw:has(:focus-visible){--expandable-provided-elembefore-display:none}
 ._165n1bgi{--expandable-provided-elembefore-display:contents}
 ._165nglyw{--expandable-provided-elembefore-display:none}
+._1ddp1txw:has([aria-expanded=true][aria-haspopup]){--expandable-chevron-display:flex}
 ._1e0c1xb2{display:var(--expandable-provided-elembefore-display)}
 ._1e0ciw0t{display:var(--expandable-chevron-display)}
 ._1hl9glyw:has([aria-expanded=true][aria-haspopup=true]){--expandable-provided-elembefore-display:none}
 ._1mmi1txw{--expandable-chevron-display:flex}
 ._1mmiglyw{--expandable-chevron-display:none}
 ._b31z1txw:has(:focus-visible){--expandable-chevron-display:flex}
+._pnu5glyw:has([aria-expanded=true][aria-haspopup]){--expandable-provided-elembefore-display:none}
 ._syazxl6c{color:var(--ds-icon-selected,#1868db)}
 ._v9u71txw:has([aria-expanded=true][aria-haspopup=true]){--expandable-chevron-display:flex}
 [dir=rtl] ._1tz3r0mg{transform:scaleX(-1)}

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

@@ -15,6 +15,7 @@ var _new = require("@atlaskit/button/new");
 var _forwardRefWithGeneric = _interopRequireDefault(require("@atlaskit/ds-lib/forward-ref-with-generic"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _menuItem = require("../menu-item");
 var _useScrollMenuItemIntoView = require("../use-scroll-menu-item-into-view");
 var _expandableMenuItemContext = require("./expandable-menu-item-context");
@@ -26,6 +27,14 @@ var wrapperStyles = {
   root: "_1mmi1txw _165nglyw",
   showProvidedElemBefore: "_1mmiglyw _165n1bgi _v9u71txw _1hl9glyw _b31z1txw _1vnl1txw _12xsglyw _p8btglyw"
 };
+var nestedOpenPopupStylesOld = {
+  showProvidedElemBefore: "_v9u71txw _1hl9glyw"
+};
+
+// Merge back into the `wrapperStyles` after cleanup
+var nestedOpenPopupStylesNew = {
+  showProvidedElemBefore: "_1ddp1txw _pnu5glyw"
+};
 var iconStyles = {
   chevron: "_1e0ciw0t _1tz3r0mg",
   providedElemBefore: "_1e0c1xb2",
@@ -127,7 +136,7 @@ var ExpandableMenuItemTrigger = exports.ExpandableMenuItemTrigger = (0, _forward
   // For expandable menu items, we shouldn't wrap in a `li` here. The `li` is instead at a higher level (`ExpandableMenuItem`), grouping the expandable menu item trigger and its content
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: itemRef,
-    className: (0, _runtime.ax)([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore])
+    className: (0, _runtime.ax)([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore, (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? nestedOpenPopupStylesNew.showProvidedElemBefore : nestedOpenPopupStylesOld.showProvidedElemBefore])
   }, /*#__PURE__*/_react.default.createElement(_menuItem.MenuItemBase, {
     id: id,
     actions: actions,

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

@@ -13,6 +13,7 @@
 ._14iu13ro:active:not(:disabled){background-color:var(--ds-surface-pressed,#dddee1)}
 ._14iunozp:active:not(:disabled){background-color:var(--ds-background-selected-pressed,#8fb8f6)}
 ._152t1ssb{inset-block-start:50%}
+._1783kb7n:has([aria-expanded=true][aria-haspopup]){--actions-on-hover-opacity:1}
 ._18m915vq{overflow-y:hidden}
 ._18ukglyw:not(:has(button,a)){pointer-events:none}
 ._1bah1h6o{justify-content:center}
@@ -20,11 +21,14 @@
 ._1bsbty16{width:var(--actions-on-hover-width)}
 ._1bsbyh40{width:2px}
 ._1cykglyw{--drag-handle-display:none}
+._1d171wug:has([aria-expanded=true][aria-haspopup]){--actions-on-hover-width:auto}
 ._1djyglyw:has([aria-expanded=true][aria-haspopup=true]){--elem-after-display:none}
 ._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
 ._1e0c11p5{display:grid}
 ._1e0c13yo{display:var(--elem-after-display)}
 ._1e0c1txw{display:flex}
+._1fpr19i6:has([aria-expanded=true][aria-haspopup]){background-color:var(--ds-surface-hovered,#f0f1f2)}
+._1fprufnl:has([aria-expanded=true][aria-haspopup]){background-color:var(--ds-background-selected-hovered,#cfe1fd)}
 ._1ifmglyw{-webkit-touch-callout:none}
 ._1lmcu4vt{grid-template-areas:"elem-before interactive elem-after actions"}
 ._1o9zidpf{flex-shrink:0}
@@ -60,6 +64,8 @@
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}
 ._kwq51b66:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-padding:var(--ds-space-050,4px)}
+._ligh1b66:has([aria-expanded=true][aria-haspopup]){--actions-on-hover-padding:var(--ds-space-050,4px)}
+._n3ixglyw:has([aria-expanded=true][aria-haspopup]){--elem-after-display:none}
 ._pmxp1wug{--actions-on-hover-width:auto}
 ._pmxpidpf{--actions-on-hover-width:0}
 ._qxq9kb7n:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-opacity:1}

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

@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.nestedOpenPopupCSSSelector = exports.MenuItemBase = void 0;
+exports.nestedOpenPopupCSSSelectorNew = exports.nestedOpenPopupCSSSelector = exports.MenuItemBase = void 0;
 require("./menu-item.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -121,17 +121,32 @@ var onTopOfButtonOrAnchorStyles = {
  * captured in [BLU-3354](https://jplat.atlassian.net/browse/BLU-3354).
  */
 var nestedOpenPopupCSSSelector = exports.nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
+// Behind fg('platform_dst_nav4_flyout_menu_slots_close_button') we are moving to a dialog role for the flyout
+// So making this selector more generic
+var nestedOpenPopupCSSSelectorNew = exports.nestedOpenPopupCSSSelectorNew = '&:has([aria-expanded="true"][aria-haspopup])';
 var containerStyles = {
-  root: "_2rko12b0 _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syazazsu _1yyu1j28 _91ju1txw _uomdidpf _pmxpidpf _db80idpf _qxq9kb7n _1rbv1wug _kwq51b66 _1swv19i6 _irr319i6 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
+  root: "_2rko12b0 _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syazazsu _1yyu1j28 _91ju1txw _uomdidpf _pmxpidpf _db80idpf _irr319i6 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
   rootT26Shape: "_2rko1qi0",
   removeElemAfter: "_91juglyw",
   showHoverActions: "_uomdkb7n _pmxp1wug _db801b66",
-  removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
-  selected: "_bfhk15s3 _syaz6x5g _1yyujmqp _1swvufnl _30l36x5g _irr3ufnl",
+  removeElemAfterOnHoverOrOpenNestedPopup: "_1mfcglyw _1sjuglyw",
+  selected: "_bfhk15s3 _syaz6x5g _1yyujmqp _30l36x5g _irr3ufnl",
   disabled: "_syaz1gmx _bfhkn7od _irr3n7od _30l31gmx",
   hasDescription: "_4t3i1wto",
   dragging: "_tzy41ou4"
 };
+var nestedOpenPopupStylesOld = {
+  root: "_qxq9kb7n _1rbv1wug _kwq51b66 _1swv19i6",
+  removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw",
+  selected: "_1swvufnl"
+};
+
+// Merge back into the `containerStyles` after cleanup
+var nestedOpenPopupStylesNew = {
+  root: "_1783kb7n _1d171wug _ligh1b66 _1fpr19i6",
+  removeElemAfterOnHoverOrOpenNestedPopup: "_n3ixglyw",
+  selected: "_1fprufnl"
+};
 var buttonOrAnchorStyles = {
   root: "_2rko12b0 _yyhyjvu9 _1ii7kb7n _1e0c11p5 _yv0enbh3 _2z05nbh3 _y4ti1b66 _bozg1b66 _1q511b66 _85i51b66 _bfhk1j28 _syazazsu _4cvr1h6o _y3gnv2br _14iu13ro",
   rootT26Shape: "_2rko1qi0",
@@ -304,7 +319,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref2, forwardedRef) {
     ref: visualContentRef,
     "data-testid": testId ? "".concat(testId, "-container") : undefined,
     "data-selected": isSelected,
-    className: (0, _runtime.ax)([containerStyles.root, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && containerStyles.rootT26Shape, isSelected && containerStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
+    className: (0, _runtime.ax)([containerStyles.root, (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? nestedOpenPopupStylesNew.root : nestedOpenPopupStylesOld.root, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && containerStyles.rootT26Shape, isSelected && containerStyles.selected, isSelected && (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesNew.selected, isSelected && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesOld.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, actionsOnHover && elemAfter && (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesNew.removeElemAfterOnHoverOrOpenNestedPopup, actionsOnHover && elemAfter && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesOld.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);

package/dist/cjs/ui/skeleton/skeleton-menu-section-heading.js

@@ -19,7 +19,7 @@ var skeletonStyles = {
 };
 /**
  * __Skeleton menu section heading__
- * 
+ *
  * A skeleton menu section heading is used to display a loading state for a side nav menu
  * section heading.
  *

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

@@ -1,12 +1,14 @@
 ._12xsglyw:has(:focus-visible){--expandable-provided-elembefore-display:none}
 ._165n1bgi{--expandable-provided-elembefore-display:contents}
 ._165nglyw{--expandable-provided-elembefore-display:none}
+._1ddp1txw:has([aria-expanded=true][aria-haspopup]){--expandable-chevron-display:flex}
 ._1e0c1xb2{display:var(--expandable-provided-elembefore-display)}
 ._1e0ciw0t{display:var(--expandable-chevron-display)}
 ._1hl9glyw:has([aria-expanded=true][aria-haspopup=true]){--expandable-provided-elembefore-display:none}
 ._1mmi1txw{--expandable-chevron-display:flex}
 ._1mmiglyw{--expandable-chevron-display:none}
 ._b31z1txw:has(:focus-visible){--expandable-chevron-display:flex}
+._pnu5glyw:has([aria-expanded=true][aria-haspopup]){--expandable-provided-elembefore-display:none}
 ._syazxl6c{color:var(--ds-icon-selected,#1868db)}
 ._v9u71txw:has([aria-expanded=true][aria-haspopup=true]){--expandable-chevron-display:flex}
 [dir=rtl] ._1tz3r0mg{transform:scaleX(-1)}

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

@@ -7,7 +7,8 @@ import { IconButton } from '@atlaskit/button/new';
 import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
-import { MenuItemBase, nestedOpenPopupCSSSelector } from '../menu-item';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { MenuItemBase, nestedOpenPopupCSSSelector, nestedOpenPopupCSSSelectorNew } from '../menu-item';
 import { useScrollMenuItemIntoView } from '../use-scroll-menu-item-into-view';
 import { useIsExpanded, useOnExpansionToggle, useSetIsExpanded } from './expandable-menu-item-context';
 // Widening type to `string` to side-step Compiled cssMap typescript warnings with unknown properties
@@ -17,6 +18,14 @@ const wrapperStyles = {
   root: "_1mmi1txw _165nglyw",
   showProvidedElemBefore: "_1mmiglyw _165n1bgi _v9u71txw _1hl9glyw _b31z1txw _1vnl1txw _12xsglyw _p8btglyw"
 };
+const nestedOpenPopupStylesOld = {
+  showProvidedElemBefore: "_v9u71txw _1hl9glyw"
+};
+
+// Merge back into the `wrapperStyles` after cleanup
+const nestedOpenPopupStylesNew = {
+  showProvidedElemBefore: "_1ddp1txw _pnu5glyw"
+};
 const iconStyles = {
   chevron: "_1e0ciw0t _1tz3r0mg",
   providedElemBefore: "_1e0c1xb2",
@@ -118,7 +127,7 @@ export const ExpandableMenuItemTrigger = forwardRefWithGeneric(({
   // For expandable menu items, we shouldn't wrap in a `li` here. The `li` is instead at a higher level (`ExpandableMenuItem`), grouping the expandable menu item trigger and its content
   return /*#__PURE__*/React.createElement("div", {
     ref: itemRef,
-    className: ax([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore])
+    className: ax([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore, fg('platform_dst_nav4_flyout_menu_slots_close_button') ? nestedOpenPopupStylesNew.showProvidedElemBefore : nestedOpenPopupStylesOld.showProvidedElemBefore])
   }, /*#__PURE__*/React.createElement(MenuItemBase, {
     id: id,
     actions: actions,

package/dist/es2019/ui/menu-item/flyout-menu-item/close-button.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { IconButton } from "@atlaskit/button/new";
-import CrossIcon from "@atlaskit/icon/core/cross";
+import { IconButton } from '@atlaskit/button/new';
+import CrossIcon from '@atlaskit/icon/core/cross';
 /**
  * __Close button__
  *

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

@@ -13,6 +13,7 @@
 ._14iu13ro:active:not(:disabled){background-color:var(--ds-surface-pressed,#dddee1)}
 ._14iunozp:active:not(:disabled){background-color:var(--ds-background-selected-pressed,#8fb8f6)}
 ._152t1ssb{inset-block-start:50%}
+._1783kb7n:has([aria-expanded=true][aria-haspopup]){--actions-on-hover-opacity:1}
 ._18m915vq{overflow-y:hidden}
 ._18ukglyw:not(:has(button,a)){pointer-events:none}
 ._1bah1h6o{justify-content:center}
@@ -20,11 +21,14 @@
 ._1bsbty16{width:var(--actions-on-hover-width)}
 ._1bsbyh40{width:2px}
 ._1cykglyw{--drag-handle-display:none}
+._1d171wug:has([aria-expanded=true][aria-haspopup]){--actions-on-hover-width:auto}
 ._1djyglyw:has([aria-expanded=true][aria-haspopup=true]){--elem-after-display:none}
 ._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
 ._1e0c11p5{display:grid}
 ._1e0c13yo{display:var(--elem-after-display)}
 ._1e0c1txw{display:flex}
+._1fpr19i6:has([aria-expanded=true][aria-haspopup]){background-color:var(--ds-surface-hovered,#f0f1f2)}
+._1fprufnl:has([aria-expanded=true][aria-haspopup]){background-color:var(--ds-background-selected-hovered,#cfe1fd)}
 ._1ifmglyw{-webkit-touch-callout:none}
 ._1lmcu4vt{grid-template-areas:"elem-before interactive elem-after actions"}
 ._1o9zidpf{flex-shrink:0}
@@ -60,6 +64,8 @@
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}
 ._kwq51b66:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-padding:var(--ds-space-050,4px)}
+._ligh1b66:has([aria-expanded=true][aria-haspopup]){--actions-on-hover-padding:var(--ds-space-050,4px)}
+._n3ixglyw:has([aria-expanded=true][aria-haspopup]){--elem-after-display:none}
 ._pmxp1wug{--actions-on-hover-width:auto}
 ._pmxpidpf{--actions-on-hover-width:0}
 ._qxq9kb7n:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-opacity:1}

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

@@ -109,17 +109,32 @@ const onTopOfButtonOrAnchorStyles = {
  * captured in [BLU-3354](https://jplat.atlassian.net/browse/BLU-3354).
  */
 export const nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
+// Behind fg('platform_dst_nav4_flyout_menu_slots_close_button') we are moving to a dialog role for the flyout
+// So making this selector more generic
+export const nestedOpenPopupCSSSelectorNew = '&:has([aria-expanded="true"][aria-haspopup])';
 const containerStyles = {
-  root: "_2rko12b0 _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syazazsu _1yyu1j28 _91ju1txw _uomdidpf _pmxpidpf _db80idpf _qxq9kb7n _1rbv1wug _kwq51b66 _1swv19i6 _irr319i6 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
+  root: "_2rko12b0 _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syazazsu _1yyu1j28 _91ju1txw _uomdidpf _pmxpidpf _db80idpf _irr319i6 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
   rootT26Shape: "_2rko1qi0",
   removeElemAfter: "_91juglyw",
   showHoverActions: "_uomdkb7n _pmxp1wug _db801b66",
-  removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
-  selected: "_bfhk15s3 _syaz6x5g _1yyujmqp _1swvufnl _30l36x5g _irr3ufnl",
+  removeElemAfterOnHoverOrOpenNestedPopup: "_1mfcglyw _1sjuglyw",
+  selected: "_bfhk15s3 _syaz6x5g _1yyujmqp _30l36x5g _irr3ufnl",
   disabled: "_syaz1gmx _bfhkn7od _irr3n7od _30l31gmx",
   hasDescription: "_4t3i1wto",
   dragging: "_tzy41ou4"
 };
+const nestedOpenPopupStylesOld = {
+  root: "_qxq9kb7n _1rbv1wug _kwq51b66 _1swv19i6",
+  removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw",
+  selected: "_1swvufnl"
+};
+
+// Merge back into the `containerStyles` after cleanup
+const nestedOpenPopupStylesNew = {
+  root: "_1783kb7n _1d171wug _ligh1b66 _1fpr19i6",
+  removeElemAfterOnHoverOrOpenNestedPopup: "_n3ixglyw",
+  selected: "_1fprufnl"
+};
 const buttonOrAnchorStyles = {
   root: "_2rko12b0 _yyhyjvu9 _1ii7kb7n _1e0c11p5 _yv0enbh3 _2z05nbh3 _y4ti1b66 _bozg1b66 _1q511b66 _85i51b66 _bfhk1j28 _syazazsu _4cvr1h6o _y3gnv2br _14iu13ro",
   rootT26Shape: "_2rko1qi0",
@@ -294,7 +309,7 @@ const MenuItemBaseNoRef = ({
     ref: visualContentRef,
     "data-testid": testId ? `${testId}-container` : undefined,
     "data-selected": isSelected,
-    className: ax([containerStyles.root, fg('platform-dst-shape-theme-default') && containerStyles.rootT26Shape, isSelected && containerStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
+    className: ax([containerStyles.root, fg('platform_dst_nav4_flyout_menu_slots_close_button') ? nestedOpenPopupStylesNew.root : nestedOpenPopupStylesOld.root, fg('platform-dst-shape-theme-default') && containerStyles.rootT26Shape, isSelected && containerStyles.selected, isSelected && fg('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesNew.selected, isSelected && !fg('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesOld.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, actionsOnHover && elemAfter && fg('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesNew.removeElemAfterOnHoverOrOpenNestedPopup, actionsOnHover && elemAfter && !fg('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesOld.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-start",

package/dist/es2019/ui/skeleton/skeleton-menu-section-heading.js

@@ -11,7 +11,7 @@ const skeletonStyles = {
 };
 /**
  * __Skeleton menu section heading__
- * 
+ *
  * A skeleton menu section heading is used to display a loading state for a side nav menu
  * section heading.
  *

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

@@ -1,12 +1,14 @@
 ._12xsglyw:has(:focus-visible){--expandable-provided-elembefore-display:none}
 ._165n1bgi{--expandable-provided-elembefore-display:contents}
 ._165nglyw{--expandable-provided-elembefore-display:none}
+._1ddp1txw:has([aria-expanded=true][aria-haspopup]){--expandable-chevron-display:flex}
 ._1e0c1xb2{display:var(--expandable-provided-elembefore-display)}
 ._1e0ciw0t{display:var(--expandable-chevron-display)}
 ._1hl9glyw:has([aria-expanded=true][aria-haspopup=true]){--expandable-provided-elembefore-display:none}
 ._1mmi1txw{--expandable-chevron-display:flex}
 ._1mmiglyw{--expandable-chevron-display:none}
 ._b31z1txw:has(:focus-visible){--expandable-chevron-display:flex}
+._pnu5glyw:has([aria-expanded=true][aria-haspopup]){--expandable-provided-elembefore-display:none}
 ._syazxl6c{color:var(--ds-icon-selected,#1868db)}
 ._v9u71txw:has([aria-expanded=true][aria-haspopup=true]){--expandable-chevron-display:flex}
 [dir=rtl] ._1tz3r0mg{transform:scaleX(-1)}

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

@@ -7,7 +7,8 @@ import { IconButton } from '@atlaskit/button/new';
 import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
-import { MenuItemBase, nestedOpenPopupCSSSelector } from '../menu-item';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { MenuItemBase, nestedOpenPopupCSSSelector, nestedOpenPopupCSSSelectorNew } from '../menu-item';
 import { useScrollMenuItemIntoView } from '../use-scroll-menu-item-into-view';
 import { useIsExpanded, useOnExpansionToggle, useSetIsExpanded } from './expandable-menu-item-context';
 // Widening type to `string` to side-step Compiled cssMap typescript warnings with unknown properties
@@ -17,6 +18,14 @@ var wrapperStyles = {
   root: "_1mmi1txw _165nglyw",
   showProvidedElemBefore: "_1mmiglyw _165n1bgi _v9u71txw _1hl9glyw _b31z1txw _1vnl1txw _12xsglyw _p8btglyw"
 };
+var nestedOpenPopupStylesOld = {
+  showProvidedElemBefore: "_v9u71txw _1hl9glyw"
+};
+
+// Merge back into the `wrapperStyles` after cleanup
+var nestedOpenPopupStylesNew = {
+  showProvidedElemBefore: "_1ddp1txw _pnu5glyw"
+};
 var iconStyles = {
   chevron: "_1e0ciw0t _1tz3r0mg",
   providedElemBefore: "_1e0c1xb2",
@@ -118,7 +127,7 @@ export var ExpandableMenuItemTrigger = forwardRefWithGeneric(function (_ref2, fo
   // For expandable menu items, we shouldn't wrap in a `li` here. The `li` is instead at a higher level (`ExpandableMenuItem`), grouping the expandable menu item trigger and its content
   return /*#__PURE__*/React.createElement("div", {
     ref: itemRef,
-    className: ax([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore])
+    className: ax([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore, fg('platform_dst_nav4_flyout_menu_slots_close_button') ? nestedOpenPopupStylesNew.showProvidedElemBefore : nestedOpenPopupStylesOld.showProvidedElemBefore])
   }, /*#__PURE__*/React.createElement(MenuItemBase, {
     id: id,
     actions: actions,

package/dist/esm/ui/menu-item/flyout-menu-item/close-button.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { IconButton } from "@atlaskit/button/new";
-import CrossIcon from "@atlaskit/icon/core/cross";
+import { IconButton } from '@atlaskit/button/new';
+import CrossIcon from '@atlaskit/icon/core/cross';
 /**
  * __Close button__
  *

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

@@ -13,6 +13,7 @@
 ._14iu13ro:active:not(:disabled){background-color:var(--ds-surface-pressed,#dddee1)}
 ._14iunozp:active:not(:disabled){background-color:var(--ds-background-selected-pressed,#8fb8f6)}
 ._152t1ssb{inset-block-start:50%}
+._1783kb7n:has([aria-expanded=true][aria-haspopup]){--actions-on-hover-opacity:1}
 ._18m915vq{overflow-y:hidden}
 ._18ukglyw:not(:has(button,a)){pointer-events:none}
 ._1bah1h6o{justify-content:center}
@@ -20,11 +21,14 @@
 ._1bsbty16{width:var(--actions-on-hover-width)}
 ._1bsbyh40{width:2px}
 ._1cykglyw{--drag-handle-display:none}
+._1d171wug:has([aria-expanded=true][aria-haspopup]){--actions-on-hover-width:auto}
 ._1djyglyw:has([aria-expanded=true][aria-haspopup=true]){--elem-after-display:none}
 ._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
 ._1e0c11p5{display:grid}
 ._1e0c13yo{display:var(--elem-after-display)}
 ._1e0c1txw{display:flex}
+._1fpr19i6:has([aria-expanded=true][aria-haspopup]){background-color:var(--ds-surface-hovered,#f0f1f2)}
+._1fprufnl:has([aria-expanded=true][aria-haspopup]){background-color:var(--ds-background-selected-hovered,#cfe1fd)}
 ._1ifmglyw{-webkit-touch-callout:none}
 ._1lmcu4vt{grid-template-areas:"elem-before interactive elem-after actions"}
 ._1o9zidpf{flex-shrink:0}
@@ -60,6 +64,8 @@
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}
 ._kwq51b66:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-padding:var(--ds-space-050,4px)}
+._ligh1b66:has([aria-expanded=true][aria-haspopup]){--actions-on-hover-padding:var(--ds-space-050,4px)}
+._n3ixglyw:has([aria-expanded=true][aria-haspopup]){--elem-after-display:none}
 ._pmxp1wug{--actions-on-hover-width:auto}
 ._pmxpidpf{--actions-on-hover-width:0}
 ._qxq9kb7n:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-opacity:1}

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

@@ -112,17 +112,32 @@ var onTopOfButtonOrAnchorStyles = {
  * captured in [BLU-3354](https://jplat.atlassian.net/browse/BLU-3354).
  */
 export var nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
+// Behind fg('platform_dst_nav4_flyout_menu_slots_close_button') we are moving to a dialog role for the flyout
+// So making this selector more generic
+export var nestedOpenPopupCSSSelectorNew = '&:has([aria-expanded="true"][aria-haspopup])';
 var containerStyles = {
-  root: "_2rko12b0 _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syazazsu _1yyu1j28 _91ju1txw _uomdidpf _pmxpidpf _db80idpf _qxq9kb7n _1rbv1wug _kwq51b66 _1swv19i6 _irr319i6 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
+  root: "_2rko12b0 _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syazazsu _1yyu1j28 _91ju1txw _uomdidpf _pmxpidpf _db80idpf _irr319i6 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
   rootT26Shape: "_2rko1qi0",
   removeElemAfter: "_91juglyw",
   showHoverActions: "_uomdkb7n _pmxp1wug _db801b66",
-  removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
-  selected: "_bfhk15s3 _syaz6x5g _1yyujmqp _1swvufnl _30l36x5g _irr3ufnl",
+  removeElemAfterOnHoverOrOpenNestedPopup: "_1mfcglyw _1sjuglyw",
+  selected: "_bfhk15s3 _syaz6x5g _1yyujmqp _30l36x5g _irr3ufnl",
   disabled: "_syaz1gmx _bfhkn7od _irr3n7od _30l31gmx",
   hasDescription: "_4t3i1wto",
   dragging: "_tzy41ou4"
 };
+var nestedOpenPopupStylesOld = {
+  root: "_qxq9kb7n _1rbv1wug _kwq51b66 _1swv19i6",
+  removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw",
+  selected: "_1swvufnl"
+};
+
+// Merge back into the `containerStyles` after cleanup
+var nestedOpenPopupStylesNew = {
+  root: "_1783kb7n _1d171wug _ligh1b66 _1fpr19i6",
+  removeElemAfterOnHoverOrOpenNestedPopup: "_n3ixglyw",
+  selected: "_1fprufnl"
+};
 var buttonOrAnchorStyles = {
   root: "_2rko12b0 _yyhyjvu9 _1ii7kb7n _1e0c11p5 _yv0enbh3 _2z05nbh3 _y4ti1b66 _bozg1b66 _1q511b66 _85i51b66 _bfhk1j28 _syazazsu _4cvr1h6o _y3gnv2br _14iu13ro",
   rootT26Shape: "_2rko1qi0",
@@ -295,7 +310,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref2, forwardedRef) {
     ref: visualContentRef,
     "data-testid": testId ? "".concat(testId, "-container") : undefined,
     "data-selected": isSelected,
-    className: ax([containerStyles.root, fg('platform-dst-shape-theme-default') && containerStyles.rootT26Shape, isSelected && containerStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
+    className: ax([containerStyles.root, fg('platform_dst_nav4_flyout_menu_slots_close_button') ? nestedOpenPopupStylesNew.root : nestedOpenPopupStylesOld.root, fg('platform-dst-shape-theme-default') && containerStyles.rootT26Shape, isSelected && containerStyles.selected, isSelected && fg('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesNew.selected, isSelected && !fg('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesOld.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, actionsOnHover && elemAfter && fg('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesNew.removeElemAfterOnHoverOrOpenNestedPopup, actionsOnHover && elemAfter && !fg('platform_dst_nav4_flyout_menu_slots_close_button') && nestedOpenPopupStylesOld.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);

package/dist/esm/ui/skeleton/skeleton-menu-section-heading.js

@@ -11,7 +11,7 @@ var skeletonStyles = {
 };
 /**
  * __Skeleton menu section heading__
- * 
+ *
  * A skeleton menu section heading is used to display a loading state for a side nav menu
  * section heading.
  *

package/dist/types/entry-points/skeleton.d.ts

@@ -1,2 +1,2 @@
 export { SkeletonMenuItem, type SkeletonMenuItemProps } from '../ui/skeleton/skeleton-menu-item';
-export { SkeletonMenuSectionHeading, type SkeletonMenuSectionHeadingProps } from '../ui/skeleton/skeleton-menu-section-heading';
+export { SkeletonMenuSectionHeading, type SkeletonMenuSectionHeadingProps, } from '../ui/skeleton/skeleton-menu-section-heading';

package/dist/types/ui/menu-item/flyout-menu-item/close-button.d.ts

@@ -4,7 +4,7 @@ type CloseButtonProps = {
      * The accessible name to give to the close button.
      *
      * Used as the aria-label for the close button to ensure screen reader
-         * accessibility.
+     * accessibility.
      */
     label: string;
     /**
@@ -15,7 +15,7 @@ type CloseButtonProps = {
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * A unique string that appears as data attribute data-testid in the
-         * rendered code, serving as a hook for automated tests.
+     * rendered code, serving as a hook for automated tests.
      */
     testId?: string;
 };

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

@@ -19,6 +19,7 @@ import type { MenuItemLinkOrButtonCommonProps, MenuItemOnClick } from './types';
  * captured in [BLU-3354](https://jplat.atlassian.net/browse/BLU-3354).
  */
 export declare const nestedOpenPopupCSSSelector = "&:has([aria-expanded=\"true\"][aria-haspopup=\"true\"])";
+export declare const nestedOpenPopupCSSSelectorNew = "&:has([aria-expanded=\"true\"][aria-haspopup])";
 /**
  * Includes all props that are used by any menu item, as MenuItembase is the base component for all menu item components.
  *

package/dist/types-ts4.5/entry-points/skeleton.d.ts

@@ -1,2 +1,2 @@
 export { SkeletonMenuItem, type SkeletonMenuItemProps } from '../ui/skeleton/skeleton-menu-item';
-export { SkeletonMenuSectionHeading, type SkeletonMenuSectionHeadingProps } from '../ui/skeleton/skeleton-menu-section-heading';
+export { SkeletonMenuSectionHeading, type SkeletonMenuSectionHeadingProps, } from '../ui/skeleton/skeleton-menu-section-heading';

package/dist/types-ts4.5/ui/menu-item/flyout-menu-item/close-button.d.ts

@@ -4,7 +4,7 @@ type CloseButtonProps = {
      * The accessible name to give to the close button.
      *
      * Used as the aria-label for the close button to ensure screen reader
-         * accessibility.
+     * accessibility.
      */
     label: string;
     /**
@@ -15,7 +15,7 @@ type CloseButtonProps = {
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * A unique string that appears as data attribute data-testid in the
-         * rendered code, serving as a hook for automated tests.
+     * rendered code, serving as a hook for automated tests.
      */
     testId?: string;
 };

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

@@ -19,6 +19,7 @@ import type { MenuItemLinkOrButtonCommonProps, MenuItemOnClick } from './types';
  * captured in [BLU-3354](https://jplat.atlassian.net/browse/BLU-3354).
  */
 export declare const nestedOpenPopupCSSSelector = "&:has([aria-expanded=\"true\"][aria-haspopup=\"true\"])";
+export declare const nestedOpenPopupCSSSelectorNew = "&:has([aria-expanded=\"true\"][aria-haspopup])";
 /**
  * Includes all props that are used by any menu item, as MenuItembase is the base component for all menu item components.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/side-nav-items",
-	"version": "1.7.1",
+	"version": "1.7.3",
 	"description": "Menu items and elements for the navigation side nav area.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,12 +30,12 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
-		"@atlaskit/avatar": "^25.7.0",
+		"@atlaskit/avatar": "^25.8.0",
 		"@atlaskit/button": "^23.9.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^5.3.0",
 		"@atlaskit/heading": "^5.3.0",
-		"@atlaskit/icon": "^31.0.0",
+		"@atlaskit/icon": "^32.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^4.13.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
@@ -58,7 +58,7 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/app-provider": "^4.1.0",
 		"@atlaskit/lozenge": "^13.4.0",
-		"@atlaskit/navigation-system": "^5.34.0",
+		"@atlaskit/navigation-system": "^5.39.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlassian/a11y-jest-testing": "^0.10.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",