@atlaskit/navigation-system 5.2.0 → 5.3.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlassian/navigation-system
 
+## 5.3.0
+
+### Minor Changes
+
+- [`c8cb0a09979c1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c8cb0a09979c1) -
+  Adds instrumentation to the side navigation behind the `platform_dst_nav4_fhs_instrumentation_1`
+  feature gate.
+- [`c8cb0a09979c1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c8cb0a09979c1) -
+  Changes the `trigger` property in the side nav `onExpand` and `onCollapse` callbacks to be exposed
+  behind the `platform_dst_nav4_fhs_instrumentation_1` feature gate instead of the
+  `navx-full-height-sidebar` feature gate. The `platform_dst_nav4_fhs_instrumentation_1` feature
+  gate is intended to roll out sooner.
+- [`f942d05c8a8f2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f942d05c8a8f2) -
+  Adds support for selected state in ButtonMenuItem component (under feature gate
+  platform-dst-buttonmenuitem-selected-state-support)
+
 ## 5.2.0
 
 ### Minor Changes

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

@@ -6,15 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ButtonMenuItem = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _menuItem = require("./menu-item");
 var _menuListItem = require("./menu-list-item");
 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); }
-/**
- * We intentionally do not support the `isSelected` prop (which other menu item components
- * support) because `ButtonMenuItem`s do not correspond to a "page", so can't be navigated
- *  to and become in a selected state.
- */
-
 /**
  * __ButtonMenuItem__
  *
@@ -27,9 +22,13 @@ var ButtonMenuItem = exports.ButtonMenuItem = /*#__PURE__*/(0, _react.forwardRef
     description = _ref.description,
     elemAfter = _ref.elemAfter,
     isDisabled = _ref.isDisabled,
+    isSelected = _ref.isSelected,
     elemBefore = _ref.elemBefore,
     actionsOnHover = _ref.actionsOnHover,
     onClick = _ref.onClick,
+    ariaControls = _ref['aria-controls'],
+    ariaExpanded = _ref['aria-expanded'],
+    ariaHasPopup = _ref['aria-haspopup'],
     interactionName = _ref.interactionName,
     isContentTooltipDisabled = _ref.isContentTooltipDisabled,
     visualContentRef = _ref.visualContentRef,
@@ -52,6 +51,10 @@ var ButtonMenuItem = exports.ButtonMenuItem = /*#__PURE__*/(0, _react.forwardRef
     actions: isDisabled ? undefined : actions,
     actionsOnHover: isDisabled ? undefined : actionsOnHover,
     onClick: onClick,
+    ariaControls: (0, _platformFeatureFlags.fg)('platform-dst-buttonmenuitem-selected-state-support') ? ariaControls : undefined,
+    ariaExpanded: (0, _platformFeatureFlags.fg)('platform-dst-buttonmenuitem-selected-state-support') ? ariaExpanded : undefined,
+    ariaHasPopup: (0, _platformFeatureFlags.fg)('platform-dst-buttonmenuitem-selected-state-support') ? ariaHasPopup : undefined,
+    isSelected: (0, _platformFeatureFlags.fg)('platform-dst-buttonmenuitem-selected-state-support') ? isSelected : undefined,
     ref: forwardedRef,
     visualContentRef: visualContentRef,
     interactionName: interactionName,

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

@@ -57,6 +57,7 @@
 ._bfhk1o0g{background-color:var(--notch-color)}
 ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
 ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._bfhkn7od{background-color:unset}
 ._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
 ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
 ._db801b66{--actions-on-hover-padding:var(--ds-space-050,4px)}
@@ -96,6 +97,7 @@
 ._11om6b4r:hover{animation-name:k1xyysw3}
 ._1sjuglyw:hover{--elem-after-display:none}
 ._1uy01amc:hover{animation-delay:.8s}
+._30l31lh4:hover{color:var(--ds-text-disabled,#091e424f)}
 ._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
 ._7psyru3m:hover{animation-duration:0s}
 ._bir2q7pw:hover{animation-fill-mode:forwards}

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

@@ -154,7 +154,7 @@ var containerStyles = {
   showHoverActions: "_uomdkb7n _pmxp1wug _db801b66",
   removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
   selected: "_bfhkfg4m _syazaqb7 _1yyu1fvw _1swvi1yw _30l3aqb7 _irr3i1yw",
-  disabled: "_syaz1lh4 _irr3n7od",
+  disabled: "_syaz1lh4 _bfhkn7od _irr3n7od _30l31lh4",
   hasDescription: "_4t3i1wto",
   dragging: "_tzy41ou4"
 };

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

@@ -17,6 +17,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _bindEventListener = require("bind-event-listener");
 var _reactDom = require("react-dom");
+var _analyticsNext = require("@atlaskit/analytics-next");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
@@ -144,15 +145,43 @@ function SideNavInternal(_ref) {
   var _useState = (0, _react.useState)(defaultCollapsed),
     _useState2 = (0, _slicedToArray2.default)(_useState, 1),
     initialDefaultCollapsed = _useState2[0];
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var _useState3 = (0, _react.useState)(isExpandedOnDesktop),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
+    initialIsExpandedOnDesktop = _useState4[0];
+
+  /**
+   * Captures the initial collapsed/expanded state of the side nav.
+   *
+   * Only firing on desktop because the nav is never open by default on mobile.
+   */
+  (0, _react.useEffect)(function () {
+    if (initialIsExpandedOnDesktop && (0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_instrumentation_1')) {
+      var isDesktop = window.matchMedia('(min-width: 64rem)').matches;
+      if (isDesktop) {
+        var navigationAnalyticsEvent = createAnalyticsEvent({
+          source: 'topNav',
+          actionSubject: 'sideNav',
+          action: 'viewed',
+          actionSubjectId: 'sideNavMenu',
+          attributes: {
+            screen: 'desktop'
+          }
+        });
+        navigationAnalyticsEvent.fire('navigation');
+      }
+    }
+  }, [createAnalyticsEvent, initialIsExpandedOnDesktop]);
   var defaultWidth = (0, _useSafeDefaultWidth.useSafeDefaultWidth)({
     defaultWidthProp: defaultWidthProp,
     fallbackDefaultWidth: fallbackDefaultWidth,
     slotName: 'SideNav'
   });
-  var _useState3 = (0, _react.useState)(defaultWidth),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    width = _useState4[0],
-    setWidth = _useState4[1];
+  var _useState5 = (0, _react.useState)(defaultWidth),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    width = _useState6[0],
+    setWidth = _useState6[1];
   var clampedWidth = "clamp(".concat(widthResizeBounds.min, ", ").concat(width, "px, ").concat(widthResizeBounds.max, ")");
   var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
   var navRef = (0, _react.useRef)(null);
@@ -304,10 +333,29 @@ function SideNavInternal(_ref) {
   var toggleVisibilityByClickOutsideOnMobile = (0, _useToggleSideNav.useToggleSideNav)({
     trigger: 'click-outside-on-mobile'
   });
+  (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_default_collapsed_api')) {
+      // This is the old version of the hook, so we skip it when the flag is enabled
+      return;
+    }
+
+    // Sync the visibility in context (provided in `<Root>`) with the local `defaultCollapsed` prop provided to `SideNav`
+    // after SSR hydration. This should only run once, after the initial render on the client.
+    setSideNavState({
+      desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
+      mobile: 'collapsed',
+      flyout: 'closed',
+      lastTrigger: null
+    });
+  }, [initialDefaultCollapsed, setSideNavState]);
 
   // Moving to `useLayoutEffect` so that there's no visual shift in non-SSR environments when using legacy API
   // For SSR the new API is still necessary
   (0, _react.useLayoutEffect)(function () {
+    if (!(0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_default_collapsed_api')) {
+      // This is the new version of the hook, so we skip it when the flag is disabled
+      return;
+    }
     if (sideNavState !== null) {
       // Only need to do an initial sync if it hasn't been initialized from Root
       return;
@@ -325,11 +373,21 @@ function SideNavInternal(_ref) {
   var handleExpand = (0, _react.useCallback)(function (_ref2) {
     var screen = _ref2.screen,
       trigger = _ref2.trigger;
-    if ((0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+    if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_instrumentation_1')) {
       onExpand === null || onExpand === void 0 || onExpand({
         screen: screen,
         trigger: trigger
       });
+      var navigationAnalyticsEvent = createAnalyticsEvent({
+        source: 'topNav',
+        actionSubject: 'sideNav',
+        action: 'expanded',
+        actionSubjectId: 'sideNavMenu',
+        attributes: {
+          trigger: trigger
+        }
+      });
+      navigationAnalyticsEvent.fire('navigation');
     } else {
       onExpand === null || onExpand === void 0 || onExpand({
         screen: screen
@@ -339,15 +397,25 @@ function SideNavInternal(_ref) {
     // When the side nav gets expanded, we close the flyout to reset it.
     // This prevents the flyout from staying open and ensures we are respecting the user's intent to expand.
     updateFlyoutState('force-close');
-  }, [onExpand, updateFlyoutState]);
+  }, [onExpand, updateFlyoutState, createAnalyticsEvent]);
   var handleCollapse = (0, _react.useCallback)(function (_ref3) {
     var screen = _ref3.screen,
       trigger = _ref3.trigger;
-    if ((0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+    if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_instrumentation_1')) {
       onCollapse === null || onCollapse === void 0 || onCollapse({
         screen: screen,
         trigger: trigger
       });
+      var navigationAnalyticsEvent = createAnalyticsEvent({
+        source: 'topNav',
+        actionSubject: 'sideNav',
+        action: 'collapsed',
+        actionSubjectId: 'sideNavMenu',
+        attributes: {
+          trigger: trigger
+        }
+      });
+      navigationAnalyticsEvent.fire('navigation');
     } else {
       onCollapse === null || onCollapse === void 0 || onCollapse({
         screen: screen
@@ -357,7 +425,7 @@ function SideNavInternal(_ref) {
     // When the side nav gets collapsed, we close the flyout to reset it.
     // This prevents the flyout from staying open and ensures we are respecting the user's intent to collapse.
     updateFlyoutState('force-close');
-  }, [onCollapse, updateFlyoutState]);
+  }, [onCollapse, updateFlyoutState, createAnalyticsEvent]);
   (0, _useSideNavVisibilityCallbacks.useSideNavVisibilityCallbacks)({
     onExpand: handleExpand,
     onCollapse: handleCollapse,

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

@@ -13,6 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
+var _analyticsNext = require("@atlaskit/analytics-next");
 var _sidebarCollapse = _interopRequireDefault(require("@atlaskit/icon/core/sidebar-collapse"));
 var _sidebarExpand = _interopRequireDefault(require("@atlaskit/icon/core/sidebar-expand"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -57,7 +58,7 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
 
   // When default state is provided to `Root` the state in context will already be
   // initialized in SSR
-  var _useState = (0, _react.useState)(sideNavState === null ? !defaultCollapsed : isSideNavExpandedOnDesktop),
+  var _useState = (0, _react.useState)(sideNavState === null || !(0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_default_collapsed_api') ? !defaultCollapsed : isSideNavExpandedOnDesktop),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isSideNavExpanded = _useState2[0],
     setIsSideNavExpanded = _useState2[1];
@@ -105,12 +106,36 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
   var toggleVisibility = (0, _useToggleSideNav.useToggleSideNav)({
     trigger: 'toggle-button'
   });
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var handleClick = (0, _react.useCallback)(function (event, analyticsEvent) {
     onClick === null || onClick === void 0 || onClick(event, analyticsEvent, {
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-  }, [onClick, toggleVisibility, isSideNavExpanded]);
+  }, [onClick, isSideNavExpanded, toggleVisibility]);
+  var handlePointerEnter = (0, _react.useCallback)(function () {
+    if (!(0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_instrumentation_1')) {
+      return;
+    }
+
+    // Hovers don't do anything on mobile, so not capturing
+    var isDesktop = window.matchMedia('(min-width: 64rem)').matches;
+    if (!isDesktop) {
+      return;
+    }
+    var navigationAnalyticsEvent = createAnalyticsEvent({
+      source: 'topNav',
+      actionSubject: 'sideNav',
+      action: 'hovered',
+      actionSubjectId: 'sideNavButton',
+      attributes: {
+        itemState: isSideNavExpanded ? 'expanded' : 'collapsed',
+        screen: 'desktop'
+      }
+    });
+    navigationAnalyticsEvent.fire('navigation');
+  }, [createAnalyticsEvent, isSideNavExpanded]);
 
   /**
    * ## Behaviour
@@ -145,6 +170,7 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
     label: isSideNavExpanded ? collapseLabel : expandLabel,
     icon: icon,
     onClick: handleClick,
+    onPointerEnter: handlePointerEnter,
     testId: testId,
     isTooltipDisabled: false,
     interactionName: interactionName,

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

@@ -38,7 +38,7 @@ function useSideNavVisibilityCallbacks(_ref) {
       return;
     }
     if (isExpandedOnDesktop) {
-      if ((0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+      if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_instrumentation_1')) {
         var _onExpandRef$current;
         (_onExpandRef$current = onExpandRef.current) === null || _onExpandRef$current === void 0 || _onExpandRef$current.call(onExpandRef, {
           screen: 'desktop',
@@ -51,7 +51,7 @@ function useSideNavVisibilityCallbacks(_ref) {
         });
       }
     } else {
-      if ((0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+      if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_instrumentation_1')) {
         var _onCollapseRef$curren;
         (_onCollapseRef$curren = onCollapseRef.current) === null || _onCollapseRef$curren === void 0 || _onCollapseRef$curren.call(onCollapseRef, {
           screen: 'desktop',
@@ -78,7 +78,7 @@ function useSideNavVisibilityCallbacks(_ref) {
       return;
     }
     if (isExpandedOnMobile) {
-      if ((0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+      if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_instrumentation_1')) {
         var _onExpandRef$current3;
         (_onExpandRef$current3 = onExpandRef.current) === null || _onExpandRef$current3 === void 0 || _onExpandRef$current3.call(onExpandRef, {
           screen: 'mobile',
@@ -91,7 +91,7 @@ function useSideNavVisibilityCallbacks(_ref) {
         });
       }
     } else {
-      if ((0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+      if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_instrumentation_1')) {
         var _onCollapseRef$curren3;
         (_onCollapseRef$curren3 = onCollapseRef.current) === null || _onCollapseRef$curren3 === void 0 || _onCollapseRef$curren3.call(onCollapseRef, {
           screen: 'mobile',

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SideNavVisibilityProvider = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _visibilityContext = require("./visibility-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); }
 /**
@@ -16,7 +17,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var SideNavVisibilityProvider = exports.SideNavVisibilityProvider = function SideNavVisibilityProvider(_ref) {
   var children = _ref.children,
     defaultCollapsed = _ref.defaultCollapsed;
-  var initialState = typeof defaultCollapsed === 'boolean' ? {
+  var initialState = typeof defaultCollapsed === 'boolean' && (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_default_collapsed_api') ? {
     desktop: defaultCollapsed ? 'collapsed' : 'expanded',
     mobile: 'collapsed',
     flyout: 'closed',

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

@@ -1,13 +1,7 @@
 import React, { forwardRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { MenuItemBase } from './menu-item';
 import { MenuListItem } from './menu-list-item';
-
-/**
- * We intentionally do not support the `isSelected` prop (which other menu item components
- * support) because `ButtonMenuItem`s do not correspond to a "page", so can't be navigated
- *  to and become in a selected state.
- */
-
 /**
  * __ButtonMenuItem__
  *
@@ -20,9 +14,13 @@ export const ButtonMenuItem = /*#__PURE__*/forwardRef(({
   description,
   elemAfter,
   isDisabled,
+  isSelected,
   elemBefore,
   actionsOnHover,
   onClick,
+  'aria-controls': ariaControls,
+  'aria-expanded': ariaExpanded,
+  'aria-haspopup': ariaHasPopup,
   interactionName,
   isContentTooltipDisabled,
   visualContentRef,
@@ -30,26 +28,32 @@ export const ButtonMenuItem = /*#__PURE__*/forwardRef(({
   isDragging,
   hasDragIndicator,
   dropIndicator
-}, forwardedRef) => /*#__PURE__*/React.createElement(MenuListItem, {
-  ref: listItemRef
-}, /*#__PURE__*/React.createElement(MenuItemBase, {
-  testId: testId,
-  description: description,
-  elemAfter: elemAfter,
-  elemBefore: elemBefore,
-  isDisabled: isDisabled
-  /**
-   * Not passing `actions` and `actionsOnHover` to MenuItemBase when `isDisabled`,
-   * so they aren't rendered in the disabled state.
-   */,
-  actions: isDisabled ? undefined : actions,
-  actionsOnHover: isDisabled ? undefined : actionsOnHover,
-  onClick: onClick,
-  ref: forwardedRef,
-  visualContentRef: visualContentRef,
-  interactionName: interactionName,
-  isContentTooltipDisabled: isContentTooltipDisabled,
-  isDragging: isDragging,
-  hasDragIndicator: hasDragIndicator,
-  dropIndicator: dropIndicator
-}, children)));
+}, forwardedRef) => {
+  return /*#__PURE__*/React.createElement(MenuListItem, {
+    ref: listItemRef
+  }, /*#__PURE__*/React.createElement(MenuItemBase, {
+    testId: testId,
+    description: description,
+    elemAfter: elemAfter,
+    elemBefore: elemBefore,
+    isDisabled: isDisabled
+    /**
+     * Not passing `actions` and `actionsOnHover` to MenuItemBase when `isDisabled`,
+     * so they aren't rendered in the disabled state.
+     */,
+    actions: isDisabled ? undefined : actions,
+    actionsOnHover: isDisabled ? undefined : actionsOnHover,
+    onClick: onClick,
+    ariaControls: fg('platform-dst-buttonmenuitem-selected-state-support') ? ariaControls : undefined,
+    ariaExpanded: fg('platform-dst-buttonmenuitem-selected-state-support') ? ariaExpanded : undefined,
+    ariaHasPopup: fg('platform-dst-buttonmenuitem-selected-state-support') ? ariaHasPopup : undefined,
+    isSelected: fg('platform-dst-buttonmenuitem-selected-state-support') ? isSelected : undefined,
+    ref: forwardedRef,
+    visualContentRef: visualContentRef,
+    interactionName: interactionName,
+    isContentTooltipDisabled: isContentTooltipDisabled,
+    isDragging: isDragging,
+    hasDragIndicator: hasDragIndicator,
+    dropIndicator: dropIndicator
+  }, children));
+});

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

@@ -57,6 +57,7 @@
 ._bfhk1o0g{background-color:var(--notch-color)}
 ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
 ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._bfhkn7od{background-color:unset}
 ._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
 ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
 ._db801b66{--actions-on-hover-padding:var(--ds-space-050,4px)}
@@ -96,6 +97,7 @@
 ._11om6b4r:hover{animation-name:k1xyysw3}
 ._1sjuglyw:hover{--elem-after-display:none}
 ._1uy01amc:hover{animation-delay:.8s}
+._30l31lh4:hover{color:var(--ds-text-disabled,#091e424f)}
 ._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
 ._7psyru3m:hover{animation-duration:0s}
 ._bir2q7pw:hover{animation-fill-mode:forwards}

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

@@ -137,7 +137,7 @@ const containerStyles = {
   showHoverActions: "_uomdkb7n _pmxp1wug _db801b66",
   removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
   selected: "_bfhkfg4m _syazaqb7 _1yyu1fvw _1swvi1yw _30l3aqb7 _irr3i1yw",
-  disabled: "_syaz1lh4 _irr3n7od",
+  disabled: "_syaz1lh4 _bfhkn7od _irr3n7od _30l31lh4",
   hasDescription: "_4t3i1wto",
   dragging: "_tzy41ou4"
 };

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

@@ -6,6 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { flushSync } from 'react-dom';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { OpenLayerObserverNamespaceProvider, useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
@@ -127,6 +128,33 @@ function SideNavInternal({
   // This is so we can use it in an effect _that only runs once_, after the initial render on the client,
   // to sync the side nav context (provided in `<Root>`) with the `defaultCollapsed` prop provided to `<SideNav>`.
   const [initialDefaultCollapsed] = useState(defaultCollapsed);
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  const [initialIsExpandedOnDesktop] = useState(isExpandedOnDesktop);
+
+  /**
+   * Captures the initial collapsed/expanded state of the side nav.
+   *
+   * Only firing on desktop because the nav is never open by default on mobile.
+   */
+  useEffect(() => {
+    if (initialIsExpandedOnDesktop && fg('platform_dst_nav4_fhs_instrumentation_1')) {
+      const isDesktop = window.matchMedia('(min-width: 64rem)').matches;
+      if (isDesktop) {
+        const navigationAnalyticsEvent = createAnalyticsEvent({
+          source: 'topNav',
+          actionSubject: 'sideNav',
+          action: 'viewed',
+          actionSubjectId: 'sideNavMenu',
+          attributes: {
+            screen: 'desktop'
+          }
+        });
+        navigationAnalyticsEvent.fire('navigation');
+      }
+    }
+  }, [createAnalyticsEvent, initialIsExpandedOnDesktop]);
   const defaultWidth = useSafeDefaultWidth({
     defaultWidthProp,
     fallbackDefaultWidth,
@@ -286,10 +314,29 @@ function SideNavInternal({
   const toggleVisibilityByClickOutsideOnMobile = useToggleSideNav({
     trigger: 'click-outside-on-mobile'
   });
+  useEffect(() => {
+    if (fg('platform_dst_nav4_side_nav_default_collapsed_api')) {
+      // This is the old version of the hook, so we skip it when the flag is enabled
+      return;
+    }
+
+    // Sync the visibility in context (provided in `<Root>`) with the local `defaultCollapsed` prop provided to `SideNav`
+    // after SSR hydration. This should only run once, after the initial render on the client.
+    setSideNavState({
+      desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
+      mobile: 'collapsed',
+      flyout: 'closed',
+      lastTrigger: null
+    });
+  }, [initialDefaultCollapsed, setSideNavState]);
 
   // Moving to `useLayoutEffect` so that there's no visual shift in non-SSR environments when using legacy API
   // For SSR the new API is still necessary
   useLayoutEffect(() => {
+    if (!fg('platform_dst_nav4_side_nav_default_collapsed_api')) {
+      // This is the new version of the hook, so we skip it when the flag is disabled
+      return;
+    }
     if (sideNavState !== null) {
       // Only need to do an initial sync if it hasn't been initialized from Root
       return;
@@ -308,11 +355,21 @@ function SideNavInternal({
     screen,
     trigger
   }) => {
-    if (fg('navx-full-height-sidebar')) {
+    if (fg('platform_dst_nav4_fhs_instrumentation_1')) {
       onExpand === null || onExpand === void 0 ? void 0 : onExpand({
         screen,
         trigger
       });
+      const navigationAnalyticsEvent = createAnalyticsEvent({
+        source: 'topNav',
+        actionSubject: 'sideNav',
+        action: 'expanded',
+        actionSubjectId: 'sideNavMenu',
+        attributes: {
+          trigger
+        }
+      });
+      navigationAnalyticsEvent.fire('navigation');
     } else {
       onExpand === null || onExpand === void 0 ? void 0 : onExpand({
         screen
@@ -322,16 +379,26 @@ function SideNavInternal({
     // When the side nav gets expanded, we close the flyout to reset it.
     // This prevents the flyout from staying open and ensures we are respecting the user's intent to expand.
     updateFlyoutState('force-close');
-  }, [onExpand, updateFlyoutState]);
+  }, [onExpand, updateFlyoutState, createAnalyticsEvent]);
   const handleCollapse = useCallback(({
     screen,
     trigger
   }) => {
-    if (fg('navx-full-height-sidebar')) {
+    if (fg('platform_dst_nav4_fhs_instrumentation_1')) {
       onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse({
         screen,
         trigger
       });
+      const navigationAnalyticsEvent = createAnalyticsEvent({
+        source: 'topNav',
+        actionSubject: 'sideNav',
+        action: 'collapsed',
+        actionSubjectId: 'sideNavMenu',
+        attributes: {
+          trigger
+        }
+      });
+      navigationAnalyticsEvent.fire('navigation');
     } else {
       onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse({
         screen
@@ -341,7 +408,7 @@ function SideNavInternal({
     // When the side nav gets collapsed, we close the flyout to reset it.
     // This prevents the flyout from staying open and ensures we are respecting the user's intent to collapse.
     updateFlyoutState('force-close');
-  }, [onCollapse, updateFlyoutState]);
+  }, [onCollapse, updateFlyoutState, createAnalyticsEvent]);
   useSideNavVisibilityCallbacks({
     onExpand: handleExpand,
     onCollapse: handleCollapse,

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

@@ -3,6 +3,7 @@ import "./toggle-button.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -45,7 +46,7 @@ export const SideNavToggleButton = ({
 
   // When default state is provided to `Root` the state in context will already be
   // initialized in SSR
-  const [isSideNavExpanded, setIsSideNavExpanded] = useState(sideNavState === null ? !defaultCollapsed : isSideNavExpandedOnDesktop);
+  const [isSideNavExpanded, setIsSideNavExpanded] = useState(sideNavState === null || !fg('platform_dst_nav4_side_nav_default_collapsed_api') ? !defaultCollapsed : isSideNavExpandedOnDesktop);
   const ref = useContext(SideNavToggleButtonAttachRef);
   const elementRef = useRef(null);
 
@@ -88,12 +89,37 @@ export const SideNavToggleButton = ({
   const toggleVisibility = useToggleSideNav({
     trigger: 'toggle-button'
   });
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
   const handleClick = useCallback((event, analyticsEvent) => {
     onClick === null || onClick === void 0 ? void 0 : onClick(event, analyticsEvent, {
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-  }, [onClick, toggleVisibility, isSideNavExpanded]);
+  }, [onClick, isSideNavExpanded, toggleVisibility]);
+  const handlePointerEnter = useCallback(() => {
+    if (!fg('platform_dst_nav4_fhs_instrumentation_1')) {
+      return;
+    }
+
+    // Hovers don't do anything on mobile, so not capturing
+    const isDesktop = window.matchMedia('(min-width: 64rem)').matches;
+    if (!isDesktop) {
+      return;
+    }
+    const navigationAnalyticsEvent = createAnalyticsEvent({
+      source: 'topNav',
+      actionSubject: 'sideNav',
+      action: 'hovered',
+      actionSubjectId: 'sideNavButton',
+      attributes: {
+        itemState: isSideNavExpanded ? 'expanded' : 'collapsed',
+        screen: 'desktop'
+      }
+    });
+    navigationAnalyticsEvent.fire('navigation');
+  }, [createAnalyticsEvent, isSideNavExpanded]);
 
   /**
    * ## Behaviour
@@ -127,6 +153,7 @@ export const SideNavToggleButton = ({
     label: isSideNavExpanded ? collapseLabel : expandLabel,
     icon: icon,
     onClick: handleClick,
+    onPointerEnter: handlePointerEnter,
     testId: testId,
     isTooltipDisabled: false,
     interactionName: interactionName,

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

@@ -32,7 +32,7 @@ export function useSideNavVisibilityCallbacks({
       return;
     }
     if (isExpandedOnDesktop) {
-      if (fg('navx-full-height-sidebar')) {
+      if (fg('platform_dst_nav4_fhs_instrumentation_1')) {
         var _onExpandRef$current;
         (_onExpandRef$current = onExpandRef.current) === null || _onExpandRef$current === void 0 ? void 0 : _onExpandRef$current.call(onExpandRef, {
           screen: 'desktop',
@@ -45,7 +45,7 @@ export function useSideNavVisibilityCallbacks({
         });
       }
     } else {
-      if (fg('navx-full-height-sidebar')) {
+      if (fg('platform_dst_nav4_fhs_instrumentation_1')) {
         var _onCollapseRef$curren;
         (_onCollapseRef$curren = onCollapseRef.current) === null || _onCollapseRef$curren === void 0 ? void 0 : _onCollapseRef$curren.call(onCollapseRef, {
           screen: 'desktop',
@@ -72,7 +72,7 @@ export function useSideNavVisibilityCallbacks({
       return;
     }
     if (isExpandedOnMobile) {
-      if (fg('navx-full-height-sidebar')) {
+      if (fg('platform_dst_nav4_fhs_instrumentation_1')) {
         var _onExpandRef$current3;
         (_onExpandRef$current3 = onExpandRef.current) === null || _onExpandRef$current3 === void 0 ? void 0 : _onExpandRef$current3.call(onExpandRef, {
           screen: 'mobile',
@@ -85,7 +85,7 @@ export function useSideNavVisibilityCallbacks({
         });
       }
     } else {
-      if (fg('navx-full-height-sidebar')) {
+      if (fg('platform_dst_nav4_fhs_instrumentation_1')) {
         var _onCollapseRef$curren3;
         (_onCollapseRef$curren3 = onCollapseRef.current) === null || _onCollapseRef$curren3 === void 0 ? void 0 : _onCollapseRef$curren3.call(onCollapseRef, {
           screen: 'mobile',

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

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SetSideNavVisibilityState, SideNavVisibilityState } from './visibility-context';
 
 /**
@@ -8,7 +9,7 @@ export const SideNavVisibilityProvider = ({
   children,
   defaultCollapsed
 }) => {
-  const initialState = typeof defaultCollapsed === 'boolean' ? {
+  const initialState = typeof defaultCollapsed === 'boolean' && fg('platform_dst_nav4_side_nav_default_collapsed_api') ? {
     desktop: defaultCollapsed ? 'collapsed' : 'expanded',
     mobile: 'collapsed',
     flyout: 'closed',

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

@@ -1,13 +1,7 @@
 import React, { forwardRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { MenuItemBase } from './menu-item';
 import { MenuListItem } from './menu-list-item';
-
-/**
- * We intentionally do not support the `isSelected` prop (which other menu item components
- * support) because `ButtonMenuItem`s do not correspond to a "page", so can't be navigated
- *  to and become in a selected state.
- */
-
 /**
  * __ButtonMenuItem__
  *
@@ -20,9 +14,13 @@ export var ButtonMenuItem = /*#__PURE__*/forwardRef(function (_ref, forwardedRef
     description = _ref.description,
     elemAfter = _ref.elemAfter,
     isDisabled = _ref.isDisabled,
+    isSelected = _ref.isSelected,
     elemBefore = _ref.elemBefore,
     actionsOnHover = _ref.actionsOnHover,
     onClick = _ref.onClick,
+    ariaControls = _ref['aria-controls'],
+    ariaExpanded = _ref['aria-expanded'],
+    ariaHasPopup = _ref['aria-haspopup'],
     interactionName = _ref.interactionName,
     isContentTooltipDisabled = _ref.isContentTooltipDisabled,
     visualContentRef = _ref.visualContentRef,
@@ -45,6 +43,10 @@ export var ButtonMenuItem = /*#__PURE__*/forwardRef(function (_ref, forwardedRef
     actions: isDisabled ? undefined : actions,
     actionsOnHover: isDisabled ? undefined : actionsOnHover,
     onClick: onClick,
+    ariaControls: fg('platform-dst-buttonmenuitem-selected-state-support') ? ariaControls : undefined,
+    ariaExpanded: fg('platform-dst-buttonmenuitem-selected-state-support') ? ariaExpanded : undefined,
+    ariaHasPopup: fg('platform-dst-buttonmenuitem-selected-state-support') ? ariaHasPopup : undefined,
+    isSelected: fg('platform-dst-buttonmenuitem-selected-state-support') ? isSelected : undefined,
     ref: forwardedRef,
     visualContentRef: visualContentRef,
     interactionName: interactionName,

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

@@ -57,6 +57,7 @@
 ._bfhk1o0g{background-color:var(--notch-color)}
 ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
 ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._bfhkn7od{background-color:unset}
 ._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
 ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
 ._db801b66{--actions-on-hover-padding:var(--ds-space-050,4px)}
@@ -96,6 +97,7 @@
 ._11om6b4r:hover{animation-name:k1xyysw3}
 ._1sjuglyw:hover{--elem-after-display:none}
 ._1uy01amc:hover{animation-delay:.8s}
+._30l31lh4:hover{color:var(--ds-text-disabled,#091e424f)}
 ._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
 ._7psyru3m:hover{animation-duration:0s}
 ._bir2q7pw:hover{animation-fill-mode:forwards}

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

@@ -143,7 +143,7 @@ var containerStyles = {
   showHoverActions: "_uomdkb7n _pmxp1wug _db801b66",
   removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
   selected: "_bfhkfg4m _syazaqb7 _1yyu1fvw _1swvi1yw _30l3aqb7 _irr3i1yw",
-  disabled: "_syaz1lh4 _irr3n7od",
+  disabled: "_syaz1lh4 _bfhkn7od _irr3n7od _30l31lh4",
   hasDescription: "_4t3i1wto",
   dragging: "_tzy41ou4"
 };

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

@@ -10,6 +10,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { flushSync } from 'react-dom';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { OpenLayerObserverNamespaceProvider, useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
@@ -134,15 +135,43 @@ function SideNavInternal(_ref) {
   var _useState = useState(defaultCollapsed),
     _useState2 = _slicedToArray(_useState, 1),
     initialDefaultCollapsed = _useState2[0];
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var _useState3 = useState(isExpandedOnDesktop),
+    _useState4 = _slicedToArray(_useState3, 1),
+    initialIsExpandedOnDesktop = _useState4[0];
+
+  /**
+   * Captures the initial collapsed/expanded state of the side nav.
+   *
+   * Only firing on desktop because the nav is never open by default on mobile.
+   */
+  useEffect(function () {
+    if (initialIsExpandedOnDesktop && fg('platform_dst_nav4_fhs_instrumentation_1')) {
+      var isDesktop = window.matchMedia('(min-width: 64rem)').matches;
+      if (isDesktop) {
+        var navigationAnalyticsEvent = createAnalyticsEvent({
+          source: 'topNav',
+          actionSubject: 'sideNav',
+          action: 'viewed',
+          actionSubjectId: 'sideNavMenu',
+          attributes: {
+            screen: 'desktop'
+          }
+        });
+        navigationAnalyticsEvent.fire('navigation');
+      }
+    }
+  }, [createAnalyticsEvent, initialIsExpandedOnDesktop]);
   var defaultWidth = useSafeDefaultWidth({
     defaultWidthProp: defaultWidthProp,
     fallbackDefaultWidth: fallbackDefaultWidth,
     slotName: 'SideNav'
   });
-  var _useState3 = useState(defaultWidth),
-    _useState4 = _slicedToArray(_useState3, 2),
-    width = _useState4[0],
-    setWidth = _useState4[1];
+  var _useState5 = useState(defaultWidth),
+    _useState6 = _slicedToArray(_useState5, 2),
+    width = _useState6[0],
+    setWidth = _useState6[1];
   var clampedWidth = "clamp(".concat(widthResizeBounds.min, ", ").concat(width, "px, ").concat(widthResizeBounds.max, ")");
   var dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
   var navRef = useRef(null);
@@ -294,10 +323,29 @@ function SideNavInternal(_ref) {
   var toggleVisibilityByClickOutsideOnMobile = useToggleSideNav({
     trigger: 'click-outside-on-mobile'
   });
+  useEffect(function () {
+    if (fg('platform_dst_nav4_side_nav_default_collapsed_api')) {
+      // This is the old version of the hook, so we skip it when the flag is enabled
+      return;
+    }
+
+    // Sync the visibility in context (provided in `<Root>`) with the local `defaultCollapsed` prop provided to `SideNav`
+    // after SSR hydration. This should only run once, after the initial render on the client.
+    setSideNavState({
+      desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
+      mobile: 'collapsed',
+      flyout: 'closed',
+      lastTrigger: null
+    });
+  }, [initialDefaultCollapsed, setSideNavState]);
 
   // Moving to `useLayoutEffect` so that there's no visual shift in non-SSR environments when using legacy API
   // For SSR the new API is still necessary
   useLayoutEffect(function () {
+    if (!fg('platform_dst_nav4_side_nav_default_collapsed_api')) {
+      // This is the new version of the hook, so we skip it when the flag is disabled
+      return;
+    }
     if (sideNavState !== null) {
       // Only need to do an initial sync if it hasn't been initialized from Root
       return;
@@ -315,11 +363,21 @@ function SideNavInternal(_ref) {
   var handleExpand = useCallback(function (_ref2) {
     var screen = _ref2.screen,
       trigger = _ref2.trigger;
-    if (fg('navx-full-height-sidebar')) {
+    if (fg('platform_dst_nav4_fhs_instrumentation_1')) {
       onExpand === null || onExpand === void 0 || onExpand({
         screen: screen,
         trigger: trigger
       });
+      var navigationAnalyticsEvent = createAnalyticsEvent({
+        source: 'topNav',
+        actionSubject: 'sideNav',
+        action: 'expanded',
+        actionSubjectId: 'sideNavMenu',
+        attributes: {
+          trigger: trigger
+        }
+      });
+      navigationAnalyticsEvent.fire('navigation');
     } else {
       onExpand === null || onExpand === void 0 || onExpand({
         screen: screen
@@ -329,15 +387,25 @@ function SideNavInternal(_ref) {
     // When the side nav gets expanded, we close the flyout to reset it.
     // This prevents the flyout from staying open and ensures we are respecting the user's intent to expand.
     updateFlyoutState('force-close');
-  }, [onExpand, updateFlyoutState]);
+  }, [onExpand, updateFlyoutState, createAnalyticsEvent]);
   var handleCollapse = useCallback(function (_ref3) {
     var screen = _ref3.screen,
       trigger = _ref3.trigger;
-    if (fg('navx-full-height-sidebar')) {
+    if (fg('platform_dst_nav4_fhs_instrumentation_1')) {
       onCollapse === null || onCollapse === void 0 || onCollapse({
         screen: screen,
         trigger: trigger
       });
+      var navigationAnalyticsEvent = createAnalyticsEvent({
+        source: 'topNav',
+        actionSubject: 'sideNav',
+        action: 'collapsed',
+        actionSubjectId: 'sideNavMenu',
+        attributes: {
+          trigger: trigger
+        }
+      });
+      navigationAnalyticsEvent.fire('navigation');
     } else {
       onCollapse === null || onCollapse === void 0 || onCollapse({
         screen: screen
@@ -347,7 +415,7 @@ function SideNavInternal(_ref) {
     // When the side nav gets collapsed, we close the flyout to reset it.
     // This prevents the flyout from staying open and ensures we are respecting the user's intent to collapse.
     updateFlyoutState('force-close');
-  }, [onCollapse, updateFlyoutState]);
+  }, [onCollapse, updateFlyoutState, createAnalyticsEvent]);
   useSideNavVisibilityCallbacks({
     onExpand: handleExpand,
     onCollapse: handleCollapse,

package/dist/esm/ui/page-layout/side-nav/toggle-button.js

@@ -7,6 +7,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -48,7 +49,7 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
 
   // When default state is provided to `Root` the state in context will already be
   // initialized in SSR
-  var _useState = useState(sideNavState === null ? !defaultCollapsed : isSideNavExpandedOnDesktop),
+  var _useState = useState(sideNavState === null || !fg('platform_dst_nav4_side_nav_default_collapsed_api') ? !defaultCollapsed : isSideNavExpandedOnDesktop),
     _useState2 = _slicedToArray(_useState, 2),
     isSideNavExpanded = _useState2[0],
     setIsSideNavExpanded = _useState2[1];
@@ -96,12 +97,36 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
   var toggleVisibility = useToggleSideNav({
     trigger: 'toggle-button'
   });
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var handleClick = useCallback(function (event, analyticsEvent) {
     onClick === null || onClick === void 0 || onClick(event, analyticsEvent, {
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-  }, [onClick, toggleVisibility, isSideNavExpanded]);
+  }, [onClick, isSideNavExpanded, toggleVisibility]);
+  var handlePointerEnter = useCallback(function () {
+    if (!fg('platform_dst_nav4_fhs_instrumentation_1')) {
+      return;
+    }
+
+    // Hovers don't do anything on mobile, so not capturing
+    var isDesktop = window.matchMedia('(min-width: 64rem)').matches;
+    if (!isDesktop) {
+      return;
+    }
+    var navigationAnalyticsEvent = createAnalyticsEvent({
+      source: 'topNav',
+      actionSubject: 'sideNav',
+      action: 'hovered',
+      actionSubjectId: 'sideNavButton',
+      attributes: {
+        itemState: isSideNavExpanded ? 'expanded' : 'collapsed',
+        screen: 'desktop'
+      }
+    });
+    navigationAnalyticsEvent.fire('navigation');
+  }, [createAnalyticsEvent, isSideNavExpanded]);
 
   /**
    * ## Behaviour
@@ -136,6 +161,7 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
     label: isSideNavExpanded ? collapseLabel : expandLabel,
     icon: icon,
     onClick: handleClick,
+    onPointerEnter: handlePointerEnter,
     testId: testId,
     isTooltipDisabled: false,
     interactionName: interactionName,

package/dist/esm/ui/page-layout/side-nav/use-side-nav-visibility-callbacks.js

@@ -31,7 +31,7 @@ export function useSideNavVisibilityCallbacks(_ref) {
       return;
     }
     if (isExpandedOnDesktop) {
-      if (fg('navx-full-height-sidebar')) {
+      if (fg('platform_dst_nav4_fhs_instrumentation_1')) {
         var _onExpandRef$current;
         (_onExpandRef$current = onExpandRef.current) === null || _onExpandRef$current === void 0 || _onExpandRef$current.call(onExpandRef, {
           screen: 'desktop',
@@ -44,7 +44,7 @@ export function useSideNavVisibilityCallbacks(_ref) {
         });
       }
     } else {
-      if (fg('navx-full-height-sidebar')) {
+      if (fg('platform_dst_nav4_fhs_instrumentation_1')) {
         var _onCollapseRef$curren;
         (_onCollapseRef$curren = onCollapseRef.current) === null || _onCollapseRef$curren === void 0 || _onCollapseRef$curren.call(onCollapseRef, {
           screen: 'desktop',
@@ -71,7 +71,7 @@ export function useSideNavVisibilityCallbacks(_ref) {
       return;
     }
     if (isExpandedOnMobile) {
-      if (fg('navx-full-height-sidebar')) {
+      if (fg('platform_dst_nav4_fhs_instrumentation_1')) {
         var _onExpandRef$current3;
         (_onExpandRef$current3 = onExpandRef.current) === null || _onExpandRef$current3 === void 0 || _onExpandRef$current3.call(onExpandRef, {
           screen: 'mobile',
@@ -84,7 +84,7 @@ export function useSideNavVisibilityCallbacks(_ref) {
         });
       }
     } else {
-      if (fg('navx-full-height-sidebar')) {
+      if (fg('platform_dst_nav4_fhs_instrumentation_1')) {
         var _onCollapseRef$curren3;
         (_onCollapseRef$curren3 = onCollapseRef.current) === null || _onCollapseRef$curren3 === void 0 || _onCollapseRef$curren3.call(onCollapseRef, {
           screen: 'mobile',

package/dist/esm/ui/page-layout/side-nav/visibility-provider.js

@@ -1,5 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SetSideNavVisibilityState, SideNavVisibilityState } from './visibility-context';
 
 /**
@@ -8,7 +9,7 @@ import { SetSideNavVisibilityState, SideNavVisibilityState } from './visibility-
 export var SideNavVisibilityProvider = function SideNavVisibilityProvider(_ref) {
   var children = _ref.children,
     defaultCollapsed = _ref.defaultCollapsed;
-  var initialState = typeof defaultCollapsed === 'boolean' ? {
+  var initialState = typeof defaultCollapsed === 'boolean' && fg('platform_dst_nav4_side_nav_default_collapsed_api') ? {
     desktop: defaultCollapsed ? 'collapsed' : 'expanded',
     mobile: 'collapsed',
     flyout: 'closed',

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

@@ -1,10 +1,5 @@
 import React from 'react';
 import type { MenuItemLinkOrButtonCommonProps, MenuItemOnClick } from './types';
-/**
- * We intentionally do not support the `isSelected` prop (which other menu item components
- * support) because `ButtonMenuItem`s do not correspond to a "page", so can't be navigated
- *  to and become in a selected state.
- */
 export type ButtonMenuItemProps = MenuItemLinkOrButtonCommonProps & {
     /**
      * We are not using a discriminated union to enforce that the `actions` and `actionsOnHover`
@@ -24,6 +19,20 @@ export type ButtonMenuItemProps = MenuItemLinkOrButtonCommonProps & {
      * Called when the user has clicked on the trigger content.
      */
     onClick?: MenuItemOnClick<HTMLButtonElement>;
+    /**
+     * Identifies the popup element that this element controls when it is used as a popup trigger.
+     * Should match the `id` of the popup content for screen readers to understand the relationship.
+     */
+    'aria-controls'?: string;
+    /**
+     * Announces to assistive technology whether the popup is currently open or closed,
+     * when this element is used as a popup trigger.
+     */
+    'aria-expanded'?: boolean;
+    /**
+     * Informs assistive technology that this element triggers a popup.
+     */
+    'aria-haspopup'?: boolean | 'dialog';
 };
 /**
  * __ButtonMenuItem__

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

@@ -34,10 +34,6 @@ export type ExpandableMenuItemTriggerProps = MenuItemCommonProps & Omit<MenuItem
      * will always be displayed.
      */
     elemBefore?: ReactNode;
-    /**
-     * Indicates that the menu item is selected.
-     */
-    isSelected?: boolean;
     /**
      * If provided, the chevron icon (expand/collapse symbol) will be rendered within a separate
      * icon button element. Clicking on this icon button will not trigger the `onClick` event. It

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

@@ -37,10 +37,6 @@ export type FlyoutMenuItemTriggerProps = MenuItemCommonProps & {
      * If you are controlling the open state of the flyout menu, use this to update your state.
      */
     onClick?: MenuItemOnClick<HTMLButtonElement>;
-    /**
-     * Indicates that the menu item is selected.
-     */
-    isSelected?: boolean;
 };
 /**
  * __FlyoutMenuItemTrigger__

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

@@ -34,7 +34,6 @@ type MenuItemBaseProps<T extends HTMLAnchorElement | HTMLButtonElement> = MenuIt
     href?: string | Record<string, any>;
     target?: HTMLAnchorElement['target'];
     isDisabled?: boolean;
-    isSelected?: boolean;
     ariaControls?: string;
     ariaExpanded?: boolean;
     ariaHasPopup?: boolean | 'dialog';

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

@@ -33,6 +33,10 @@ export type MenuItemCommonProps = {
      * to display the full menu content and description of a menu item close by (eg with another popup)
      */
     isContentTooltipDisabled?: boolean;
+    /**
+     * Indicates that the menu item is selected.
+     */
+    isSelected?: boolean;
     /**
      * Exposes the visually complete menu item, including:
      *

package/dist/types/ui/page-layout/side-nav/side-nav.d.ts

@@ -44,13 +44,13 @@ type SideNavProps = CommonSlotProps & {
     /**
      * Called when the side nav is expanded.
      *
-     * Note: The trigger parameter is only provided when the `navx-full-height-sidebar` feature flag is enabled.
+     * Note: The trigger parameter is only provided when the `platform_dst_nav4_fhs_instrumentation_1` feature flag is enabled.
      */
     onExpand?: VisibilityCallback;
     /**
      * Called when the side nav is collapsed.
      *
-     * Note: The trigger parameter is only provided when the `navx-full-height-sidebar` feature flag is enabled.
+     * Note: The trigger parameter is only provided when the `platform_dst_nav4_fhs_instrumentation_1` feature flag is enabled.
      */
     onCollapse?: VisibilityCallback;
     /**

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

@@ -1,10 +1,5 @@
 import React from 'react';
 import type { MenuItemLinkOrButtonCommonProps, MenuItemOnClick } from './types';
-/**
- * We intentionally do not support the `isSelected` prop (which other menu item components
- * support) because `ButtonMenuItem`s do not correspond to a "page", so can't be navigated
- *  to and become in a selected state.
- */
 export type ButtonMenuItemProps = MenuItemLinkOrButtonCommonProps & {
     /**
      * We are not using a discriminated union to enforce that the `actions` and `actionsOnHover`
@@ -24,6 +19,20 @@ export type ButtonMenuItemProps = MenuItemLinkOrButtonCommonProps & {
      * Called when the user has clicked on the trigger content.
      */
     onClick?: MenuItemOnClick<HTMLButtonElement>;
+    /**
+     * Identifies the popup element that this element controls when it is used as a popup trigger.
+     * Should match the `id` of the popup content for screen readers to understand the relationship.
+     */
+    'aria-controls'?: string;
+    /**
+     * Announces to assistive technology whether the popup is currently open or closed,
+     * when this element is used as a popup trigger.
+     */
+    'aria-expanded'?: boolean;
+    /**
+     * Informs assistive technology that this element triggers a popup.
+     */
+    'aria-haspopup'?: boolean | 'dialog';
 };
 /**
  * __ButtonMenuItem__

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

@@ -34,10 +34,6 @@ export type ExpandableMenuItemTriggerProps = MenuItemCommonProps & Omit<MenuItem
      * will always be displayed.
      */
     elemBefore?: ReactNode;
-    /**
-     * Indicates that the menu item is selected.
-     */
-    isSelected?: boolean;
     /**
      * If provided, the chevron icon (expand/collapse symbol) will be rendered within a separate
      * icon button element. Clicking on this icon button will not trigger the `onClick` event. It

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

@@ -37,10 +37,6 @@ export type FlyoutMenuItemTriggerProps = MenuItemCommonProps & {
      * If you are controlling the open state of the flyout menu, use this to update your state.
      */
     onClick?: MenuItemOnClick<HTMLButtonElement>;
-    /**
-     * Indicates that the menu item is selected.
-     */
-    isSelected?: boolean;
 };
 /**
  * __FlyoutMenuItemTrigger__

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

@@ -34,7 +34,6 @@ type MenuItemBaseProps<T extends HTMLAnchorElement | HTMLButtonElement> = MenuIt
     href?: string | Record<string, any>;
     target?: HTMLAnchorElement['target'];
     isDisabled?: boolean;
-    isSelected?: boolean;
     ariaControls?: string;
     ariaExpanded?: boolean;
     ariaHasPopup?: boolean | 'dialog';

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

@@ -33,6 +33,10 @@ export type MenuItemCommonProps = {
      * to display the full menu content and description of a menu item close by (eg with another popup)
      */
     isContentTooltipDisabled?: boolean;
+    /**
+     * Indicates that the menu item is selected.
+     */
+    isSelected?: boolean;
     /**
      * Exposes the visually complete menu item, including:
      *

package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav.d.ts

@@ -44,13 +44,13 @@ type SideNavProps = CommonSlotProps & {
     /**
      * Called when the side nav is expanded.
      *
-     * Note: The trigger parameter is only provided when the `navx-full-height-sidebar` feature flag is enabled.
+     * Note: The trigger parameter is only provided when the `platform_dst_nav4_fhs_instrumentation_1` feature flag is enabled.
      */
     onExpand?: VisibilityCallback;
     /**
      * Called when the side nav is collapsed.
      *
-     * Note: The trigger parameter is only provided when the `navx-full-height-sidebar` feature flag is enabled.
+     * Note: The trigger parameter is only provided when the `platform_dst_nav4_fhs_instrumentation_1` feature flag is enabled.
      */
     onCollapse?: VisibilityCallback;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "5.2.0",
+	"version": "5.3.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -147,6 +147,12 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform_dst_nav4_fhs_instrumentation_1": {
+			"type": "boolean"
+		},
+		"platform_dst_nav4_side_nav_default_collapsed_api": {
+			"type": "boolean"
+		},
 		"platform_dst_nav4_side_nav_toggle_ref_fix": {
 			"type": "boolean"
 		},
@@ -189,6 +195,9 @@
 		},
 		"platform_dst_button_chevron_sizing": {
 			"type": "boolean"
+		},
+		"platform-dst-buttonmenuitem-selected-state-support": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/navigation-system"