@atlaskit/navigation-system 5.24.0 → 5.26.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlassian/navigation-system
 
+## 5.26.0
+
+### Minor Changes
+
+- [`05a04a1bfd2f9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/05a04a1bfd2f9) -
+  Panel splitter tooltips will now always fade in when the
+  `platform_dst_nav4_side_nav_resize_tooltip_feedback` gate is enabled.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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

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/panel-splitter/panel-splitter.compiled.css

@@ -7,12 +7,15 @@
 ._1e02zeo2{inset-inline-start:-9px}
 ._1e0c1ule{display:block}
 ._1e0cglyw{display:none}
+._1lww188d{transition-delay:.3s}
 ._1lww5cps{transition-delay:0ms}
 ._1oec1yx9{transition-duration:.1s}
+._1oec6ebc{transition-duration:.15s}
 ._1pbykb7n{z-index:1}
 ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
 ._1qu2glyw{outline-style:none}
 ._4t3i1osq{height:100%}
+._6fl41ytf{transition-timing-function:ease-in-out}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
 ._ahbq196n{margin-inline-start:var(--ds-space-negative-075,-6px)}
 ._bfhk1j28{background-color:transparent}

package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter.js

@@ -48,8 +48,10 @@ var containerStyles = {
   positionStart: "_1e02zeo2"
 };
 var grabAreaStyles = {
-  root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _k8m01ylx _1oec1yx9 _1lww5cps _d0aluf7j _1gavfnf5 _vp7g6x5g _30l36x5g _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5 _1gglglyw _9h8h12zz",
-  fullHeightSidebar: "_d0al11mm"
+  root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _k8m01ylx _d0aluf7j _vp7g6x5g _30l36x5g _1gglglyw _9h8h12zz",
+  fullHeightSidebar: "_d0al11mm",
+  oldTransition: "_1oec1yx9 _1lww5cps _1gavfnf5 _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5",
+  newTransition: "_1oec6ebc _1lww188d _6fl41ytf"
 };
 var lineStyles = {
   root: "_kqswstnw _1e0c1ule _1bsb1l7b _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
@@ -90,7 +92,8 @@ var MaybeTooltip = function MaybeTooltip(_ref2) {
       position: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? 'mouse-y' : 'mouse',
       mousePosition: "right",
       isScreenReaderAnnouncementDisabled: true,
-      component: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? PanelSplitterTooltip : undefined
+      component: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? PanelSplitterTooltip : undefined,
+      UNSAFE_shouldAlwaysFadeIn: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback')
     }, children);
   }
   return children;
@@ -372,7 +375,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
     ref: splitterRef,
     "data-testid": testId,
     onDoubleClick: onDoubleClick,
-    className: (0, _runtime.ax)([grabAreaStyles.root, isFhsEnabled && grabAreaStyles.fullHeightSidebar])
+    className: (0, _runtime.ax)([grabAreaStyles.root, isFhsEnabled && grabAreaStyles.fullHeightSidebar, (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? grabAreaStyles.newTransition : grabAreaStyles.oldTransition])
   }, /*#__PURE__*/React.createElement(_visuallyHidden.default, null, /*#__PURE__*/React.createElement("input", {
     type: "range",
     value: rangeInputValue,

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/panel-splitter/panel-splitter.compiled.css

@@ -7,12 +7,15 @@
 ._1e02zeo2{inset-inline-start:-9px}
 ._1e0c1ule{display:block}
 ._1e0cglyw{display:none}
+._1lww188d{transition-delay:.3s}
 ._1lww5cps{transition-delay:0ms}
 ._1oec1yx9{transition-duration:.1s}
+._1oec6ebc{transition-duration:.15s}
 ._1pbykb7n{z-index:1}
 ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
 ._1qu2glyw{outline-style:none}
 ._4t3i1osq{height:100%}
+._6fl41ytf{transition-timing-function:ease-in-out}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
 ._ahbq196n{margin-inline-start:var(--ds-space-negative-075,-6px)}
 ._bfhk1j28{background-color:transparent}

package/dist/es2019/ui/page-layout/panel-splitter/panel-splitter.js

@@ -32,8 +32,10 @@ const containerStyles = {
   positionStart: "_1e02zeo2"
 };
 const grabAreaStyles = {
-  root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _k8m01ylx _1oec1yx9 _1lww5cps _d0aluf7j _1gavfnf5 _vp7g6x5g _30l36x5g _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5 _1gglglyw _9h8h12zz",
-  fullHeightSidebar: "_d0al11mm"
+  root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _k8m01ylx _d0aluf7j _vp7g6x5g _30l36x5g _1gglglyw _9h8h12zz",
+  fullHeightSidebar: "_d0al11mm",
+  oldTransition: "_1oec1yx9 _1lww5cps _1gavfnf5 _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5",
+  newTransition: "_1oec6ebc _1lww188d _6fl41ytf"
 };
 const lineStyles = {
   root: "_kqswstnw _1e0c1ule _1bsb1l7b _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
@@ -79,7 +81,8 @@ const MaybeTooltip = ({
       position: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? 'mouse-y' : 'mouse',
       mousePosition: "right",
       isScreenReaderAnnouncementDisabled: true,
-      component: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? PanelSplitterTooltip : undefined
+      component: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? PanelSplitterTooltip : undefined,
+      UNSAFE_shouldAlwaysFadeIn: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback')
     }, children);
   }
   return children;
@@ -350,7 +353,7 @@ const PortaledPanelSplitter = ({
     ref: splitterRef,
     "data-testid": testId,
     onDoubleClick: onDoubleClick,
-    className: ax([grabAreaStyles.root, isFhsEnabled && grabAreaStyles.fullHeightSidebar])
+    className: ax([grabAreaStyles.root, isFhsEnabled && grabAreaStyles.fullHeightSidebar, fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? grabAreaStyles.newTransition : grabAreaStyles.oldTransition])
   }, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", {
     type: "range",
     value: rangeInputValue,

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/panel-splitter/panel-splitter.compiled.css

@@ -7,12 +7,15 @@
 ._1e02zeo2{inset-inline-start:-9px}
 ._1e0c1ule{display:block}
 ._1e0cglyw{display:none}
+._1lww188d{transition-delay:.3s}
 ._1lww5cps{transition-delay:0ms}
 ._1oec1yx9{transition-duration:.1s}
+._1oec6ebc{transition-duration:.15s}
 ._1pbykb7n{z-index:1}
 ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
 ._1qu2glyw{outline-style:none}
 ._4t3i1osq{height:100%}
+._6fl41ytf{transition-timing-function:ease-in-out}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
 ._ahbq196n{margin-inline-start:var(--ds-space-negative-075,-6px)}
 ._bfhk1j28{background-color:transparent}

package/dist/esm/ui/page-layout/panel-splitter/panel-splitter.js

@@ -38,8 +38,10 @@ var containerStyles = {
   positionStart: "_1e02zeo2"
 };
 var grabAreaStyles = {
-  root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _k8m01ylx _1oec1yx9 _1lww5cps _d0aluf7j _1gavfnf5 _vp7g6x5g _30l36x5g _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5 _1gglglyw _9h8h12zz",
-  fullHeightSidebar: "_d0al11mm"
+  root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _k8m01ylx _d0aluf7j _vp7g6x5g _30l36x5g _1gglglyw _9h8h12zz",
+  fullHeightSidebar: "_d0al11mm",
+  oldTransition: "_1oec1yx9 _1lww5cps _1gavfnf5 _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5",
+  newTransition: "_1oec6ebc _1lww188d _6fl41ytf"
 };
 var lineStyles = {
   root: "_kqswstnw _1e0c1ule _1bsb1l7b _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
@@ -80,7 +82,8 @@ var MaybeTooltip = function MaybeTooltip(_ref2) {
       position: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? 'mouse-y' : 'mouse',
       mousePosition: "right",
       isScreenReaderAnnouncementDisabled: true,
-      component: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? PanelSplitterTooltip : undefined
+      component: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? PanelSplitterTooltip : undefined,
+      UNSAFE_shouldAlwaysFadeIn: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback')
     }, children);
   }
   return children;
@@ -362,7 +365,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
     ref: splitterRef,
     "data-testid": testId,
     onDoubleClick: onDoubleClick,
-    className: ax([grabAreaStyles.root, isFhsEnabled && grabAreaStyles.fullHeightSidebar])
+    className: ax([grabAreaStyles.root, isFhsEnabled && grabAreaStyles.fullHeightSidebar, fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? grabAreaStyles.newTransition : grabAreaStyles.oldTransition])
   }, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", {
     type: "range",
     value: rangeInputValue,

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.24.0",
+	"version": "5.26.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -82,7 +82,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^17.0.0",
 		"@atlaskit/tokens": "^9.1.0",
-		"@atlaskit/tooltip": "^20.12.0",
+		"@atlaskit/tooltip": "^20.13.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",
@@ -98,7 +98,7 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/app-provider": "^3.2.0",
+		"@atlaskit/app-provider": "^3.3.0",
 		"@atlaskit/badge": "^18.3.0",
 		"@atlaskit/banner": "^14.0.0",
 		"@atlaskit/breadcrumbs": "^15.3.0",
@@ -122,8 +122,7 @@
 		"@atlassian/test-utils": "^1.0.0",
 		"@atlassian/testing-library": "^0.4.0",
 		"@axe-core/playwright": "^4.8.0",
-		"@testing-library/react": "^13.4.0",
-		"@testing-library/react-hooks": "^8.0.1",
+		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
 		"raf-stub": "^2.0.1",
 		"react-dom": "^18.2.0"