@atlaskit/side-nav-items 1.13.8 → 1.13.9

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/side-nav-items
 
+## 1.13.9
+
+### Patch Changes
+
+- [`cc4a66306965d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cc4a66306965d) -
+  Cleanup feature gate `platform_dst_nav4_flyout_menu_slots_close_button`. Flyout menu slot
+  subcomponents (header, body, footer) and close button are now permanently enabled.
+- Updated dependencies
+
 ## 1.13.8
 
 ### Patch Changes

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

@@ -4,13 +4,11 @@
 ._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)}
 ._1vnl1txw:hover{--expandable-chevron-display:flex}
 ._p8btglyw:hover{--expandable-provided-elembefore-display:none}

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

@@ -15,7 +15,6 @@ 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");
@@ -25,14 +24,11 @@ var chevronDisplayCssVar = '--expandable-chevron-display';
 var providedElemBeforeDisplayCssVar = '--expandable-provided-elembefore-display';
 var wrapperStyles = {
   root: "_1mmi1txw _165nglyw",
-  showProvidedElemBefore: "_1mmiglyw _165n1bgi _v9u71txw _1hl9glyw _b31z1txw _1vnl1txw _12xsglyw _p8btglyw"
-};
-var nestedOpenPopupStylesOld = {
-  showProvidedElemBefore: "_v9u71txw _1hl9glyw"
+  showProvidedElemBefore: "_1mmiglyw _165n1bgi _1ddp1txw _pnu5glyw _b31z1txw _1vnl1txw _12xsglyw _p8btglyw"
 };
 
 // Merge back into the `wrapperStyles` after cleanup
-var nestedOpenPopupStylesNew = {
+var nestedOpenPopupStyles = {
   showProvidedElemBefore: "_1ddp1txw _pnu5glyw"
 };
 var iconStyles = {
@@ -136,7 +132,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, (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? nestedOpenPopupStylesNew.showProvidedElemBefore : nestedOpenPopupStylesOld.showProvidedElemBefore])
+    className: (0, _runtime.ax)([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore, nestedOpenPopupStyles.showProvidedElemBefore])
   }, /*#__PURE__*/_react.default.createElement(_menuItem.MenuItemBase, {
     id: id,
     actions: actions,

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

@@ -14,7 +14,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experimental = require("@atlaskit/popup/experimental");
 var _flyoutMenuItemContext = require("./flyout-menu-item-context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -71,33 +70,31 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
   // handleClose function, or passed in as a parameter in FlyoutMenuItemTrigger (outside-click),
   // or FlyoutHeader (close-button).
   var handleClose = (0, _react.useCallback)(function (event, source) {
-    if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button')) {
-      // Use the passed source if provided, otherwise determine from event
-      var determinedSource = source || 'other';
-      if (!source) {
-        if (event instanceof KeyboardEvent) {
-          var keyboardEvent = event;
-          if (keyboardEvent.key === 'Escape' || keyboardEvent.key === 'Esc') {
-            determinedSource = 'escape-key';
-          }
-        } else if (event instanceof MouseEvent) {
-          if (event && 'type' in event && event.type === 'click') {
-            determinedSource = 'outside-click';
-          }
+    // Use the passed source if provided, otherwise determine from event
+    var determinedSource = source || 'other';
+    if (!source) {
+      if (event instanceof KeyboardEvent) {
+        var keyboardEvent = event;
+        if (keyboardEvent.key === 'Escape' || keyboardEvent.key === 'Esc') {
+          determinedSource = 'escape-key';
         }
-      }
-
-      // When flyout menu is closed, fire analytics event
-      var navigationAnalyticsEvent = createAnalyticsEvent({
-        source: 'sideNav',
-        actionSubject: 'flyoutMenu',
-        action: 'closed',
-        attributes: {
-          closeSource: determinedSource
+      } else if (event instanceof MouseEvent) {
+        if (event && 'type' in event && event.type === 'click') {
+          determinedSource = 'outside-click';
         }
-      });
-      navigationAnalyticsEvent.fire('navigation');
+      }
     }
+
+    // When flyout menu is closed, fire analytics event
+    var navigationAnalyticsEvent = createAnalyticsEvent({
+      source: 'sideNav',
+      actionSubject: 'flyoutMenu',
+      action: 'closed',
+      attributes: {
+        closeSource: determinedSource
+      }
+    });
+    navigationAnalyticsEvent.fire('navigation');
     onClose === null || onClose === void 0 || onClose();
     setIsOpen(false);
   }, [setIsOpen, onClose, createAnalyticsEvent]);
@@ -134,8 +131,8 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
     testId: containerTestId,
     xcss: flyoutMenuItemContentStyles.root,
     autoFocus: autoFocus,
-    role: (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined,
-    titleId: (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? titleId : undefined
+    role: "dialog",
+    titleId: titleId
     /**
      * Disabling GPU acceleration removes the use of `transform` by popper.js for this popup.
      *
@@ -156,13 +153,13 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
     return /*#__PURE__*/_react.default.createElement(UpdatePopperOnContentResize, {
       ref: forwardedRef,
       update: update
-    }, (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.TitleIdContextProvider, {
+    }, /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.TitleIdContextProvider, {
       value: titleId
     }, /*#__PURE__*/_react.default.createElement("div", {
       style: (0, _defineProperty2.default)({}, maxHeightCssVar, computedMaxHeight),
       "data-testid": containerTestId ? "".concat(containerTestId, "--container") : undefined,
       className: (0, _runtime.ax)([flyoutMenuItemContentContainerStyles.container])
-    }, children)) : children);
+    }, children)));
   });
 });
 function createResizeObserver(update) {

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

@@ -13,7 +13,6 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experimental = require("@atlaskit/popup/experimental");
 var _menuItem = require("../menu-item");
 var _flyoutMenuItemContext = require("./flyout-menu-item-context");
@@ -41,12 +40,8 @@ var FlyoutMenuItemTrigger = exports.FlyoutMenuItemTrigger = /*#__PURE__*/(0, _re
   var isOpen = (0, _react.useContext)(_flyoutMenuItemContext.IsOpenContext);
   var onCloseRef = (0, _react.useContext)(_flyoutMenuItemContext.OnCloseContext);
   var handleClick = (0, _react.useCallback)(function (event, analyticsEvent) {
-    // If the flyout is open and the trigger is clicked, close the flyout and call the onClick
-    // handler with the source information set to 'outside-click'.
-    if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button')) {
-      if (isOpen && onCloseRef.current) {
-        onCloseRef.current(event, 'outside-click');
-      }
+    if (isOpen && onCloseRef.current) {
+      onCloseRef.current(event, 'outside-click');
     }
     onClick === null || onClick === void 0 || onClick(event, analyticsEvent);
   }, [isOpen, onCloseRef, onClick]);

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

@@ -11,7 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _useControlled3 = _interopRequireDefault(require("@atlaskit/ds-lib/use-controlled"));
 var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experimental = require("@atlaskit/popup/experimental");
 var _menuListItem = require("../menu-list-item");
 var _flyoutMenuItemContext = require("./flyout-menu-item-context");
@@ -67,14 +66,12 @@ var FlyoutMenuItem = exports.FlyoutMenuItem = /*#__PURE__*/(0, _react.forwardRef
 
     // When flyout menu is opened, fire analytics event
     if (isOpen && previousIsOpen === false) {
-      if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button')) {
-        var navigationAnalyticsEvent = createAnalyticsEvent({
-          source: 'sideNav',
-          actionSubject: 'flyoutMenu',
-          action: 'opened'
-        });
-        navigationAnalyticsEvent.fire('navigation');
-      }
+      var navigationAnalyticsEvent = createAnalyticsEvent({
+        source: 'sideNav',
+        actionSubject: 'flyoutMenu',
+        action: 'opened'
+      });
+      navigationAnalyticsEvent.fire('navigation');
     }
     onOpenChange === null || onOpenChange === void 0 || onOpenChange(isOpen);
   }, [isOpen, onOpenChange, previousIsOpen, createAnalyticsEvent]);
@@ -89,6 +86,6 @@ var FlyoutMenuItem = exports.FlyoutMenuItem = /*#__PURE__*/(0, _react.forwardRef
   }, /*#__PURE__*/_react.default.createElement(_experimental.Popup, {
     id: id,
     isOpen: isOpen,
-    role: (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined
+    role: "dialog"
   }, children)))));
 });

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

@@ -22,7 +22,6 @@
 ._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)}
@@ -33,10 +32,7 @@
 ._1lmcu4vt{grid-template-areas:"elem-before interactive elem-after actions"}
 ._1o9zidpf{flex-shrink:0}
 ._1q511b66{padding-block-start:var(--ds-space-050,4px)}
-._1rbv1wug:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-width:auto}
 ._1reo15vq{overflow-x:hidden}
-._1swv19i6:has([aria-expanded=true][aria-haspopup=true]){background-color:var(--ds-surface-hovered,#f0f1f2)}
-._1swvufnl:has([aria-expanded=true][aria-haspopup=true]){background-color:var(--ds-background-selected-hovered,#cfe1fd)}
 ._1ul91c9m{min-width:1ch}
 ._1ul9t9kd{min-width:72px}
 ._1yyu1j28{--notch-color:transparent}
@@ -63,12 +59,10 @@
 ._db80idpf{--actions-on-hover-padding:0}
 ._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}
 ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
 ._syaz6x5g{color:var(--ds-text-selected,#1868db)}
 ._syazazsu{color:var(--ds-text-subtle,#505258)}

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.nestedOpenPopupCSSSelectorNew = exports.nestedOpenPopupCSSSelector = exports.MenuItemBase = void 0;
+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"));
@@ -120,10 +120,7 @@ var onTopOfButtonOrAnchorStyles = {
  * events through it (and applying the hover style when the popup is open). Exploring this has been
  * 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 nestedOpenPopupCSSSelector = exports.nestedOpenPopupCSSSelector = '&: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 _irr319i6 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
   rootT26Shape: "_2rko1qi0",
@@ -135,14 +132,7 @@ var containerStyles = {
   hasDescription: "_4t3i1wto",
   dragging: "_tzy41ou4"
 };
-var nestedOpenPopupStylesOld = {
-  root: "_qxq9kb7n _1rbv1wug _kwq51b66 _1swv19i6",
-  removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw",
-  selected: "_1swvufnl"
-};
-
-// Merge back into the `containerStyles` after cleanup
-var nestedOpenPopupStylesNew = {
+var nestedOpenPopupStyles = {
   root: "_1783kb7n _1d171wug _ligh1b66 _1fpr19i6",
   removeElemAfterOnHoverOrOpenNestedPopup: "_n3ixglyw",
   selected: "_1fprufnl"
@@ -317,7 +307,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_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])
+    className: (0, _runtime.ax)([containerStyles.root, nestedOpenPopupStyles.root, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && containerStyles.rootT26Shape, isSelected && containerStyles.selected, isSelected && nestedOpenPopupStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, actionsOnHover && elemAfter && nestedOpenPopupStyles.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/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.compiled.css

@@ -4,13 +4,11 @@
 ._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)}
 ._1vnl1txw:hover{--expandable-chevron-display:flex}
 ._p8btglyw:hover{--expandable-provided-elembefore-display:none}

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

@@ -7,8 +7,7 @@ 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 { fg } from '@atlaskit/platform-feature-flags';
-import { MenuItemBase, nestedOpenPopupCSSSelector, nestedOpenPopupCSSSelectorNew } from '../menu-item';
+import { MenuItemBase, nestedOpenPopupCSSSelector } 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
@@ -16,14 +15,11 @@ const chevronDisplayCssVar = '--expandable-chevron-display';
 const providedElemBeforeDisplayCssVar = '--expandable-provided-elembefore-display';
 const wrapperStyles = {
   root: "_1mmi1txw _165nglyw",
-  showProvidedElemBefore: "_1mmiglyw _165n1bgi _v9u71txw _1hl9glyw _b31z1txw _1vnl1txw _12xsglyw _p8btglyw"
-};
-const nestedOpenPopupStylesOld = {
-  showProvidedElemBefore: "_v9u71txw _1hl9glyw"
+  showProvidedElemBefore: "_1mmiglyw _165n1bgi _1ddp1txw _pnu5glyw _b31z1txw _1vnl1txw _12xsglyw _p8btglyw"
 };
 
 // Merge back into the `wrapperStyles` after cleanup
-const nestedOpenPopupStylesNew = {
+const nestedOpenPopupStyles = {
   showProvidedElemBefore: "_1ddp1txw _pnu5glyw"
 };
 const iconStyles = {
@@ -127,7 +123,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, fg('platform_dst_nav4_flyout_menu_slots_close_button') ? nestedOpenPopupStylesNew.showProvidedElemBefore : nestedOpenPopupStylesOld.showProvidedElemBefore])
+    className: ax([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore, nestedOpenPopupStyles.showProvidedElemBefore])
   }, /*#__PURE__*/React.createElement(MenuItemBase, {
     id: id,
     actions: actions,

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

@@ -4,7 +4,6 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { PopupContent } from '@atlaskit/popup/experimental';
 import { OnCloseContext, SetIsOpenContext, TitleIdContextProvider } from './flyout-menu-item-context';
 /**
@@ -61,33 +60,31 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
   // handleClose function, or passed in as a parameter in FlyoutMenuItemTrigger (outside-click),
   // or FlyoutHeader (close-button).
   const handleClose = useCallback((event, source) => {
-    if (fg('platform_dst_nav4_flyout_menu_slots_close_button')) {
-      // Use the passed source if provided, otherwise determine from event
-      let determinedSource = source || 'other';
-      if (!source) {
-        if (event instanceof KeyboardEvent) {
-          const keyboardEvent = event;
-          if (keyboardEvent.key === 'Escape' || keyboardEvent.key === 'Esc') {
-            determinedSource = 'escape-key';
-          }
-        } else if (event instanceof MouseEvent) {
-          if (event && 'type' in event && event.type === 'click') {
-            determinedSource = 'outside-click';
-          }
+    // Use the passed source if provided, otherwise determine from event
+    let determinedSource = source || 'other';
+    if (!source) {
+      if (event instanceof KeyboardEvent) {
+        const keyboardEvent = event;
+        if (keyboardEvent.key === 'Escape' || keyboardEvent.key === 'Esc') {
+          determinedSource = 'escape-key';
         }
-      }
-
-      // When flyout menu is closed, fire analytics event
-      const navigationAnalyticsEvent = createAnalyticsEvent({
-        source: 'sideNav',
-        actionSubject: 'flyoutMenu',
-        action: 'closed',
-        attributes: {
-          closeSource: determinedSource
+      } else if (event instanceof MouseEvent) {
+        if (event && 'type' in event && event.type === 'click') {
+          determinedSource = 'outside-click';
         }
-      });
-      navigationAnalyticsEvent.fire('navigation');
+      }
     }
+
+    // When flyout menu is closed, fire analytics event
+    const navigationAnalyticsEvent = createAnalyticsEvent({
+      source: 'sideNav',
+      actionSubject: 'flyoutMenu',
+      action: 'closed',
+      attributes: {
+        closeSource: determinedSource
+      }
+    });
+    navigationAnalyticsEvent.fire('navigation');
     onClose === null || onClose === void 0 ? void 0 : onClose();
     setIsOpen(false);
   }, [setIsOpen, onClose, createAnalyticsEvent]);
@@ -121,8 +118,8 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
     testId: containerTestId,
     xcss: flyoutMenuItemContentStyles.root,
     autoFocus: autoFocus,
-    role: fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined,
-    titleId: fg('platform_dst_nav4_flyout_menu_slots_close_button') ? titleId : undefined
+    role: "dialog",
+    titleId: titleId
     /**
      * Disabling GPU acceleration removes the use of `transform` by popper.js for this popup.
      *
@@ -143,7 +140,7 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
   }) => /*#__PURE__*/React.createElement(UpdatePopperOnContentResize, {
     ref: forwardedRef,
     update: update
-  }, fg('platform_dst_nav4_flyout_menu_slots_close_button') ? /*#__PURE__*/React.createElement(TitleIdContextProvider, {
+  }, /*#__PURE__*/React.createElement(TitleIdContextProvider, {
     value: titleId
   }, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -151,7 +148,7 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
     },
     "data-testid": containerTestId ? `${containerTestId}--container` : undefined,
     className: ax([flyoutMenuItemContentContainerStyles.container])
-  }, children)) : children));
+  }, children))));
 });
 function createResizeObserver(update) {
   return new ResizeObserver(update);

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

@@ -5,7 +5,6 @@ import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useCallback, useContext } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { PopupTrigger } from '@atlaskit/popup/experimental';
 import { MenuItemBase } from '../menu-item';
 import { IsOpenContext, OnCloseContext } from './flyout-menu-item-context';
@@ -33,12 +32,8 @@ export const FlyoutMenuItemTrigger = /*#__PURE__*/forwardRef(({
   const isOpen = useContext(IsOpenContext);
   const onCloseRef = useContext(OnCloseContext);
   const handleClick = useCallback((event, analyticsEvent) => {
-    // If the flyout is open and the trigger is clicked, close the flyout and call the onClick
-    // handler with the source information set to 'outside-click'.
-    if (fg('platform_dst_nav4_flyout_menu_slots_close_button')) {
-      if (isOpen && onCloseRef.current) {
-        onCloseRef.current(event, 'outside-click');
-      }
+    if (isOpen && onCloseRef.current) {
+      onCloseRef.current(event, 'outside-click');
     }
     onClick === null || onClick === void 0 ? void 0 : onClick(event, analyticsEvent);
   }, [isOpen, onCloseRef, onClick]);

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

@@ -2,7 +2,6 @@ import React, { forwardRef, useEffect, useRef } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import useControlled from '@atlaskit/ds-lib/use-controlled';
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Popup } from '@atlaskit/popup/experimental';
 import { MenuListItem } from '../menu-list-item';
 import { IsOpenContext, OnCloseContext, SetIsOpenContext } from './flyout-menu-item-context';
@@ -53,14 +52,12 @@ export const FlyoutMenuItem = /*#__PURE__*/forwardRef(({
 
     // When flyout menu is opened, fire analytics event
     if (isOpen && previousIsOpen === false) {
-      if (fg('platform_dst_nav4_flyout_menu_slots_close_button')) {
-        const navigationAnalyticsEvent = createAnalyticsEvent({
-          source: 'sideNav',
-          actionSubject: 'flyoutMenu',
-          action: 'opened'
-        });
-        navigationAnalyticsEvent.fire('navigation');
-      }
+      const navigationAnalyticsEvent = createAnalyticsEvent({
+        source: 'sideNav',
+        actionSubject: 'flyoutMenu',
+        action: 'opened'
+      });
+      navigationAnalyticsEvent.fire('navigation');
     }
     onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
   }, [isOpen, onOpenChange, previousIsOpen, createAnalyticsEvent]);
@@ -75,6 +72,6 @@ export const FlyoutMenuItem = /*#__PURE__*/forwardRef(({
   }, /*#__PURE__*/React.createElement(Popup, {
     id: id,
     isOpen: isOpen,
-    role: fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined
+    role: "dialog"
   }, children)))));
 });

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

@@ -22,7 +22,6 @@
 ._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)}
@@ -33,10 +32,7 @@
 ._1lmcu4vt{grid-template-areas:"elem-before interactive elem-after actions"}
 ._1o9zidpf{flex-shrink:0}
 ._1q511b66{padding-block-start:var(--ds-space-050,4px)}
-._1rbv1wug:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-width:auto}
 ._1reo15vq{overflow-x:hidden}
-._1swv19i6:has([aria-expanded=true][aria-haspopup=true]){background-color:var(--ds-surface-hovered,#f0f1f2)}
-._1swvufnl:has([aria-expanded=true][aria-haspopup=true]){background-color:var(--ds-background-selected-hovered,#cfe1fd)}
 ._1ul91c9m{min-width:1ch}
 ._1ul9t9kd{min-width:72px}
 ._1yyu1j28{--notch-color:transparent}
@@ -63,12 +59,10 @@
 ._db80idpf{--actions-on-hover-padding:0}
 ._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}
 ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
 ._syaz6x5g{color:var(--ds-text-selected,#1868db)}
 ._syazazsu{color:var(--ds-text-subtle,#505258)}

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

@@ -108,10 +108,7 @@ const onTopOfButtonOrAnchorStyles = {
  * events through it (and applying the hover style when the popup is open). Exploring this has been
  * 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])';
+export const nestedOpenPopupCSSSelector = '&: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 _irr319i6 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
   rootT26Shape: "_2rko1qi0",
@@ -123,14 +120,7 @@ const containerStyles = {
   hasDescription: "_4t3i1wto",
   dragging: "_tzy41ou4"
 };
-const nestedOpenPopupStylesOld = {
-  root: "_qxq9kb7n _1rbv1wug _kwq51b66 _1swv19i6",
-  removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw",
-  selected: "_1swvufnl"
-};
-
-// Merge back into the `containerStyles` after cleanup
-const nestedOpenPopupStylesNew = {
+const nestedOpenPopupStyles = {
   root: "_1783kb7n _1d171wug _ligh1b66 _1fpr19i6",
   removeElemAfterOnHoverOrOpenNestedPopup: "_n3ixglyw",
   selected: "_1fprufnl"
@@ -307,7 +297,7 @@ const MenuItemBaseNoRef = ({
     ref: visualContentRef,
     "data-testid": testId ? `${testId}-container` : undefined,
     "data-selected": isSelected,
-    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])
+    className: ax([containerStyles.root, nestedOpenPopupStyles.root, fg('platform-dst-shape-theme-default') && containerStyles.rootT26Shape, isSelected && containerStyles.selected, isSelected && nestedOpenPopupStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, actionsOnHover && elemAfter && nestedOpenPopupStyles.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/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.compiled.css

@@ -4,13 +4,11 @@
 ._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)}
 ._1vnl1txw:hover{--expandable-chevron-display:flex}
 ._p8btglyw:hover{--expandable-provided-elembefore-display:none}

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

@@ -7,8 +7,7 @@ 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 { fg } from '@atlaskit/platform-feature-flags';
-import { MenuItemBase, nestedOpenPopupCSSSelector, nestedOpenPopupCSSSelectorNew } from '../menu-item';
+import { MenuItemBase, nestedOpenPopupCSSSelector } 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
@@ -16,14 +15,11 @@ var chevronDisplayCssVar = '--expandable-chevron-display';
 var providedElemBeforeDisplayCssVar = '--expandable-provided-elembefore-display';
 var wrapperStyles = {
   root: "_1mmi1txw _165nglyw",
-  showProvidedElemBefore: "_1mmiglyw _165n1bgi _v9u71txw _1hl9glyw _b31z1txw _1vnl1txw _12xsglyw _p8btglyw"
-};
-var nestedOpenPopupStylesOld = {
-  showProvidedElemBefore: "_v9u71txw _1hl9glyw"
+  showProvidedElemBefore: "_1mmiglyw _165n1bgi _1ddp1txw _pnu5glyw _b31z1txw _1vnl1txw _12xsglyw _p8btglyw"
 };
 
 // Merge back into the `wrapperStyles` after cleanup
-var nestedOpenPopupStylesNew = {
+var nestedOpenPopupStyles = {
   showProvidedElemBefore: "_1ddp1txw _pnu5glyw"
 };
 var iconStyles = {
@@ -127,7 +123,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, fg('platform_dst_nav4_flyout_menu_slots_close_button') ? nestedOpenPopupStylesNew.showProvidedElemBefore : nestedOpenPopupStylesOld.showProvidedElemBefore])
+    className: ax([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore, nestedOpenPopupStyles.showProvidedElemBefore])
   }, /*#__PURE__*/React.createElement(MenuItemBase, {
     id: id,
     actions: actions,

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

@@ -6,7 +6,6 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { PopupContent } from '@atlaskit/popup/experimental';
 import { OnCloseContext, SetIsOpenContext, TitleIdContextProvider } from './flyout-menu-item-context';
 /**
@@ -62,33 +61,31 @@ export var FlyoutMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwa
   // handleClose function, or passed in as a parameter in FlyoutMenuItemTrigger (outside-click),
   // or FlyoutHeader (close-button).
   var handleClose = useCallback(function (event, source) {
-    if (fg('platform_dst_nav4_flyout_menu_slots_close_button')) {
-      // Use the passed source if provided, otherwise determine from event
-      var determinedSource = source || 'other';
-      if (!source) {
-        if (event instanceof KeyboardEvent) {
-          var keyboardEvent = event;
-          if (keyboardEvent.key === 'Escape' || keyboardEvent.key === 'Esc') {
-            determinedSource = 'escape-key';
-          }
-        } else if (event instanceof MouseEvent) {
-          if (event && 'type' in event && event.type === 'click') {
-            determinedSource = 'outside-click';
-          }
+    // Use the passed source if provided, otherwise determine from event
+    var determinedSource = source || 'other';
+    if (!source) {
+      if (event instanceof KeyboardEvent) {
+        var keyboardEvent = event;
+        if (keyboardEvent.key === 'Escape' || keyboardEvent.key === 'Esc') {
+          determinedSource = 'escape-key';
         }
-      }
-
-      // When flyout menu is closed, fire analytics event
-      var navigationAnalyticsEvent = createAnalyticsEvent({
-        source: 'sideNav',
-        actionSubject: 'flyoutMenu',
-        action: 'closed',
-        attributes: {
-          closeSource: determinedSource
+      } else if (event instanceof MouseEvent) {
+        if (event && 'type' in event && event.type === 'click') {
+          determinedSource = 'outside-click';
         }
-      });
-      navigationAnalyticsEvent.fire('navigation');
+      }
     }
+
+    // When flyout menu is closed, fire analytics event
+    var navigationAnalyticsEvent = createAnalyticsEvent({
+      source: 'sideNav',
+      actionSubject: 'flyoutMenu',
+      action: 'closed',
+      attributes: {
+        closeSource: determinedSource
+      }
+    });
+    navigationAnalyticsEvent.fire('navigation');
     onClose === null || onClose === void 0 || onClose();
     setIsOpen(false);
   }, [setIsOpen, onClose, createAnalyticsEvent]);
@@ -125,8 +122,8 @@ export var FlyoutMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwa
     testId: containerTestId,
     xcss: flyoutMenuItemContentStyles.root,
     autoFocus: autoFocus,
-    role: fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined,
-    titleId: fg('platform_dst_nav4_flyout_menu_slots_close_button') ? titleId : undefined
+    role: "dialog",
+    titleId: titleId
     /**
      * Disabling GPU acceleration removes the use of `transform` by popper.js for this popup.
      *
@@ -147,13 +144,13 @@ export var FlyoutMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwa
     return /*#__PURE__*/React.createElement(UpdatePopperOnContentResize, {
       ref: forwardedRef,
       update: update
-    }, fg('platform_dst_nav4_flyout_menu_slots_close_button') ? /*#__PURE__*/React.createElement(TitleIdContextProvider, {
+    }, /*#__PURE__*/React.createElement(TitleIdContextProvider, {
       value: titleId
     }, /*#__PURE__*/React.createElement("div", {
       style: _defineProperty({}, maxHeightCssVar, computedMaxHeight),
       "data-testid": containerTestId ? "".concat(containerTestId, "--container") : undefined,
       className: ax([flyoutMenuItemContentContainerStyles.container])
-    }, children)) : children);
+    }, children)));
   });
 });
 function createResizeObserver(update) {

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

@@ -5,7 +5,6 @@ import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useCallback, useContext } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { PopupTrigger } from '@atlaskit/popup/experimental';
 import { MenuItemBase } from '../menu-item';
 import { IsOpenContext, OnCloseContext } from './flyout-menu-item-context';
@@ -32,12 +31,8 @@ export var FlyoutMenuItemTrigger = /*#__PURE__*/forwardRef(function (_ref, forwa
   var isOpen = useContext(IsOpenContext);
   var onCloseRef = useContext(OnCloseContext);
   var handleClick = useCallback(function (event, analyticsEvent) {
-    // If the flyout is open and the trigger is clicked, close the flyout and call the onClick
-    // handler with the source information set to 'outside-click'.
-    if (fg('platform_dst_nav4_flyout_menu_slots_close_button')) {
-      if (isOpen && onCloseRef.current) {
-        onCloseRef.current(event, 'outside-click');
-      }
+    if (isOpen && onCloseRef.current) {
+      onCloseRef.current(event, 'outside-click');
     }
     onClick === null || onClick === void 0 || onClick(event, analyticsEvent);
   }, [isOpen, onCloseRef, onClick]);

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

@@ -3,7 +3,6 @@ import React, { forwardRef, useEffect, useRef } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import useControlled from '@atlaskit/ds-lib/use-controlled';
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Popup } from '@atlaskit/popup/experimental';
 import { MenuListItem } from '../menu-list-item';
 import { IsOpenContext, OnCloseContext, SetIsOpenContext } from './flyout-menu-item-context';
@@ -58,14 +57,12 @@ export var FlyoutMenuItem = /*#__PURE__*/forwardRef(function (_ref, forwardedRef
 
     // When flyout menu is opened, fire analytics event
     if (isOpen && previousIsOpen === false) {
-      if (fg('platform_dst_nav4_flyout_menu_slots_close_button')) {
-        var navigationAnalyticsEvent = createAnalyticsEvent({
-          source: 'sideNav',
-          actionSubject: 'flyoutMenu',
-          action: 'opened'
-        });
-        navigationAnalyticsEvent.fire('navigation');
-      }
+      var navigationAnalyticsEvent = createAnalyticsEvent({
+        source: 'sideNav',
+        actionSubject: 'flyoutMenu',
+        action: 'opened'
+      });
+      navigationAnalyticsEvent.fire('navigation');
     }
     onOpenChange === null || onOpenChange === void 0 || onOpenChange(isOpen);
   }, [isOpen, onOpenChange, previousIsOpen, createAnalyticsEvent]);
@@ -80,6 +77,6 @@ export var FlyoutMenuItem = /*#__PURE__*/forwardRef(function (_ref, forwardedRef
   }, /*#__PURE__*/React.createElement(Popup, {
     id: id,
     isOpen: isOpen,
-    role: fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined
+    role: "dialog"
   }, children)))));
 });

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

@@ -22,7 +22,6 @@
 ._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)}
@@ -33,10 +32,7 @@
 ._1lmcu4vt{grid-template-areas:"elem-before interactive elem-after actions"}
 ._1o9zidpf{flex-shrink:0}
 ._1q511b66{padding-block-start:var(--ds-space-050,4px)}
-._1rbv1wug:has([aria-expanded=true][aria-haspopup=true]){--actions-on-hover-width:auto}
 ._1reo15vq{overflow-x:hidden}
-._1swv19i6:has([aria-expanded=true][aria-haspopup=true]){background-color:var(--ds-surface-hovered,#f0f1f2)}
-._1swvufnl:has([aria-expanded=true][aria-haspopup=true]){background-color:var(--ds-background-selected-hovered,#cfe1fd)}
 ._1ul91c9m{min-width:1ch}
 ._1ul9t9kd{min-width:72px}
 ._1yyu1j28{--notch-color:transparent}
@@ -63,12 +59,10 @@
 ._db80idpf{--actions-on-hover-padding:0}
 ._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}
 ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
 ._syaz6x5g{color:var(--ds-text-selected,#1868db)}
 ._syazazsu{color:var(--ds-text-subtle,#505258)}

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

@@ -111,10 +111,7 @@ var onTopOfButtonOrAnchorStyles = {
  * events through it (and applying the hover style when the popup is open). Exploring this has been
  * 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])';
+export var nestedOpenPopupCSSSelector = '&: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 _irr319i6 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
   rootT26Shape: "_2rko1qi0",
@@ -126,14 +123,7 @@ var containerStyles = {
   hasDescription: "_4t3i1wto",
   dragging: "_tzy41ou4"
 };
-var nestedOpenPopupStylesOld = {
-  root: "_qxq9kb7n _1rbv1wug _kwq51b66 _1swv19i6",
-  removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw",
-  selected: "_1swvufnl"
-};
-
-// Merge back into the `containerStyles` after cleanup
-var nestedOpenPopupStylesNew = {
+var nestedOpenPopupStyles = {
   root: "_1783kb7n _1d171wug _ligh1b66 _1fpr19i6",
   removeElemAfterOnHoverOrOpenNestedPopup: "_n3ixglyw",
   selected: "_1fprufnl"
@@ -308,7 +298,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_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])
+    className: ax([containerStyles.root, nestedOpenPopupStyles.root, fg('platform-dst-shape-theme-default') && containerStyles.rootT26Shape, isSelected && containerStyles.selected, isSelected && nestedOpenPopupStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, actionsOnHover && elemAfter && nestedOpenPopupStyles.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/types/ui/menu-item/menu-item.d.ts

@@ -18,8 +18,7 @@ import type { MenuItemAriaHasPopup, MenuItemLinkOrButtonCommonProps, MenuItemOnC
  * events through it (and applying the hover style when the popup is open). Exploring this has been
  * 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])";
+export declare const nestedOpenPopupCSSSelector = "&: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/ui/menu-item/menu-item.d.ts

@@ -18,8 +18,7 @@ import type { MenuItemAriaHasPopup, MenuItemLinkOrButtonCommonProps, MenuItemOnC
  * events through it (and applying the hover style when the popup is open). Exploring this has been
  * 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])";
+export declare const nestedOpenPopupCSSSelector = "&: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.13.8",
+	"version": "1.13.9",
 	"description": "Menu items and elements for the side nav area.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,7 +37,7 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.2.0",
-		"@atlaskit/avatar": "^25.14.0",
+		"@atlaskit/avatar": "^25.15.0",
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^7.0.0",
@@ -45,7 +45,7 @@
 		"@atlaskit/icon": "^35.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.5.0",
-		"@atlaskit/popup": "^4.19.0",
+		"@atlaskit/popup": "^4.20.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.8.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
@@ -69,12 +69,13 @@
 		"@atlaskit/navigation-system": "^9.4.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlassian/a11y-jest-testing": "^0.11.0",
-		"@atlassian/a11y-playwright-testing": "^0.9.0",
+		"@atlassian/a11y-playwright-testing": "^0.10.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/testing-library": "^0.6.0",
 		"@testing-library/react": "^16.3.0",
 		"bind-event-listener": "^3.0.0",
+		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
 	"techstack": {
@@ -115,9 +116,6 @@
 	"platform-feature-flags": {
 		"platform-dst-shape-theme-default": {
 			"type": "boolean"
-		},
-		"platform_dst_nav4_flyout_menu_slots_close_button": {
-			"type": "boolean"
 		}
 	}
 }