@atlaskit/navigation-system 2.1.2 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlassian/navigation-system
 
+## 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
+
+- [`255837cfba315`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/255837cfba315) -
+  Internal changes to how border radius is applied.
+- Updated dependencies
+
 ## 2.1.2
 
 ### Patch Changes

package/constellation/layout/diagram.tsx

@@ -25,7 +25,7 @@ const styles = cssMap({
 		borderWidth: token('border.width'),
 		borderStyle: 'solid',
 		borderColor: token('color.border'),
-		borderRadius: token('border.radius'),
+		borderRadius: token('radius.small'),
 		backgroundColor: `linear-gradient(
       45deg,
       ${token('elevation.surface.sunken')} 25%,
@@ -61,7 +61,7 @@ const styles = cssMap({
 		borderWidth: token('border.width'),
 		borderStyle: 'solid',
 		borderColor: token('color.border'),
-		borderRadius: token('border.radius'),
+		borderRadius: token('radius.small'),
 		paddingTop: token('space.100'),
 		paddingRight: token('space.100'),
 		paddingBottom: token('space.100'),

package/dist/cjs/components/skip-links/skip-links-container.compiled.css

@@ -1,5 +1,5 @@
 
-._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._zulp1b66{gap:var(--ds-space-050,4px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
 ._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._152tv47k{inset-block-start:var(--ds-space-250,20px)}

package/dist/cjs/components/skip-links/skip-links-container.js

@@ -14,7 +14,7 @@ var _skipLinksDataContext = require("../../context/skip-links/skip-links-data-co
 var _skipLink = require("./skip-link");
 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 = {
-  root: "_zulp1b66 _2rkoglpi _1rjcutpp _18zrutpp _1e0c1txw _2lx21bp4 _kqsw1n9t _1e02v47k _152tv47k _bfhk1bhr _16qs1cd0 _1pby1mrw _tzy4idpf _lcxvglyw _1digjh3g _1mygkb7n _18eu1wug",
+  root: "_zulp1b66 _2rko12b0 _1rjcutpp _18zrutpp _1e0c1txw _2lx21bp4 _kqsw1n9t _1e02v47k _152tv47k _bfhk1bhr _16qs1cd0 _1pby1mrw _tzy4idpf _lcxvglyw _1digjh3g _1mygkb7n _18eu1wug",
   skipLinkList: "_zulp1b66 _1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t"
 };
 

package/dist/cjs/ui/menu-item/drag-and-drop/drag-preview.compiled.css

@@ -1,5 +1,5 @@
 
-._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqonqa1{border-style:solid}
 ._1h6dmuej{border-color:var(--ds-border,#091e4224)}
 ._1ul9uuw1{min-width:200px}

package/dist/cjs/ui/menu-item/drag-and-drop/drag-preview.js

@@ -26,7 +26,7 @@ function isSafari() {
   return userAgent.includes('AppleWebKit') && !userAgent.includes('Chrome');
 }
 var dragPreviewStyles = {
-  root: "_2rkoglpi _189ee4h9 _1h6dmuej _1dqonqa1 _bfhkvuon _y4ti1b66 _p12fgx0z",
+  root: "_2rko12b0 _189ee4h9 _1h6dmuej _1dqonqa1 _bfhkvuon _y4ti1b66 _p12fgx0z",
   safariFix: "_1ul9uuw1"
 };
 

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

@@ -1,6 +1,6 @@
 ._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._1r04ze3t{inset:var(--ds-space-0,0)}
-._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._nd5l16dh{grid-area:elem-after}
 ._nd5l17zh{grid-area:elem-before}
 ._nd5l19l3{grid-area:interactive}

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

@@ -37,7 +37,7 @@ var LazyDragHandle = /*#__PURE__*/(0, _react.lazy)(function () {
   });
 });
 var tooltipStyles = {
-  root: "_2rkoglpi _11c8dcr7 _1e0c1txw _2lx21bp4 _1bah1h6o _1tkezwfg _p12f1pna _vchhusvi _1q51v77o _y4ti12x7 _85i5v77o _bozg12x7 _bfhkcdhy _syaz15cr _152tze3t _1e02ze3t _1i4q1hna _slp31hna"
+  root: "_2rko12b0 _11c8dcr7 _1e0c1txw _2lx21bp4 _1bah1h6o _1tkezwfg _p12f1pna _vchhusvi _1q51v77o _y4ti12x7 _85i5v77o _bozg12x7 _bfhkcdhy _syaz15cr _152tze3t _1e02ze3t _1i4q1hna _slp31hna"
 };
 var MenuItemTooltip = /*#__PURE__*/(0, _react.forwardRef)(function MenuItemTooltip(_ref, ref) {
   var children = _ref.children,
@@ -151,7 +151,7 @@ var onTopOfButtonOrAnchorStyles = {
  */
 var nestedOpenPopupCSSSelector = exports.nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
 var containerStyles = {
-  root: "_2rkoglpi _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syaz1gjq _1yyu1j28 _91ju1txw _1swv108i _irr3108i",
+  root: "_2rko12b0 _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syaz1gjq _1yyu1j28 _91ju1txw _1swv108i _irr3108i",
   actionsOnHoverFocusFixEnabled: "_uomdidpf _pmxpidpf _db80idpf _qxq9kb7n _1rbv1wug _kwq51b66 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
   actionsOnHoverFocusFixDisabled: "_ek6gglyw _1ojv1txw _1brr1txw _109x1txw",
   removeElemAfter: "_91juglyw",
@@ -164,7 +164,7 @@ var containerStyles = {
   dragging: "_tzy41ou4"
 };
 var buttonOrAnchorStyles = {
-  root: "_2rkoglpi _yyhyjvu9 _1ii7kb7n _1e0c11p5 _yv0enbh3 _2z05nbh3 _y4ti1b66 _bozg1b66 _1q511b66 _85i51b66 _bfhk1j28 _syaz1gjq _4cvr1h6o _y3gnv2br _14iu1ji5",
+  root: "_2rko12b0 _yyhyjvu9 _1ii7kb7n _1e0c11p5 _yv0enbh3 _2z05nbh3 _y4ti1b66 _bozg1b66 _1q511b66 _85i51b66 _bfhk1j28 _syaz1gjq _4cvr1h6o _y3gnv2br _14iu1ji5",
   selected: "_syazaqb7 _14iu19ru",
   hasDragIndicator: "_1ifmglyw _1cykglyw _x0kw1txw _11om6b4r _7psyru3m _1uy01amc _bir2q7pw"
 };

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/components/skip-links/skip-links-container.compiled.css

@@ -1,5 +1,5 @@
 
-._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._zulp1b66{gap:var(--ds-space-050,4px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
 ._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._152tv47k{inset-block-start:var(--ds-space-250,20px)}

package/dist/es2019/components/skip-links/skip-links-container.js

@@ -6,7 +6,7 @@ import { Text } from '@atlaskit/primitives/compiled';
 import { useSortedSkipLinks } from '../../context/skip-links/skip-links-data-context';
 import { SkipLink } from './skip-link';
 const styles = {
-  root: "_zulp1b66 _2rkoglpi _1rjcutpp _18zrutpp _1e0c1txw _2lx21bp4 _kqsw1n9t _1e02v47k _152tv47k _bfhk1bhr _16qs1cd0 _1pby1mrw _tzy4idpf _lcxvglyw _1digjh3g _1mygkb7n _18eu1wug",
+  root: "_zulp1b66 _2rko12b0 _1rjcutpp _18zrutpp _1e0c1txw _2lx21bp4 _kqsw1n9t _1e02v47k _152tv47k _bfhk1bhr _16qs1cd0 _1pby1mrw _tzy4idpf _lcxvglyw _1digjh3g _1mygkb7n _18eu1wug",
   skipLinkList: "_zulp1b66 _1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t"
 };
 

package/dist/es2019/ui/menu-item/drag-and-drop/drag-preview.compiled.css

@@ -1,5 +1,5 @@
 
-._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqonqa1{border-style:solid}
 ._1h6dmuej{border-color:var(--ds-border,#091e4224)}
 ._1ul9uuw1{min-width:200px}

package/dist/es2019/ui/menu-item/drag-and-drop/drag-preview.js

@@ -20,7 +20,7 @@ function isSafari() {
   return userAgent.includes('AppleWebKit') && !userAgent.includes('Chrome');
 }
 const dragPreviewStyles = {
-  root: "_2rkoglpi _189ee4h9 _1h6dmuej _1dqonqa1 _bfhkvuon _y4ti1b66 _p12fgx0z",
+  root: "_2rko12b0 _189ee4h9 _1h6dmuej _1dqonqa1 _bfhkvuon _y4ti1b66 _p12fgx0z",
   safariFix: "_1ul9uuw1"
 };
 

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

@@ -1,6 +1,6 @@
 ._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._1r04ze3t{inset:var(--ds-space-0,0)}
-._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._nd5l16dh{grid-area:elem-after}
 ._nd5l17zh{grid-area:elem-before}
 ._nd5l19l3{grid-area:interactive}

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

@@ -19,7 +19,7 @@ import { COLLAPSE_ELEM_BEFORE } from './menu-item-signals';
 const LazyDragHandle = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-internal_nav4-menu-item-drag-handle" */
 './drag-handle'));
 const tooltipStyles = {
-  root: "_2rkoglpi _11c8dcr7 _1e0c1txw _2lx21bp4 _1bah1h6o _1tkezwfg _p12f1pna _vchhusvi _1q51v77o _y4ti12x7 _85i5v77o _bozg12x7 _bfhkcdhy _syaz15cr _152tze3t _1e02ze3t _1i4q1hna _slp31hna"
+  root: "_2rko12b0 _11c8dcr7 _1e0c1txw _2lx21bp4 _1bah1h6o _1tkezwfg _p12f1pna _vchhusvi _1q51v77o _y4ti12x7 _85i5v77o _bozg12x7 _bfhkcdhy _syaz15cr _152tze3t _1e02ze3t _1i4q1hna _slp31hna"
 };
 const MenuItemTooltip = /*#__PURE__*/forwardRef(function MenuItemTooltip({
   children,
@@ -134,7 +134,7 @@ const onTopOfButtonOrAnchorStyles = {
  */
 export const nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
 const containerStyles = {
-  root: "_2rkoglpi _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syaz1gjq _1yyu1j28 _91ju1txw _1swv108i _irr3108i",
+  root: "_2rko12b0 _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syaz1gjq _1yyu1j28 _91ju1txw _1swv108i _irr3108i",
   actionsOnHoverFocusFixEnabled: "_uomdidpf _pmxpidpf _db80idpf _qxq9kb7n _1rbv1wug _kwq51b66 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
   actionsOnHoverFocusFixDisabled: "_ek6gglyw _1ojv1txw _1brr1txw _109x1txw",
   removeElemAfter: "_91juglyw",
@@ -147,7 +147,7 @@ const containerStyles = {
   dragging: "_tzy41ou4"
 };
 const buttonOrAnchorStyles = {
-  root: "_2rkoglpi _yyhyjvu9 _1ii7kb7n _1e0c11p5 _yv0enbh3 _2z05nbh3 _y4ti1b66 _bozg1b66 _1q511b66 _85i51b66 _bfhk1j28 _syaz1gjq _4cvr1h6o _y3gnv2br _14iu1ji5",
+  root: "_2rko12b0 _yyhyjvu9 _1ii7kb7n _1e0c11p5 _yv0enbh3 _2z05nbh3 _y4ti1b66 _bozg1b66 _1q511b66 _85i51b66 _bfhk1j28 _syaz1gjq _4cvr1h6o _y3gnv2br _14iu1ji5",
   selected: "_syazaqb7 _14iu19ru",
   hasDragIndicator: "_1ifmglyw _1cykglyw _x0kw1txw _11om6b4r _7psyru3m _1uy01amc _bir2q7pw"
 };

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, {