@atlaskit/navigation-system 2.1.3 → 2.3.0

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

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
+import { fg } from '@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.
@@ -8,7 +9,8 @@ export function useSideNavVisibilityCallbacks({
   onExpand,
   onCollapse,
   isExpandedOnDesktop,
-  isExpandedOnMobile
+  isExpandedOnMobile,
+  lastTrigger
 }) {
   // Wrapping in refs so we can call them in `useEffect` without changes to them triggering the `useEffect`
   const onExpandRef = useRef(onExpand);
@@ -30,17 +32,33 @@ export function useSideNavVisibilityCallbacks({
       return;
     }
     if (isExpandedOnDesktop) {
-      var _onExpandRef$current;
-      (_onExpandRef$current = onExpandRef.current) === null || _onExpandRef$current === void 0 ? void 0 : _onExpandRef$current.call(onExpandRef, {
-        screen: 'desktop'
-      });
+      if (fg('navx-full-height-sidebar')) {
+        var _onExpandRef$current;
+        (_onExpandRef$current = onExpandRef.current) === null || _onExpandRef$current === void 0 ? void 0 : _onExpandRef$current.call(onExpandRef, {
+          screen: 'desktop',
+          trigger: lastTrigger
+        });
+      } else {
+        var _onExpandRef$current2;
+        (_onExpandRef$current2 = onExpandRef.current) === null || _onExpandRef$current2 === void 0 ? void 0 : _onExpandRef$current2.call(onExpandRef, {
+          screen: 'desktop'
+        });
+      }
     } else {
-      var _onCollapseRef$curren;
-      (_onCollapseRef$curren = onCollapseRef.current) === null || _onCollapseRef$curren === void 0 ? void 0 : _onCollapseRef$curren.call(onCollapseRef, {
-        screen: 'desktop'
-      });
+      if (fg('navx-full-height-sidebar')) {
+        var _onCollapseRef$curren;
+        (_onCollapseRef$curren = onCollapseRef.current) === null || _onCollapseRef$curren === void 0 ? void 0 : _onCollapseRef$curren.call(onCollapseRef, {
+          screen: 'desktop',
+          trigger: lastTrigger
+        });
+      } else {
+        var _onCollapseRef$curren2;
+        (_onCollapseRef$curren2 = onCollapseRef.current) === null || _onCollapseRef$curren2 === void 0 ? void 0 : _onCollapseRef$curren2.call(onCollapseRef, {
+          screen: 'desktop'
+        });
+      }
     }
-  }, [previousIsExpandedOnDesktop, isExpandedOnDesktop]);
+  }, [previousIsExpandedOnDesktop, isExpandedOnDesktop, lastTrigger]);
   const previousIsExpandedOnMobile = usePreviousValue(isExpandedOnMobile);
   useEffect(() => {
     if (previousIsExpandedOnMobile === undefined || previousIsExpandedOnMobile === isExpandedOnMobile) {
@@ -54,15 +72,31 @@ export function useSideNavVisibilityCallbacks({
       return;
     }
     if (isExpandedOnMobile) {
-      var _onExpandRef$current2;
-      (_onExpandRef$current2 = onExpandRef.current) === null || _onExpandRef$current2 === void 0 ? void 0 : _onExpandRef$current2.call(onExpandRef, {
-        screen: 'mobile'
-      });
+      if (fg('navx-full-height-sidebar')) {
+        var _onExpandRef$current3;
+        (_onExpandRef$current3 = onExpandRef.current) === null || _onExpandRef$current3 === void 0 ? void 0 : _onExpandRef$current3.call(onExpandRef, {
+          screen: 'mobile',
+          trigger: lastTrigger
+        });
+      } else {
+        var _onExpandRef$current4;
+        (_onExpandRef$current4 = onExpandRef.current) === null || _onExpandRef$current4 === void 0 ? void 0 : _onExpandRef$current4.call(onExpandRef, {
+          screen: 'mobile'
+        });
+      }
     } else {
-      var _onCollapseRef$curren2;
-      (_onCollapseRef$curren2 = onCollapseRef.current) === null || _onCollapseRef$curren2 === void 0 ? void 0 : _onCollapseRef$curren2.call(onCollapseRef, {
-        screen: 'mobile'
-      });
+      if (fg('navx-full-height-sidebar')) {
+        var _onCollapseRef$curren3;
+        (_onCollapseRef$curren3 = onCollapseRef.current) === null || _onCollapseRef$curren3 === void 0 ? void 0 : _onCollapseRef$curren3.call(onCollapseRef, {
+          screen: 'mobile',
+          trigger: lastTrigger
+        });
+      } else {
+        var _onCollapseRef$curren4;
+        (_onCollapseRef$curren4 = onCollapseRef.current) === null || _onCollapseRef$curren4 === void 0 ? void 0 : _onCollapseRef$curren4.call(onCollapseRef, {
+          screen: 'mobile'
+        });
+      }
     }
-  }, [previousIsExpandedOnMobile, isExpandedOnMobile]);
+  }, [previousIsExpandedOnMobile, isExpandedOnMobile, lastTrigger]);
 }

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

@@ -7,9 +7,11 @@ import { SetSideNavVisibilityState } from './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.
  */
-export function useToggleSideNav() {
+export function useToggleSideNav({
+  trigger = 'programmatic'
+} = {}) {
   const setSideNavState = useContext(SetSideNavVisibilityState);
   const toggleSideNav = useCallback(() => {
     const {
@@ -25,7 +27,8 @@ export function useToggleSideNav() {
         return {
           mobile: currentState.mobile,
           desktop: currentState.desktop === 'expanded' ? 'collapsed' : 'expanded',
-          flyout: 'closed'
+          flyout: 'closed',
+          lastTrigger: trigger
         };
       });
     } else {
@@ -38,10 +41,11 @@ export 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/esm/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';
 var styles = {
   root: "_11c81vhk _1rjcu2gc _syaz131l _bozg12x7"
@@ -15,7 +16,10 @@ var styles = {
 export var MenuSectionHeading = function MenuSectionHeading(_ref) {
   var children = _ref.children;
   var id = useMenuSectionContext();
-  return /*#__PURE__*/React.createElement("h2", {
+  return fg('platform_dst_nav4_menu_section_heading_a11y') ? /*#__PURE__*/React.createElement("p", {
+    id: "".concat(id, "-heading"),
+    className: ax([styles.root])
+  }, children) : /*#__PURE__*/React.createElement("h2", {
     id: "".concat(id, "-heading"),
     className: ax([styles.root])
   }, children);

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

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

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

@@ -5,6 +5,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./side-nav.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { flushSync } from 'react-dom';
@@ -58,6 +60,7 @@ var fallbackDefaultWidth = 320;
  * context value.
  */
 function SideNavInternal(_ref) {
+  var _sideNavState$lastTri;
   var children = _ref.children,
     defaultCollapsed = _ref.defaultCollapsed,
     _ref$defaultWidth = _ref.defaultWidth,
@@ -73,7 +76,9 @@ function SideNavInternal(_ref) {
   var id = useLayoutId({
     providedId: providedId
   });
-  var expandSideNav = useExpandSideNav();
+  var 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.
    *
@@ -146,11 +151,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;
       });
@@ -162,11 +165,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;
       });
@@ -229,31 +230,53 @@ function SideNavInternal(_ref) {
       }
     };
   }, [openLayerObserver, setSideNavState]);
-  var toggleVisibility = useToggleSideNav();
+  var toggleVisibilityByScreenResize = useToggleSideNav({
+    trigger: 'screen-resize'
+  });
+  var toggleVisibilityByClickOutsideOnMobile = useToggleSideNav({
+    trigger: 'click-outside-on-mobile'
+  });
   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 = useCallback(function (_ref2) {
-    var screen = _ref2.screen;
-    onExpand === null || onExpand === void 0 || onExpand({
-      screen: screen
-    });
+    var screen = _ref2.screen,
+      trigger = _ref2.trigger;
+    if (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 = useCallback(function (_ref3) {
-    var screen = _ref3.screen;
-    onCollapse === null || onCollapse === void 0 || onCollapse({
-      screen: screen
-    });
+    var screen = _ref3.screen,
+      trigger = _ref3.trigger;
+    if (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.
@@ -263,7 +286,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
   });
   useEffect(function () {
     var mediaQueryList = window.matchMedia('(min-width: 64rem)');
@@ -274,12 +298,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.
@@ -336,10 +360,10 @@ function SideNavInternal(_ref) {
           // In either case keeping the SideNav expanded makes sense.
           return;
         }
-        toggleVisibility();
+        toggleVisibilityByClickOutsideOnMobile();
       }
     });
-  }, [id, isExpandedOnMobile, toggleButtonElement, toggleVisibility]);
+  }, [id, isExpandedOnMobile, toggleButtonElement, toggleVisibilityByClickOutsideOnMobile]);
   useEffect(function () {
     if (!toggleButtonElement) {
       return;

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

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

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

@@ -10,6 +10,9 @@ import { SetSideNavVisibilityState } from './visibility-context';
  * If you need a function to toggle the side nav, use `useToggleSideNav` instead.
  */
 export 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 = useContext(SetSideNavVisibilityState);
   var expandSideNav = useCallback(function () {
     var _window$matchMedia = window.matchMedia('(min-width: 64rem)'),
@@ -29,7 +32,8 @@ export function useExpandSideNav() {
         return {
           mobile: currentState.mobile,
           desktop: 'expanded',
-          flyout: 'closed'
+          flyout: 'closed',
+          lastTrigger: trigger
         };
       });
     } else {
@@ -47,10 +51,11 @@ export function useExpandSideNav() {
         return {
           desktop: currentState.desktop,
           mobile: 'expanded',
-          flyout: 'closed'
+          flyout: 'closed',
+          lastTrigger: trigger
         };
       });
     }
-  }, [setSideNavState]);
+  }, [setSideNavState, trigger]);
   return expandSideNav;
 }

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

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
+import { fg } from '@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.
@@ -8,7 +9,8 @@ export 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 = useRef(onExpand);
   var onCollapseRef = useRef(onCollapse);
@@ -29,17 +31,33 @@ export 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 (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 (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 = usePreviousValue(isExpandedOnMobile);
   useEffect(function () {
     if (previousIsExpandedOnMobile === undefined || previousIsExpandedOnMobile === isExpandedOnMobile) {
@@ -53,15 +71,31 @@ export 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 (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 (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/esm/ui/page-layout/side-nav/use-toggle-side-nav.js

@@ -7,9 +7,12 @@ import { SetSideNavVisibilityState } from './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.
  */
 export 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 = useContext(SetSideNavVisibilityState);
   var toggleSideNav = useCallback(function () {
     var _window$matchMedia = window.matchMedia('(min-width: 64rem)'),
@@ -24,7 +27,8 @@ export function useToggleSideNav() {
         return {
           mobile: currentState.mobile,
           desktop: currentState.desktop === 'expanded' ? 'collapsed' : 'expanded',
-          flyout: 'closed'
+          flyout: 'closed',
+          lastTrigger: trigger
         };
       });
     } else {
@@ -37,10 +41,11 @@ export 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/types/ui/page-layout/side-nav/types.d.ts

@@ -11,32 +11,51 @@ export type SideNavState = {
     desktop: 'expanded';
     mobile: 'expanded';
     flyout: 'closed';
+    lastTrigger: SideNavTrigger | null;
 } | {
     desktop: 'expanded';
     mobile: 'collapsed';
     flyout: 'closed';
+    lastTrigger: SideNavTrigger | null;
 } | {
     desktop: 'collapsed';
     mobile: 'expanded';
     flyout: 'closed';
+    lastTrigger: SideNavTrigger | null;
 } | {
     desktop: 'collapsed';
     mobile: 'expanded';
     flyout: 'open';
+    lastTrigger: SideNavTrigger | null;
 } | {
     desktop: 'collapsed';
     mobile: 'expanded';
     flyout: 'triggered-animate-close';
+    lastTrigger: SideNavTrigger | null;
 } | {
     desktop: 'collapsed';
     mobile: 'collapsed';
     flyout: 'closed';
+    lastTrigger: SideNavTrigger | null;
 } | {
     desktop: 'collapsed';
     mobile: 'collapsed';
     flyout: 'open';
+    lastTrigger: SideNavTrigger | null;
 } | {
     desktop: 'collapsed';
     mobile: 'collapsed';
     flyout: 'triggered-animate-close';
+    lastTrigger: SideNavTrigger | null;
 };
+/**
+ * The type of trigger that caused the side nav to be toggled.
+ * - `click-outside-on-mobile` - toggled by clicking outside of the side nav (mobile only)
+ * - `double-click` - toggled by double clicking on the side nav panel splitter
+ * - `keyboard` - toggled by a keyboard action
+ * - `programmatic` - toggled by a custom action, this is the default value when using the `useToggleSideNav` hook without specifying a trigger
+ * - `screen-resize` - toggled by a screen resize action
+ * - `skip-link` - toggled by a skip link action
+ * - `toggle-button` - toggled by the `SideNavToggleButton` component
+ */
+export type SideNavTrigger = 'click-outside-on-mobile' | 'double-click' | 'keyboard' | 'programmatic' | 'screen-resize' | 'skip-link' | 'toggle-button';

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

@@ -1,4 +1,8 @@
+import { type SideNavTrigger } from './types';
 type ExpandSideNav = () => void;
+type UseExpandSideNavOptions = {
+    trigger?: SideNavTrigger;
+};
 /**
  * __useExpandSideNav__
  *
@@ -8,5 +12,5 @@ type ExpandSideNav = () => void;
  *
  * If you need a function to toggle the side nav, use `useToggleSideNav` instead.
  */
-export declare function useExpandSideNav(): ExpandSideNav;
+export declare function useExpandSideNav({ trigger, }?: UseExpandSideNavOptions): ExpandSideNav;
 export {};

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

@@ -1,13 +1,16 @@
+import { type SideNavTrigger } from './types';
 export type VisibilityCallback = (args: {
     screen: 'mobile' | 'desktop';
+    trigger?: SideNavTrigger | null;
 }) => void;
 /**
  * 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.
  */
-export declare function useSideNavVisibilityCallbacks({ onExpand, onCollapse, isExpandedOnDesktop, isExpandedOnMobile, }: {
+export declare function useSideNavVisibilityCallbacks({ onExpand, onCollapse, isExpandedOnDesktop, isExpandedOnMobile, lastTrigger, }: {
     onExpand?: VisibilityCallback;
     onCollapse?: VisibilityCallback;
     isExpandedOnDesktop: boolean;
     isExpandedOnMobile: boolean;
+    lastTrigger: SideNavTrigger | null;
 }): void;

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

@@ -1,4 +1,8 @@
+import { type SideNavTrigger } from './types';
 type ToggleSideNav = () => void;
+type UseToggleSideNavOptions = {
+    trigger?: SideNavTrigger;
+};
 /**
  * __useToggleSideNav__
  *
@@ -6,7 +10,7 @@ type ToggleSideNav = () => void;
  *
  * 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.
  */
-export declare function useToggleSideNav(): ToggleSideNav;
+export declare function useToggleSideNav({ trigger, }?: UseToggleSideNavOptions): ToggleSideNav;
 export {};