@atlaskit/navigation-system 2.1.3 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlassian/navigation-system
 
+## 2.3.0
+
+### Minor Changes
+
+- [`40dea92e11501`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/40dea92e11501) -
+  `MenuSectionHeading` has been updated to use regular text (`p` element) instead of a heading (`h2`
+  element). This change is behind a feature flag.
+
+  This has been done to resolve accessibility issues with the component. It does not need to be a
+  heading semantically.
+
+## 2.2.0
+
+### Minor Changes
+
+- [`cf5e597de761c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cf5e597de761c) -
+  Adds a trigger value to the side nav's `onExpand` and `onCollapse` callbacks, allowing consumers
+  to identify the method used to expand or collapse the side nav. Also adds the ability to define
+  the trigger value when using the `useToggleSideNav` and `useExpandSideNav` hooks. This change is
+  behind the `navx-full-height-sidebar` feature gate.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.1.3
 
 ### Patch Changes

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

@@ -9,6 +9,7 @@ exports.MenuSectionHeading = void 0;
 require("./menu-section-heading.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _menuSectionContext = require("./menu-section-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 styles = {
@@ -23,7 +24,10 @@ var styles = {
 var MenuSectionHeading = exports.MenuSectionHeading = function MenuSectionHeading(_ref) {
   var children = _ref.children;
   var id = (0, _menuSectionContext.useMenuSectionContext)();
-  return /*#__PURE__*/React.createElement("h2", {
+  return (0, _platformFeatureFlags.fg)('platform_dst_nav4_menu_section_heading_a11y') ? /*#__PURE__*/React.createElement("p", {
+    id: "".concat(id, "-heading"),
+    className: (0, _runtime.ax)([styles.root])
+  }, children) : /*#__PURE__*/React.createElement("h2", {
     id: "".concat(id, "-heading"),
     className: (0, _runtime.ax)([styles.root])
   }, children);

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

@@ -35,7 +35,9 @@ var SideNavPanelSplitter = exports.SideNavPanelSplitter = function SideNavPanelS
     shouldCollapseOnDoubleClick = _ref$shouldCollapseOn === void 0 ? true : _ref$shouldCollapseOn;
   var context = (0, _react.useContext)(_context.PanelSplitterContext);
   (0, _tinyInvariant.default)((context === null || context === void 0 ? void 0 : context.panelId) === _constants.sideNavPanelSplitterId, 'SideNavPanelSplitter must be rendered as a child of <SideNav />.');
-  var toggleSideNav = (0, _useToggleSideNav.useToggleSideNav)();
+  var toggleSideNav = (0, _useToggleSideNav.useToggleSideNav)({
+    trigger: 'double-click'
+  });
   return /*#__PURE__*/_react.default.createElement(_context.OnDoubleClickContext.Provider, {
     value: shouldCollapseOnDoubleClick ? toggleSideNav : undefined
   }, /*#__PURE__*/_react.default.createElement(_panelSplitter.PanelSplitter, {

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

@@ -39,6 +39,8 @@ var _useSideNavVisibilityCallbacks = require("./use-side-nav-visibility-callback
 var _useToggleSideNav = require("./use-toggle-side-nav");
 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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var panelSplitterResizingVar = '--n_snvRsz';
 var widthResizeBounds = {
   min: '240px',
@@ -67,6 +69,7 @@ var fallbackDefaultWidth = 320;
  * context value.
  */
 function SideNavInternal(_ref) {
+  var _sideNavState$lastTri;
   var children = _ref.children,
     defaultCollapsed = _ref.defaultCollapsed,
     _ref$defaultWidth = _ref.defaultWidth,
@@ -82,7 +85,9 @@ function SideNavInternal(_ref) {
   var id = (0, _idUtils.useLayoutId)({
     providedId: providedId
   });
-  var expandSideNav = (0, _useExpandSideNav.useExpandSideNav)();
+  var expandSideNav = (0, _useExpandSideNav.useExpandSideNav)({
+    trigger: 'skip-link'
+  });
   /**
    * Called after clicking on the side nav skip link, and ensures the side nav is expanded so that it is focusable.
    *
@@ -155,11 +160,9 @@ function SideNavInternal(_ref) {
       };
       setSideNavState(function (currentState) {
         if ((currentState === null || currentState === void 0 ? void 0 : currentState.desktop) === 'collapsed' && (currentState === null || currentState === void 0 ? void 0 : currentState.flyout) !== 'open') {
-          return {
-            desktop: currentState.desktop,
-            mobile: currentState.mobile,
+          return _objectSpread(_objectSpread({}, currentState), {}, {
             flyout: 'open'
-          };
+          });
         }
         return currentState;
       });
@@ -171,11 +174,9 @@ function SideNavInternal(_ref) {
       };
       setSideNavState(function (currentState) {
         if ((currentState === null || currentState === void 0 ? void 0 : currentState.desktop) === 'collapsed' && (currentState === null || currentState === void 0 ? void 0 : currentState.flyout) === 'open') {
-          return {
-            desktop: currentState.desktop,
-            mobile: currentState.mobile,
+          return _objectSpread(_objectSpread({}, currentState), {}, {
             flyout: 'triggered-animate-close'
-          };
+          });
         }
         return currentState;
       });
@@ -238,31 +239,53 @@ function SideNavInternal(_ref) {
       }
     };
   }, [openLayerObserver, setSideNavState]);
-  var toggleVisibility = (0, _useToggleSideNav.useToggleSideNav)();
+  var toggleVisibilityByScreenResize = (0, _useToggleSideNav.useToggleSideNav)({
+    trigger: 'screen-resize'
+  });
+  var toggleVisibilityByClickOutsideOnMobile = (0, _useToggleSideNav.useToggleSideNav)({
+    trigger: 'click-outside-on-mobile'
+  });
   (0, _react.useEffect)(function () {
     // 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'
+      flyout: 'closed',
+      lastTrigger: null
     });
   }, [initialDefaultCollapsed, setSideNavState]);
   var handleExpand = (0, _react.useCallback)(function (_ref2) {
-    var screen = _ref2.screen;
-    onExpand === null || onExpand === void 0 || onExpand({
-      screen: screen
-    });
+    var screen = _ref2.screen,
+      trigger = _ref2.trigger;
+    if ((0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+      onExpand === null || onExpand === void 0 || onExpand({
+        screen: screen,
+        trigger: trigger
+      });
+    } else {
+      onExpand === null || onExpand === void 0 || onExpand({
+        screen: screen
+      });
+    }
 
     // When the side nav gets expanded, we close the flyout to reset it.
     // This prevents the flyout from staying open and ensures we are respecting the user's intent to expand.
     updateFlyoutState('force-close');
   }, [onExpand, updateFlyoutState]);
   var handleCollapse = (0, _react.useCallback)(function (_ref3) {
-    var screen = _ref3.screen;
-    onCollapse === null || onCollapse === void 0 || onCollapse({
-      screen: screen
-    });
+    var screen = _ref3.screen,
+      trigger = _ref3.trigger;
+    if ((0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+      onCollapse === null || onCollapse === void 0 || onCollapse({
+        screen: screen,
+        trigger: trigger
+      });
+    } else {
+      onCollapse === null || onCollapse === void 0 || onCollapse({
+        screen: screen
+      });
+    }
 
     // When the side nav gets collapsed, we close the flyout to reset it.
     // This prevents the flyout from staying open and ensures we are respecting the user's intent to collapse.
@@ -272,7 +295,8 @@ function SideNavInternal(_ref) {
     onExpand: handleExpand,
     onCollapse: handleCollapse,
     isExpandedOnDesktop: isExpandedOnDesktop,
-    isExpandedOnMobile: isExpandedOnMobile
+    isExpandedOnMobile: isExpandedOnMobile,
+    lastTrigger: (_sideNavState$lastTri = sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.lastTrigger) !== null && _sideNavState$lastTri !== void 0 ? _sideNavState$lastTri : null
   });
   (0, _react.useEffect)(function () {
     var mediaQueryList = window.matchMedia('(min-width: 64rem)');
@@ -283,12 +307,12 @@ function SideNavInternal(_ref) {
           // We're transitioning from tablet to desktop viewport size.
           // We forcibly show the side nav if it was shown on mobile.
           if (isExpandedOnMobile && !isExpandedOnDesktop) {
-            toggleVisibility();
+            toggleVisibilityByScreenResize();
           }
         }
       }
     });
-  }, [toggleVisibility, isExpandedOnDesktop, isExpandedOnMobile]);
+  }, [toggleVisibilityByScreenResize, isExpandedOnDesktop, isExpandedOnMobile]);
 
   /**
    * Close the mobile side nav if there is a click outside.
@@ -345,10 +369,10 @@ function SideNavInternal(_ref) {
           // In either case keeping the SideNav expanded makes sense.
           return;
         }
-        toggleVisibility();
+        toggleVisibilityByClickOutsideOnMobile();
       }
     });
-  }, [id, isExpandedOnMobile, toggleButtonElement, toggleVisibility]);
+  }, [id, isExpandedOnMobile, toggleButtonElement, toggleVisibilityByClickOutsideOnMobile]);
   (0, _react.useEffect)(function () {
     if (!toggleButtonElement) {
       return;

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

@@ -73,7 +73,9 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
       }
     });
   }, [isSideNavExpandedOnDesktop, isSideNavExpandedOnMobile]);
-  var toggleVisibility = (0, _useToggleSideNav.useToggleSideNav)();
+  var toggleVisibility = (0, _useToggleSideNav.useToggleSideNav)({
+    trigger: 'toggle-button'
+  });
   var handleClick = (0, _react.useCallback)(function (event, analyticsEvent) {
     onClick === null || onClick === void 0 || onClick(event, analyticsEvent, {
       isSideNavVisible: isSideNavExpanded

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

@@ -16,6 +16,9 @@ var _visibilityContext = require("./visibility-context");
  * If you need a function to toggle the side nav, use `useToggleSideNav` instead.
  */
 function useExpandSideNav() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? 'programmatic' : _ref$trigger;
   var setSideNavState = (0, _react.useContext)(_visibilityContext.SetSideNavVisibilityState);
   var expandSideNav = (0, _react.useCallback)(function () {
     var _window$matchMedia = window.matchMedia('(min-width: 64rem)'),
@@ -35,7 +38,8 @@ function useExpandSideNav() {
         return {
           mobile: currentState.mobile,
           desktop: 'expanded',
-          flyout: 'closed'
+          flyout: 'closed',
+          lastTrigger: trigger
         };
       });
     } else {
@@ -53,10 +57,11 @@ function useExpandSideNav() {
         return {
           desktop: currentState.desktop,
           mobile: 'expanded',
-          flyout: 'closed'
+          flyout: 'closed',
+          lastTrigger: trigger
         };
       });
     }
-  }, [setSideNavState]);
+  }, [setSideNavState, trigger]);
   return expandSideNav;
 }

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useSideNavVisibilityCallbacks = useSideNavVisibilityCallbacks;
 var _react = require("react");
 var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /**
  * Calls the `onExpand` and `onCollapse` callbacks as required.
  * This is used for both user-provided callbacks, as well as internal callbacks to respond to visibility state changes.
@@ -15,7 +16,8 @@ function useSideNavVisibilityCallbacks(_ref) {
   var onExpand = _ref.onExpand,
     onCollapse = _ref.onCollapse,
     isExpandedOnDesktop = _ref.isExpandedOnDesktop,
-    isExpandedOnMobile = _ref.isExpandedOnMobile;
+    isExpandedOnMobile = _ref.isExpandedOnMobile,
+    lastTrigger = _ref.lastTrigger;
   // Wrapping in refs so we can call them in `useEffect` without changes to them triggering the `useEffect`
   var onExpandRef = (0, _react.useRef)(onExpand);
   var onCollapseRef = (0, _react.useRef)(onCollapse);
@@ -36,17 +38,33 @@ function useSideNavVisibilityCallbacks(_ref) {
       return;
     }
     if (isExpandedOnDesktop) {
-      var _onExpandRef$current;
-      (_onExpandRef$current = onExpandRef.current) === null || _onExpandRef$current === void 0 || _onExpandRef$current.call(onExpandRef, {
-        screen: 'desktop'
-      });
+      if ((0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+        var _onExpandRef$current;
+        (_onExpandRef$current = onExpandRef.current) === null || _onExpandRef$current === void 0 || _onExpandRef$current.call(onExpandRef, {
+          screen: 'desktop',
+          trigger: lastTrigger
+        });
+      } else {
+        var _onExpandRef$current2;
+        (_onExpandRef$current2 = onExpandRef.current) === null || _onExpandRef$current2 === void 0 || _onExpandRef$current2.call(onExpandRef, {
+          screen: 'desktop'
+        });
+      }
     } else {
-      var _onCollapseRef$curren;
-      (_onCollapseRef$curren = onCollapseRef.current) === null || _onCollapseRef$curren === void 0 || _onCollapseRef$curren.call(onCollapseRef, {
-        screen: 'desktop'
-      });
+      if ((0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+        var _onCollapseRef$curren;
+        (_onCollapseRef$curren = onCollapseRef.current) === null || _onCollapseRef$curren === void 0 || _onCollapseRef$curren.call(onCollapseRef, {
+          screen: 'desktop',
+          trigger: lastTrigger
+        });
+      } else {
+        var _onCollapseRef$curren2;
+        (_onCollapseRef$curren2 = onCollapseRef.current) === null || _onCollapseRef$curren2 === void 0 || _onCollapseRef$curren2.call(onCollapseRef, {
+          screen: 'desktop'
+        });
+      }
     }
-  }, [previousIsExpandedOnDesktop, isExpandedOnDesktop]);
+  }, [previousIsExpandedOnDesktop, isExpandedOnDesktop, lastTrigger]);
   var previousIsExpandedOnMobile = (0, _usePreviousValue.default)(isExpandedOnMobile);
   (0, _react.useEffect)(function () {
     if (previousIsExpandedOnMobile === undefined || previousIsExpandedOnMobile === isExpandedOnMobile) {
@@ -60,15 +78,31 @@ function useSideNavVisibilityCallbacks(_ref) {
       return;
     }
     if (isExpandedOnMobile) {
-      var _onExpandRef$current2;
-      (_onExpandRef$current2 = onExpandRef.current) === null || _onExpandRef$current2 === void 0 || _onExpandRef$current2.call(onExpandRef, {
-        screen: 'mobile'
-      });
+      if ((0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+        var _onExpandRef$current3;
+        (_onExpandRef$current3 = onExpandRef.current) === null || _onExpandRef$current3 === void 0 || _onExpandRef$current3.call(onExpandRef, {
+          screen: 'mobile',
+          trigger: lastTrigger
+        });
+      } else {
+        var _onExpandRef$current4;
+        (_onExpandRef$current4 = onExpandRef.current) === null || _onExpandRef$current4 === void 0 || _onExpandRef$current4.call(onExpandRef, {
+          screen: 'mobile'
+        });
+      }
     } else {
-      var _onCollapseRef$curren2;
-      (_onCollapseRef$curren2 = onCollapseRef.current) === null || _onCollapseRef$curren2 === void 0 || _onCollapseRef$curren2.call(onCollapseRef, {
-        screen: 'mobile'
-      });
+      if ((0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+        var _onCollapseRef$curren3;
+        (_onCollapseRef$curren3 = onCollapseRef.current) === null || _onCollapseRef$curren3 === void 0 || _onCollapseRef$curren3.call(onCollapseRef, {
+          screen: 'mobile',
+          trigger: lastTrigger
+        });
+      } else {
+        var _onCollapseRef$curren4;
+        (_onCollapseRef$curren4 = onCollapseRef.current) === null || _onCollapseRef$curren4 === void 0 || _onCollapseRef$curren4.call(onCollapseRef, {
+          screen: 'mobile'
+        });
+      }
     }
-  }, [previousIsExpandedOnMobile, isExpandedOnMobile]);
+  }, [previousIsExpandedOnMobile, isExpandedOnMobile, lastTrigger]);
 }

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

@@ -13,9 +13,12 @@ var _visibilityContext = require("./visibility-context");
  *
  * It will toggle the appropriate internal desktop or mobile side nav visibility state based on the current screen size.
  *
- * If you need a function to make the side nav visible, use `useShowSideNav` instead.
+ * If you need a function to make the side nav visible, use `useExpandSideNav` instead.
  */
 function useToggleSideNav() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? 'programmatic' : _ref$trigger;
   var setSideNavState = (0, _react.useContext)(_visibilityContext.SetSideNavVisibilityState);
   var toggleSideNav = (0, _react.useCallback)(function () {
     var _window$matchMedia = window.matchMedia('(min-width: 64rem)'),
@@ -30,7 +33,8 @@ function useToggleSideNav() {
         return {
           mobile: currentState.mobile,
           desktop: currentState.desktop === 'expanded' ? 'collapsed' : 'expanded',
-          flyout: 'closed'
+          flyout: 'closed',
+          lastTrigger: trigger
         };
       });
     } else {
@@ -43,10 +47,11 @@ function useToggleSideNav() {
         return {
           desktop: currentState.desktop,
           mobile: currentState.mobile === 'expanded' ? 'collapsed' : 'expanded',
-          flyout: 'closed'
+          flyout: 'closed',
+          lastTrigger: trigger
         };
       });
     }
-  }, [setSideNavState]);
+  }, [setSideNavState, trigger]);
   return toggleSideNav;
 }

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

@@ -2,6 +2,7 @@
 import "./menu-section-heading.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useMenuSectionContext } from './menu-section-context';
 const styles = {
   root: "_11c81vhk _1rjcu2gc _syaz131l _bozg12x7"
@@ -16,7 +17,10 @@ export const MenuSectionHeading = ({
   children
 }) => {
   const id = useMenuSectionContext();
-  return /*#__PURE__*/React.createElement("h2", {
+  return fg('platform_dst_nav4_menu_section_heading_a11y') ? /*#__PURE__*/React.createElement("p", {
+    id: `${id}-heading`,
+    className: ax([styles.root])
+  }, children) : /*#__PURE__*/React.createElement("h2", {
     id: `${id}-heading`,
     className: ax([styles.root])
   }, children);

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

@@ -26,7 +26,9 @@ export const SideNavPanelSplitter = ({
 }) => {
   const context = useContext(PanelSplitterContext);
   invariant((context === null || context === void 0 ? void 0 : context.panelId) === sideNavPanelSplitterId, 'SideNavPanelSplitter must be rendered as a child of <SideNav />.');
-  const toggleSideNav = useToggleSideNav();
+  const toggleSideNav = useToggleSideNav({
+    trigger: 'double-click'
+  });
   return /*#__PURE__*/React.createElement(OnDoubleClickContext.Provider, {
     value: shouldCollapseOnDoubleClick ? toggleSideNav : undefined
   }, /*#__PURE__*/React.createElement(PanelSplitter, {

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

@@ -66,10 +66,13 @@ function SideNavInternal({
   onCollapse,
   id: providedId
 }) {
+  var _sideNavState$lastTri;
   const id = useLayoutId({
     providedId
   });
-  const expandSideNav = useExpandSideNav();
+  const expandSideNav = useExpandSideNav({
+    trigger: 'skip-link'
+  });
   /**
    * Called after clicking on the side nav skip link, and ensures the side nav is expanded so that it is focusable.
    *
@@ -139,8 +142,7 @@ function SideNavInternal({
       setSideNavState(currentState => {
         if ((currentState === null || currentState === void 0 ? void 0 : currentState.desktop) === 'collapsed' && (currentState === null || currentState === void 0 ? void 0 : currentState.flyout) !== 'open') {
           return {
-            desktop: currentState.desktop,
-            mobile: currentState.mobile,
+            ...currentState,
             flyout: 'open'
           };
         }
@@ -155,8 +157,7 @@ function SideNavInternal({
       setSideNavState(currentState => {
         if ((currentState === null || currentState === void 0 ? void 0 : currentState.desktop) === 'collapsed' && (currentState === null || currentState === void 0 ? void 0 : currentState.flyout) === 'open') {
           return {
-            desktop: currentState.desktop,
-            mobile: currentState.mobile,
+            ...currentState,
             flyout: 'triggered-animate-close'
           };
         }
@@ -221,33 +222,55 @@ function SideNavInternal({
       }
     };
   }, [openLayerObserver, setSideNavState]);
-  const toggleVisibility = useToggleSideNav();
+  const toggleVisibilityByScreenResize = useToggleSideNav({
+    trigger: 'screen-resize'
+  });
+  const toggleVisibilityByClickOutsideOnMobile = useToggleSideNav({
+    trigger: 'click-outside-on-mobile'
+  });
   useEffect(() => {
     // 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'
+      flyout: 'closed',
+      lastTrigger: null
     });
   }, [initialDefaultCollapsed, setSideNavState]);
   const handleExpand = useCallback(({
-    screen
+    screen,
+    trigger
   }) => {
-    onExpand === null || onExpand === void 0 ? void 0 : onExpand({
-      screen
-    });
+    if (fg('navx-full-height-sidebar')) {
+      onExpand === null || onExpand === void 0 ? void 0 : onExpand({
+        screen,
+        trigger
+      });
+    } else {
+      onExpand === null || onExpand === void 0 ? void 0 : onExpand({
+        screen
+      });
+    }
 
     // When the side nav gets expanded, we close the flyout to reset it.
     // This prevents the flyout from staying open and ensures we are respecting the user's intent to expand.
     updateFlyoutState('force-close');
   }, [onExpand, updateFlyoutState]);
   const handleCollapse = useCallback(({
-    screen
+    screen,
+    trigger
   }) => {
-    onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse({
-      screen
-    });
+    if (fg('navx-full-height-sidebar')) {
+      onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse({
+        screen,
+        trigger
+      });
+    } else {
+      onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse({
+        screen
+      });
+    }
 
     // When the side nav gets collapsed, we close the flyout to reset it.
     // This prevents the flyout from staying open and ensures we are respecting the user's intent to collapse.
@@ -257,7 +280,8 @@ function SideNavInternal({
     onExpand: handleExpand,
     onCollapse: handleCollapse,
     isExpandedOnDesktop,
-    isExpandedOnMobile
+    isExpandedOnMobile,
+    lastTrigger: (_sideNavState$lastTri = sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.lastTrigger) !== null && _sideNavState$lastTri !== void 0 ? _sideNavState$lastTri : null
   });
   useEffect(() => {
     const mediaQueryList = window.matchMedia('(min-width: 64rem)');
@@ -268,12 +292,12 @@ function SideNavInternal({
           // We're transitioning from tablet to desktop viewport size.
           // We forcibly show the side nav if it was shown on mobile.
           if (isExpandedOnMobile && !isExpandedOnDesktop) {
-            toggleVisibility();
+            toggleVisibilityByScreenResize();
           }
         }
       }
     });
-  }, [toggleVisibility, isExpandedOnDesktop, isExpandedOnMobile]);
+  }, [toggleVisibilityByScreenResize, isExpandedOnDesktop, isExpandedOnMobile]);
 
   /**
    * Close the mobile side nav if there is a click outside.
@@ -330,10 +354,10 @@ function SideNavInternal({
           // In either case keeping the SideNav expanded makes sense.
           return;
         }
-        toggleVisibility();
+        toggleVisibilityByClickOutsideOnMobile();
       }
     });
-  }, [id, isExpandedOnMobile, toggleButtonElement, toggleVisibility]);
+  }, [id, isExpandedOnMobile, toggleButtonElement, toggleVisibilityByClickOutsideOnMobile]);
   useEffect(() => {
     if (!toggleButtonElement) {
       return;

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

@@ -62,7 +62,9 @@ export const SideNavToggleButton = ({
       }
     });
   }, [isSideNavExpandedOnDesktop, isSideNavExpandedOnMobile]);
-  const toggleVisibility = useToggleSideNav();
+  const toggleVisibility = useToggleSideNav({
+    trigger: 'toggle-button'
+  });
   const handleClick = useCallback((event, analyticsEvent) => {
     onClick === null || onClick === void 0 ? void 0 : onClick(event, analyticsEvent, {
       isSideNavVisible: isSideNavExpanded

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

@@ -9,7 +9,9 @@ import { SetSideNavVisibilityState } from './visibility-context';
  *
  * If you need a function to toggle the side nav, use `useToggleSideNav` instead.
  */
-export function useExpandSideNav() {
+export function useExpandSideNav({
+  trigger = 'programmatic'
+} = {}) {
   const setSideNavState = useContext(SetSideNavVisibilityState);
   const expandSideNav = useCallback(() => {
     const {
@@ -30,7 +32,8 @@ export function useExpandSideNav() {
         return {
           mobile: currentState.mobile,
           desktop: 'expanded',
-          flyout: 'closed'
+          flyout: 'closed',
+          lastTrigger: trigger
         };
       });
     } else {
@@ -48,10 +51,11 @@ export function useExpandSideNav() {
         return {
           desktop: currentState.desktop,
           mobile: 'expanded',
-          flyout: 'closed'
+          flyout: 'closed',
+          lastTrigger: trigger
         };
       });
     }
-  }, [setSideNavState]);
+  }, [setSideNavState, trigger]);
   return expandSideNav;
 }