@atlaskit/navigation-system 5.23.0 → 5.25.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlassian/navigation-system
 
+## 5.25.0
+
+### Minor Changes
+
+- [`e7b6c5d52b32e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e7b6c5d52b32e) -
+  Adds analytics tracking for flyout menu opening and closing, including the close source (close
+  button, escape key, outside click, other). These additional analytics are behind the
+  `platform_dst_nav4_flyout_menu_slots_close_button` feature gate.
+
+## 5.24.0
+
+### Minor Changes
+
+- [`2fafe4842f106`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2fafe4842f106) -
+  Cleans up the `platform_dst_nav4_side_nav_default_collapsed_api` feature gate. Default side nav
+  collapsed state can now be passed into the `Root` component via the `defaultSideNavCollapsed`
+  prop. This is the preferred API, and the legacy API will be removed at some point in the future.
+
+  This was previously reverted.
+
 ## 5.23.0
 
 ### Minor Changes

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

@@ -32,12 +32,11 @@ var FlyoutHeader = exports.FlyoutHeader = function FlyoutHeader(props) {
     title = props.title,
     closeButtonLabel = props.closeButtonLabel;
   var id = (0, _flyoutMenuItemContext.useTitleId)();
-  var setIsOpen = (0, _react.useContext)(_flyoutMenuItemContext.SetIsOpenContext);
-  var onClose = (0, _react.useContext)(_flyoutMenuItemContext.OnCloseContext);
-  var handleClose = (0, _react.useCallback)(function () {
-    onClose === null || onClose === void 0 || onClose();
-    setIsOpen(false);
-  }, [setIsOpen, onClose]);
+  var onCloseRef = (0, _react.useContext)(_flyoutMenuItemContext.OnCloseContext);
+  var handleClose = (0, _react.useCallback)(function (event) {
+    var _onCloseRef$current;
+    (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef, event, 'close-button');
+  }, [onCloseRef]);
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": testId,
     className: (0, _runtime.ax)([headerStyles.root])
@@ -49,7 +48,7 @@ var FlyoutHeader = exports.FlyoutHeader = function FlyoutHeader(props) {
     testId: testId && "".concat(testId, "--close-button")
   }), /*#__PURE__*/_react.default.createElement(_heading.default, {
     size: "xsmall",
-    as: "span",
+    as: "h2",
     id: id
   }, title)), children);
 };

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

@@ -11,6 +11,7 @@ require("./flyout-menu-item-content.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 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");
@@ -46,10 +47,49 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
     onClose = _ref.onClose,
     autoFocus = _ref.autoFocus;
   var setIsOpen = (0, _react.useContext)(_flyoutMenuItemContext.SetIsOpenContext);
-  var handleClose = (0, _react.useCallback)(function () {
+  var onCloseRef = (0, _react.useContext)(_flyoutMenuItemContext.OnCloseContext);
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
+  // The source of the close is not accessible to the consumer, it is determined within the
+  // 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';
+          }
+        }
+      }
+
+      // 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]);
+  }, [setIsOpen, onClose, createAnalyticsEvent]);
+
+  // Register handleClose in the ref to allow the FlyoutMenuItemTrigger to access it
+  (0, _react.useEffect)(function () {
+    onCloseRef.current = handleClose;
+  }, [handleClose, onCloseRef]);
   var titleId = (0, _react.useId)();
   return /*#__PURE__*/_react.default.createElement(_experimental.PopupContent, {
     appearance: "UNSAFE_modal-below-sm",
@@ -88,13 +128,9 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
       update: update
     }, (0, _platformFeatureFlags.fg)("platform_dst_nav4_flyout_menu_slots_close_button") ? /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.TitleIdContextProvider, {
       value: titleId
-    }, /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.OnCloseProvider, {
-      value: function value() {
-        return onClose;
-      }
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _runtime.ax)([flyoutMenuItemContentContainerStyles.container])
-    }, children))) : children);
+    }, children)) : children);
   });
 });
 function createResizeObserver(update) {

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTitleId = exports.useSetFlyoutMenuOpen = exports.useFlyoutMenuOpen = exports.TitleIdContextProvider = exports.TitleIdContext = exports.SetIsOpenContext = exports.OnCloseProvider = exports.OnCloseContext = exports.IsOpenContext = void 0;
+exports.useTitleId = exports.useSetFlyoutMenuOpen = exports.useFlyoutMenuOpen = exports.TitleIdContextProvider = exports.TitleIdContext = exports.SetIsOpenContext = exports.OnCloseContext = exports.IsOpenContext = void 0;
 var _react = require("react");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 /**
@@ -30,16 +30,13 @@ var useSetFlyoutMenuOpen = exports.useSetFlyoutMenuOpen = function useSetFlyoutM
 /**
  * __On close context__
  * 
- * A context for storing the onClose value of the FlyoutMenuItem.
+ * A context for storing a ref to the onClose handler with source information.This
+ * is used by FlyoutMenuItemContent, FlyoutMenuItemTrigger and FlyoutHeader to store
+ * the on close function and source information for closing the flyout menu.
  */
-var OnCloseContext = exports.OnCloseContext = /*#__PURE__*/(0, _react.createContext)(null);
-
-/**
- * __On close provider__
- * 
- * A context provider for supplying the onClose function to the FlyoutHeader.
- */
-var OnCloseProvider = exports.OnCloseProvider = OnCloseContext.Provider;
+var OnCloseContext = exports.OnCloseContext = /*#__PURE__*/(0, _react.createContext)({
+  current: null
+});
 
 /**
  * __Title id context__

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

@@ -13,8 +13,10 @@ 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");
 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); }
 var elemAfterStyles = {
   root: "_18zr12x7 _1tz3r0mg"
@@ -36,6 +38,18 @@ var FlyoutMenuItemTrigger = exports.FlyoutMenuItemTrigger = /*#__PURE__*/(0, _re
     isDragging = _ref.isDragging,
     hasDragIndicator = _ref.hasDragIndicator,
     dropIndicator = _ref.dropIndicator;
+  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');
+      }
+    }
+    onClick === null || onClick === void 0 || onClick(event, analyticsEvent);
+  }, [isOpen, onCloseRef, onClick]);
   return /*#__PURE__*/React.createElement(_experimental.PopupTrigger, null, function (_ref2) {
     var ref = _ref2.ref,
       ariaControls = _ref2['aria-controls'],
@@ -53,7 +67,7 @@ var FlyoutMenuItemTrigger = exports.FlyoutMenuItemTrigger = /*#__PURE__*/(0, _re
         color: "currentColor",
         size: "small"
       })),
-      onClick: onClick,
+      onClick: handleClick,
       ariaControls: ariaControls,
       ariaExpanded: ariaExpanded,
       ariaHasPopup: ariaHasPopup,

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.FlyoutMenuItem = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 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");
@@ -49,6 +50,9 @@ var FlyoutMenuItem = exports.FlyoutMenuItem = /*#__PURE__*/(0, _react.forwardRef
     isOpen = _useControlled2[0],
     setIsOpen = _useControlled2[1];
   var previousIsOpen = (0, _usePreviousValue.default)(isOpen);
+  var onCloseRef = (0, _react.useRef)(null);
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   (0, _react.useEffect)(function () {
     if (previousIsOpen === undefined || previousIsOpen === isOpen) {
       /**
@@ -60,17 +64,31 @@ var FlyoutMenuItem = exports.FlyoutMenuItem = /*#__PURE__*/(0, _react.forwardRef
        */
       return;
     }
+
+    // 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');
+      }
+    }
     onOpenChange === null || onOpenChange === void 0 || onOpenChange(isOpen);
-  }, [isOpen, onOpenChange, previousIsOpen]);
+  }, [isOpen, onOpenChange, previousIsOpen, createAnalyticsEvent]);
   return /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.IsOpenContext.Provider, {
     value: isOpen
   }, /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.SetIsOpenContext.Provider, {
     value: setIsOpen
+  }, /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.OnCloseContext.Provider, {
+    value: onCloseRef
   }, /*#__PURE__*/_react.default.createElement(_menuListItem.MenuListItem, {
     ref: forwardedRef
   }, /*#__PURE__*/_react.default.createElement(_experimental.Popup, {
     id: id,
     isOpen: isOpen,
     role: (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined
-  }, children))));
+  }, children)))));
 });

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

@@ -344,29 +344,10 @@ 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
+  // Using `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;

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

@@ -61,7 +61,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 || !(0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_default_collapsed_api') ? !defaultCollapsed : isSideNavExpandedOnDesktop),
+  var _useState = (0, _react.useState)(sideNavState === null ? !defaultCollapsed : isSideNavExpandedOnDesktop),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isSideNavExpanded = _useState2[0],
     setIsSideNavExpanded = _useState2[1];

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

@@ -8,7 +8,6 @@ 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); }
 /**
@@ -17,7 +16,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' && (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_default_collapsed_api') ? {
+  var initialState = typeof defaultCollapsed === 'boolean' ? {
     desktop: defaultCollapsed ? 'collapsed' : 'expanded',
     mobile: 'collapsed',
     flyout: 'closed',

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

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

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

@@ -5,7 +5,7 @@ import React, { useCallback, useContext } from 'react';
 import Heading from '@atlaskit/heading';
 import { Flex } from '@atlaskit/primitives/compiled';
 import { CloseButton } from './close-button';
-import { OnCloseContext, SetIsOpenContext, useTitleId } from './flyout-menu-item-context';
+import { OnCloseContext, useTitleId } from './flyout-menu-item-context';
 const headerStyles = {
   root: "_zulp12x7 _bozg1b66 _85i512x7 _1e0c1txw _2lx21bp4",
   flex: "_zulppxbi _1bah1yb4 _2lx21sbv _4cvr1h6o _1bsb1osq _bozgv77o"
@@ -25,12 +25,11 @@ export const FlyoutHeader = props => {
     closeButtonLabel
   } = props;
   const id = useTitleId();
-  const setIsOpen = useContext(SetIsOpenContext);
-  const onClose = useContext(OnCloseContext);
-  const handleClose = useCallback(() => {
-    onClose === null || onClose === void 0 ? void 0 : onClose();
-    setIsOpen(false);
-  }, [setIsOpen, onClose]);
+  const onCloseRef = useContext(OnCloseContext);
+  const handleClose = useCallback(event => {
+    var _onCloseRef$current;
+    (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef, event, 'close-button');
+  }, [onCloseRef]);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
     className: ax([headerStyles.root])
@@ -42,7 +41,7 @@ export const FlyoutHeader = props => {
     testId: testId && `${testId}--close-button`
   }), /*#__PURE__*/React.createElement(Heading, {
     size: "xsmall",
-    as: "span",
+    as: "h2",
     id: id
   }, title)), children);
 };

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

@@ -2,11 +2,11 @@
 import "./flyout-menu-item-content.compiled.css";
 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 { OnCloseProvider, SetIsOpenContext, TitleIdContextProvider } from './flyout-menu-item-context';
-
+import { OnCloseContext, SetIsOpenContext, TitleIdContextProvider } from './flyout-menu-item-context';
 /**
  * The vertical offset in px to ensure the flyout container does not exceed the bounds of
  * the window. This matches the padding of the content container, and it's position within
@@ -38,10 +38,50 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
   autoFocus
 }, forwardedRef) => {
   const setIsOpen = useContext(SetIsOpenContext);
-  const handleClose = useCallback(() => {
+  const onCloseRef = useContext(OnCloseContext);
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+
+  // The source of the close is not accessible to the consumer, it is determined within the
+  // 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';
+          }
+        }
+      }
+
+      // 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]);
+  }, [setIsOpen, onClose, createAnalyticsEvent]);
+
+  // Register handleClose in the ref to allow the FlyoutMenuItemTrigger to access it
+  useEffect(() => {
+    onCloseRef.current = handleClose;
+  }, [handleClose, onCloseRef]);
   const titleId = useId();
   return /*#__PURE__*/React.createElement(PopupContent, {
     appearance: "UNSAFE_modal-below-sm",
@@ -80,11 +120,9 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
     update: update
   }, fg("platform_dst_nav4_flyout_menu_slots_close_button") ? /*#__PURE__*/React.createElement(TitleIdContextProvider, {
     value: titleId
-  }, /*#__PURE__*/React.createElement(OnCloseProvider, {
-    value: () => onClose
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([flyoutMenuItemContentContainerStyles.container])
-  }, children))) : children));
+  }, children)) : children));
 });
 function createResizeObserver(update) {
   return new ResizeObserver(update);

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

@@ -1,6 +1,5 @@
 import { createContext, useContext } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
-
 /**
  * __Is open context__
  *
@@ -20,16 +19,13 @@ export const useSetFlyoutMenuOpen = () => useContext(SetIsOpenContext);
 /**
  * __On close context__
  * 
- * A context for storing the onClose value of the FlyoutMenuItem.
- */
-export const OnCloseContext = /*#__PURE__*/createContext(null);
-
-/**
- * __On close provider__
- * 
- * A context provider for supplying the onClose function to the FlyoutHeader.
+ * A context for storing a ref to the onClose handler with source information.This
+ * is used by FlyoutMenuItemContent, FlyoutMenuItemTrigger and FlyoutHeader to store
+ * the on close function and source information for closing the flyout menu.
  */
-export const OnCloseProvider = OnCloseContext.Provider;
+export const OnCloseContext = /*#__PURE__*/createContext({
+  current: null
+});
 
 /**
  * __Title id context__

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

@@ -2,11 +2,13 @@
 import "./flyout-menu-item-trigger.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { forwardRef } from 'react';
+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';
 const elemAfterStyles = {
   root: "_18zr12x7 _1tz3r0mg"
 };
@@ -27,31 +29,45 @@ export const FlyoutMenuItemTrigger = /*#__PURE__*/forwardRef(({
   isDragging,
   hasDragIndicator,
   dropIndicator
-}, forwardedRef) => /*#__PURE__*/React.createElement(PopupTrigger, null, ({
-  ref,
-  'aria-controls': ariaControls,
-  'aria-expanded': ariaExpanded,
-  'aria-haspopup': ariaHasPopup
-}) => /*#__PURE__*/React.createElement(MenuItemBase, {
-  testId: testId,
-  ref: mergeRefs([ref, forwardedRef]),
-  visualContentRef: visualContentRef,
-  elemBefore: elemBefore,
-  elemAfter: /*#__PURE__*/React.createElement("div", {
-    className: ax([elemAfterStyles.root])
-  }, /*#__PURE__*/React.createElement(ChevronRightIcon, {
-    label: "",
-    color: "currentColor",
-    size: "small"
-  })),
-  onClick: onClick,
-  ariaControls: ariaControls,
-  ariaExpanded: ariaExpanded,
-  ariaHasPopup: ariaHasPopup,
-  interactionName: interactionName,
-  isContentTooltipDisabled: isContentTooltipDisabled,
-  isSelected: isSelected,
-  isDragging: isDragging,
-  hasDragIndicator: hasDragIndicator,
-  dropIndicator: dropIndicator
-}, children)));
+}, forwardedRef) => {
+  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');
+      }
+    }
+    onClick === null || onClick === void 0 ? void 0 : onClick(event, analyticsEvent);
+  }, [isOpen, onCloseRef, onClick]);
+  return /*#__PURE__*/React.createElement(PopupTrigger, null, ({
+    ref,
+    'aria-controls': ariaControls,
+    'aria-expanded': ariaExpanded,
+    'aria-haspopup': ariaHasPopup
+  }) => /*#__PURE__*/React.createElement(MenuItemBase, {
+    testId: testId,
+    ref: mergeRefs([ref, forwardedRef]),
+    visualContentRef: visualContentRef,
+    elemBefore: elemBefore,
+    elemAfter: /*#__PURE__*/React.createElement("div", {
+      className: ax([elemAfterStyles.root])
+    }, /*#__PURE__*/React.createElement(ChevronRightIcon, {
+      label: "",
+      color: "currentColor",
+      size: "small"
+    })),
+    onClick: handleClick,
+    ariaControls: ariaControls,
+    ariaExpanded: ariaExpanded,
+    ariaHasPopup: ariaHasPopup,
+    interactionName: interactionName,
+    isContentTooltipDisabled: isContentTooltipDisabled,
+    isSelected: isSelected,
+    isDragging: isDragging,
+    hasDragIndicator: hasDragIndicator,
+    dropIndicator: dropIndicator
+  }, children));
+});

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

@@ -1,10 +1,11 @@
-import React, { forwardRef, useEffect } from 'react';
+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, SetIsOpenContext } from './flyout-menu-item-context';
+import { IsOpenContext, OnCloseContext, SetIsOpenContext } from './flyout-menu-item-context';
 /**
  * __FlyoutMenuItem__
  *
@@ -34,6 +35,10 @@ export const FlyoutMenuItem = /*#__PURE__*/forwardRef(({
 }, forwardedRef) => {
   const [isOpen, setIsOpen] = useControlled(isOpenControlled, () => isDefaultOpen);
   const previousIsOpen = usePreviousValue(isOpen);
+  const onCloseRef = useRef(null);
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
   useEffect(() => {
     if (previousIsOpen === undefined || previousIsOpen === isOpen) {
       /**
@@ -45,17 +50,31 @@ export const FlyoutMenuItem = /*#__PURE__*/forwardRef(({
        */
       return;
     }
+
+    // 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');
+      }
+    }
     onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
-  }, [isOpen, onOpenChange, previousIsOpen]);
+  }, [isOpen, onOpenChange, previousIsOpen, createAnalyticsEvent]);
   return /*#__PURE__*/React.createElement(IsOpenContext.Provider, {
     value: isOpen
   }, /*#__PURE__*/React.createElement(SetIsOpenContext.Provider, {
     value: setIsOpen
+  }, /*#__PURE__*/React.createElement(OnCloseContext.Provider, {
+    value: onCloseRef
   }, /*#__PURE__*/React.createElement(MenuListItem, {
     ref: forwardedRef
   }, /*#__PURE__*/React.createElement(Popup, {
     id: id,
     isOpen: isOpen,
     role: fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined
-  }, children))));
+  }, children)))));
 });

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

@@ -325,29 +325,10 @@ 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
+  // Using `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;

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

@@ -49,7 +49,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 || !fg('platform_dst_nav4_side_nav_default_collapsed_api') ? !defaultCollapsed : isSideNavExpandedOnDesktop);
+  const [isSideNavExpanded, setIsSideNavExpanded] = useState(sideNavState === null ? !defaultCollapsed : isSideNavExpandedOnDesktop);
   const ref = useContext(SideNavToggleButtonAttachRef);
 
   /**

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

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

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

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

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

@@ -5,7 +5,7 @@ import React, { useCallback, useContext } from 'react';
 import Heading from '@atlaskit/heading';
 import { Flex } from '@atlaskit/primitives/compiled';
 import { CloseButton } from './close-button';
-import { OnCloseContext, SetIsOpenContext, useTitleId } from './flyout-menu-item-context';
+import { OnCloseContext, useTitleId } from './flyout-menu-item-context';
 var headerStyles = {
   root: "_zulp12x7 _bozg1b66 _85i512x7 _1e0c1txw _2lx21bp4",
   flex: "_zulppxbi _1bah1yb4 _2lx21sbv _4cvr1h6o _1bsb1osq _bozgv77o"
@@ -23,12 +23,11 @@ export var FlyoutHeader = function FlyoutHeader(props) {
     title = props.title,
     closeButtonLabel = props.closeButtonLabel;
   var id = useTitleId();
-  var setIsOpen = useContext(SetIsOpenContext);
-  var onClose = useContext(OnCloseContext);
-  var handleClose = useCallback(function () {
-    onClose === null || onClose === void 0 || onClose();
-    setIsOpen(false);
-  }, [setIsOpen, onClose]);
+  var onCloseRef = useContext(OnCloseContext);
+  var handleClose = useCallback(function (event) {
+    var _onCloseRef$current;
+    (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef, event, 'close-button');
+  }, [onCloseRef]);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
     className: ax([headerStyles.root])
@@ -40,7 +39,7 @@ export var FlyoutHeader = function FlyoutHeader(props) {
     testId: testId && "".concat(testId, "--close-button")
   }), /*#__PURE__*/React.createElement(Heading, {
     size: "xsmall",
-    as: "span",
+    as: "h2",
     id: id
   }, title)), children);
 };

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

@@ -3,11 +3,11 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./flyout-menu-item-content.compiled.css";
 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 { OnCloseProvider, SetIsOpenContext, TitleIdContextProvider } from './flyout-menu-item-context';
-
+import { OnCloseContext, SetIsOpenContext, TitleIdContextProvider } from './flyout-menu-item-context';
 /**
  * The vertical offset in px to ensure the flyout container does not exceed the bounds of
  * the window. This matches the padding of the content container, and it's position within
@@ -38,10 +38,49 @@ export var FlyoutMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwa
     onClose = _ref.onClose,
     autoFocus = _ref.autoFocus;
   var setIsOpen = useContext(SetIsOpenContext);
-  var handleClose = useCallback(function () {
+  var onCloseRef = useContext(OnCloseContext);
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
+  // The source of the close is not accessible to the consumer, it is determined within the
+  // 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';
+          }
+        }
+      }
+
+      // 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]);
+  }, [setIsOpen, onClose, createAnalyticsEvent]);
+
+  // Register handleClose in the ref to allow the FlyoutMenuItemTrigger to access it
+  useEffect(function () {
+    onCloseRef.current = handleClose;
+  }, [handleClose, onCloseRef]);
   var titleId = useId();
   return /*#__PURE__*/React.createElement(PopupContent, {
     appearance: "UNSAFE_modal-below-sm",
@@ -80,13 +119,9 @@ export var FlyoutMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwa
       update: update
     }, fg("platform_dst_nav4_flyout_menu_slots_close_button") ? /*#__PURE__*/React.createElement(TitleIdContextProvider, {
       value: titleId
-    }, /*#__PURE__*/React.createElement(OnCloseProvider, {
-      value: function value() {
-        return onClose;
-      }
     }, /*#__PURE__*/React.createElement("div", {
       className: ax([flyoutMenuItemContentContainerStyles.container])
-    }, children))) : children);
+    }, children)) : children);
   });
 });
 function createResizeObserver(update) {

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

@@ -1,6 +1,5 @@
 import { createContext, useContext } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
-
 /**
  * __Is open context__
  *
@@ -24,16 +23,13 @@ export var useSetFlyoutMenuOpen = function useSetFlyoutMenuOpen() {
 /**
  * __On close context__
  * 
- * A context for storing the onClose value of the FlyoutMenuItem.
- */
-export var OnCloseContext = /*#__PURE__*/createContext(null);
-
-/**
- * __On close provider__
- * 
- * A context provider for supplying the onClose function to the FlyoutHeader.
+ * A context for storing a ref to the onClose handler with source information.This
+ * is used by FlyoutMenuItemContent, FlyoutMenuItemTrigger and FlyoutHeader to store
+ * the on close function and source information for closing the flyout menu.
  */
-export var OnCloseProvider = OnCloseContext.Provider;
+export var OnCloseContext = /*#__PURE__*/createContext({
+  current: null
+});
 
 /**
  * __Title id context__

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

@@ -2,11 +2,13 @@
 import "./flyout-menu-item-trigger.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { forwardRef } from 'react';
+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';
 var elemAfterStyles = {
   root: "_18zr12x7 _1tz3r0mg"
 };
@@ -27,6 +29,18 @@ export var FlyoutMenuItemTrigger = /*#__PURE__*/forwardRef(function (_ref, forwa
     isDragging = _ref.isDragging,
     hasDragIndicator = _ref.hasDragIndicator,
     dropIndicator = _ref.dropIndicator;
+  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');
+      }
+    }
+    onClick === null || onClick === void 0 || onClick(event, analyticsEvent);
+  }, [isOpen, onCloseRef, onClick]);
   return /*#__PURE__*/React.createElement(PopupTrigger, null, function (_ref2) {
     var ref = _ref2.ref,
       ariaControls = _ref2['aria-controls'],
@@ -44,7 +58,7 @@ export var FlyoutMenuItemTrigger = /*#__PURE__*/forwardRef(function (_ref, forwa
         color: "currentColor",
         size: "small"
       })),
-      onClick: onClick,
+      onClick: handleClick,
       ariaControls: ariaControls,
       ariaExpanded: ariaExpanded,
       ariaHasPopup: ariaHasPopup,

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

@@ -1,11 +1,12 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { forwardRef, useEffect } from 'react';
+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, SetIsOpenContext } from './flyout-menu-item-context';
+import { IsOpenContext, OnCloseContext, SetIsOpenContext } from './flyout-menu-item-context';
 /**
  * __FlyoutMenuItem__
  *
@@ -40,6 +41,9 @@ export var FlyoutMenuItem = /*#__PURE__*/forwardRef(function (_ref, forwardedRef
     isOpen = _useControlled2[0],
     setIsOpen = _useControlled2[1];
   var previousIsOpen = usePreviousValue(isOpen);
+  var onCloseRef = useRef(null);
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   useEffect(function () {
     if (previousIsOpen === undefined || previousIsOpen === isOpen) {
       /**
@@ -51,17 +55,31 @@ export var FlyoutMenuItem = /*#__PURE__*/forwardRef(function (_ref, forwardedRef
        */
       return;
     }
+
+    // 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');
+      }
+    }
     onOpenChange === null || onOpenChange === void 0 || onOpenChange(isOpen);
-  }, [isOpen, onOpenChange, previousIsOpen]);
+  }, [isOpen, onOpenChange, previousIsOpen, createAnalyticsEvent]);
   return /*#__PURE__*/React.createElement(IsOpenContext.Provider, {
     value: isOpen
   }, /*#__PURE__*/React.createElement(SetIsOpenContext.Provider, {
     value: setIsOpen
+  }, /*#__PURE__*/React.createElement(OnCloseContext.Provider, {
+    value: onCloseRef
   }, /*#__PURE__*/React.createElement(MenuListItem, {
     ref: forwardedRef
   }, /*#__PURE__*/React.createElement(Popup, {
     id: id,
     isOpen: isOpen,
     role: fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined
-  }, children))));
+  }, children)))));
 });

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

@@ -334,29 +334,10 @@ 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
+  // Using `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;

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

@@ -52,7 +52,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 || !fg('platform_dst_nav4_side_nav_default_collapsed_api') ? !defaultCollapsed : isSideNavExpandedOnDesktop),
+  var _useState = useState(sideNavState === null ? !defaultCollapsed : isSideNavExpandedOnDesktop),
     _useState2 = _slicedToArray(_useState, 2),
     isSideNavExpanded = _useState2[0],
     setIsSideNavExpanded = _useState2[1];

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

@@ -1,6 +1,5 @@
 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';
 
 /**
@@ -9,7 +8,7 @@ import { SetSideNavVisibilityState, SideNavVisibilityState } from './visibility-
 export var SideNavVisibilityProvider = function SideNavVisibilityProvider(_ref) {
   var children = _ref.children,
     defaultCollapsed = _ref.defaultCollapsed;
-  var initialState = typeof defaultCollapsed === 'boolean' && fg('platform_dst_nav4_side_nav_default_collapsed_api') ? {
+  var initialState = typeof defaultCollapsed === 'boolean' ? {
     desktop: defaultCollapsed ? 'collapsed' : 'expanded',
     mobile: 'collapsed',
     flyout: 'closed',

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

@@ -12,7 +12,7 @@ type CloseButtonProps = {
      * should trigger the same close logic as the top-level flyout menu
      * component.
      */
-    onClick?: () => void;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * A unique string that appears as data attribute data-testid in the
      * rendered code, serving as a hook for automated tests.

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

@@ -3,6 +3,7 @@
  * @jsx jsx
  */
 import React from 'react';
+export type FlyoutCloseSource = 'close-button' | 'escape-key' | 'outside-click' | 'other';
 export type FlyoutMenuItemContentProps = {
     /**
      * The contents of the flyout menu.

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

@@ -1,3 +1,4 @@
+import type { FlyoutCloseSource } from './flyout-menu-item-content';
 /**
  * __Is open context__
  *
@@ -15,15 +16,11 @@ export declare const useSetFlyoutMenuOpen: () => (value: boolean) => void;
 /**
  * __On close context__
  *
- * A context for storing the onClose value of the FlyoutMenuItem.
+ * A context for storing a ref to the onClose handler with source information.This
+ * is used by FlyoutMenuItemContent, FlyoutMenuItemTrigger and FlyoutHeader to store
+ * the on close function and source information for closing the flyout menu.
  */
-export declare const OnCloseContext: import("react").Context<(() => void) | null | undefined>;
-/**
- * __On close provider__
- *
- * A context provider for supplying the onClose function to the FlyoutHeader.
- */
-export declare const OnCloseProvider: import("react").Provider<(() => void) | null | undefined>;
+export declare const OnCloseContext: import("react").Context<import("react").MutableRefObject<((event: Event | React.MouseEvent<HTMLButtonElement> | KeyboardEvent | MouseEvent | null, source?: FlyoutCloseSource) => void) | null>>;
 /**
  * __Title id context__
  *

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

@@ -12,7 +12,7 @@ type CloseButtonProps = {
      * should trigger the same close logic as the top-level flyout menu
      * component.
      */
-    onClick?: () => void;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * A unique string that appears as data attribute data-testid in the
      * rendered code, serving as a hook for automated tests.

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

@@ -3,6 +3,7 @@
  * @jsx jsx
  */
 import React from 'react';
+export type FlyoutCloseSource = 'close-button' | 'escape-key' | 'outside-click' | 'other';
 export type FlyoutMenuItemContentProps = {
     /**
      * The contents of the flyout menu.

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

@@ -1,3 +1,4 @@
+import type { FlyoutCloseSource } from './flyout-menu-item-content';
 /**
  * __Is open context__
  *
@@ -15,15 +16,11 @@ export declare const useSetFlyoutMenuOpen: () => (value: boolean) => void;
 /**
  * __On close context__
  *
- * A context for storing the onClose value of the FlyoutMenuItem.
+ * A context for storing a ref to the onClose handler with source information.This
+ * is used by FlyoutMenuItemContent, FlyoutMenuItemTrigger and FlyoutHeader to store
+ * the on close function and source information for closing the flyout menu.
  */
-export declare const OnCloseContext: import("react").Context<(() => void) | null | undefined>;
-/**
- * __On close provider__
- *
- * A context provider for supplying the onClose function to the FlyoutHeader.
- */
-export declare const OnCloseProvider: import("react").Provider<(() => void) | null | undefined>;
+export declare const OnCloseContext: import("react").Context<import("react").MutableRefObject<((event: Event | React.MouseEvent<HTMLButtonElement> | KeyboardEvent | MouseEvent | null, source?: FlyoutCloseSource) => void) | null>>;
 /**
  * __Title id context__
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "5.23.0",
+	"version": "5.25.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -67,7 +67,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
-		"@atlaskit/avatar": "^25.6.0",
+		"@atlaskit/avatar": "^25.7.0",
 		"@atlaskit/button": "^23.9.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^5.3.0",
@@ -103,7 +103,7 @@
 		"@atlaskit/banner": "^14.0.0",
 		"@atlaskit/breadcrumbs": "^15.3.0",
 		"@atlaskit/dropdown-menu": "^16.4.0",
-		"@atlaskit/form": "^15.2.0",
+		"@atlaskit/form": "^15.3.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/lozenge": "^13.3.0",
 		"@atlaskit/menu": "^8.4.0",
@@ -117,7 +117,7 @@
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/gemini": "^1.28.0",
-		"@atlassian/search-dialog": "^9.10.0",
+		"@atlassian/search-dialog": "^9.11.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.0.0",
 		"@atlassian/testing-library": "^0.4.0",
@@ -154,9 +154,6 @@
 		"platform_dst_nav4_fhs_instrumentation_1": {
 			"type": "boolean"
 		},
-		"platform_dst_nav4_side_nav_default_collapsed_api": {
-			"type": "boolean"
-		},
 		"platform-component-visual-refresh": {
 			"type": "boolean",
 			"referenceOnly": true