@atlaskit/navigation-system 4.3.0 → 4.5.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlassian/navigation-system
 
+## 4.5.0
+
+### Minor Changes
+
+- [`8a71ce992f8c8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8a71ce992f8c8) -
+  `SideNav` now provides a built-in keyboard shortcut for expanding and collapsing. This is behind
+  the feature gate `navx-full-height-sidebar`.
+  - The shortcut key is `Ctrl` + `[`.
+  - The shortcut is not enabled by default.
+  - The prop `isSideNavShortcutEnabled` has been added to `Root`, as a way to control whether the
+    shortcut is enabled (whether the keyboard event listener is binded). It defaults to `false`.
+  - The prop `canToggleWithShortcut()` has been added to `SideNav`, as a way to run additional
+    checks after the shortcut is pressed, before the side nav is toggled.
+  - The shortcut will also be ignored if there are any open modals. This check is behind the feature
+    gate `platform-dst-open-layer-observer-layer-type`.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.4.0
+
+### Minor Changes
+
+- [`327d6a06eebb2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/327d6a06eebb2) -
+  Adds `onPeekStart` and `onPeekEnd` callbacks to the `SideNav` to use for monitoring when users
+  peek at the side navigation when it is collapsed.
+
 ## 4.3.0
 
 ### Minor Changes

package/dist/cjs/ui/page-layout/root.js

@@ -15,6 +15,7 @@ var _skipLinksProvider = require("../../context/skip-links/skip-links-provider")
 var _topNavStartContextProvider = require("../../context/top-nav-start/top-nav-start-context-provider");
 var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
 var _elementContext = require("./side-nav/element-context");
+var _isSideNavShortcutEnabledContext = require("./side-nav/is-side-nav-shortcut-enabled-context");
 var _toggleButtonProvider = require("./side-nav/toggle-button-provider");
 var _visibilityProvider = require("./side-nav/visibility-provider");
 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); }
@@ -36,7 +37,9 @@ function Root(_ref) {
     _ref$skipLinksLabel = _ref.skipLinksLabel,
     skipLinksLabel = _ref$skipLinksLabel === void 0 ? 'Skip to:' : _ref$skipLinksLabel,
     testId = _ref.testId,
-    defaultSideNavCollapsed = _ref.defaultSideNavCollapsed;
+    defaultSideNavCollapsed = _ref.defaultSideNavCollapsed,
+    _ref$isSideNavShortcu = _ref.isSideNavShortcutEnabled,
+    isSideNavShortcutEnabled = _ref$isSideNavShortcu === void 0 ? false : _ref$isSideNavShortcu;
   var ref = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     if (process.env.NODE_ENV !== 'production') {
@@ -53,7 +56,9 @@ function Root(_ref) {
   }, []);
   return /*#__PURE__*/_react.default.createElement(_visibilityProvider.SideNavVisibilityProvider, {
     defaultCollapsed: defaultSideNavCollapsed
-  }, /*#__PURE__*/_react.default.createElement(_toggleButtonProvider.SideNavToggleButtonProvider, null, /*#__PURE__*/_react.default.createElement(_elementContext.SideNavElementProvider, null, /*#__PURE__*/_react.default.createElement(_topNavStartContextProvider.TopNavStartProvider, null, /*#__PURE__*/_react.default.createElement(_openLayerObserver.OpenLayerObserver, null, /*#__PURE__*/_react.default.createElement(_hoistSlotSizesContext.DangerouslyHoistSlotSizes.Provider, {
+  }, /*#__PURE__*/_react.default.createElement(_toggleButtonProvider.SideNavToggleButtonProvider, null, /*#__PURE__*/_react.default.createElement(_elementContext.SideNavElementProvider, null, /*#__PURE__*/_react.default.createElement(_isSideNavShortcutEnabledContext.IsSideNavShortcutEnabledProvider, {
+    isSideNavShortcutEnabled: isSideNavShortcutEnabled
+  }, /*#__PURE__*/_react.default.createElement(_topNavStartContextProvider.TopNavStartProvider, null, /*#__PURE__*/_react.default.createElement(_openLayerObserver.OpenLayerObserver, null, /*#__PURE__*/_react.default.createElement(_hoistSlotSizesContext.DangerouslyHoistSlotSizes.Provider, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/_react.default.createElement(_skipLinksProvider.SkipLinksProvider, {
     label: skipLinksLabel,
@@ -63,5 +68,5 @@ function Root(_ref) {
     className: (0, _runtime.ax)([styles.root, xcss]),
     id: gridRootId,
     "data-testid": testId
-  }, children))))))));
+  }, children)))))))));
 }

package/dist/cjs/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-context.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IsSideNavShortcutEnabledProvider = IsSideNavShortcutEnabledProvider;
+exports.useIsSideNavShortcutEnabled = useIsSideNavShortcutEnabled;
+var _react = _interopRequireWildcard(require("react"));
+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); }
+/**
+ * Context for whether the side nav toggle shortcut is enabled.
+ *
+ * Used to share the `isSideNavShortcutEnabled` prop value from `Root` with other components,
+ * so the visual keyboard shortcut in tooltips can be conditionally displayed.
+ */
+var IsSideNavShortcutEnabledContext = /*#__PURE__*/(0, _react.createContext)(false);
+
+/**
+ * Provider for the `IsSideNavShortcutEnabledContext`.
+ */
+function IsSideNavShortcutEnabledProvider(_ref) {
+  var children = _ref.children,
+    isSideNavShortcutEnabled = _ref.isSideNavShortcutEnabled;
+  return /*#__PURE__*/_react.default.createElement(IsSideNavShortcutEnabledContext.Provider, {
+    value: isSideNavShortcutEnabled
+  }, children);
+}
+
+/**
+ * Returns the value of the `isSideNavShortcutEnabled` prop from the `Root` component, which
+ * is shared through context.
+ */
+function useIsSideNavShortcutEnabled() {
+  return (0, _react.useContext)(IsSideNavShortcutEnabledContext);
+}

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SideNav = SideNav;
+exports.onPeekStartDelayMs = void 0;
 require("./side-nav.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
@@ -17,6 +18,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _bindEventListener = require("bind-event-listener");
 var _reactDom = require("react-dom");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
@@ -34,6 +36,7 @@ var _elementContext = require("./element-context");
 var _flyoutCloseDelayMs = require("./flyout-close-delay-ms");
 var _toggleButtonContext = require("./toggle-button-context");
 var _useExpandSideNav = require("./use-expand-side-nav");
+var _useSideNavToggleKeyboardShortcut = require("./use-side-nav-toggle-keyboard-shortcut");
 var _useSideNavVisibility2 = require("./use-side-nav-visibility");
 var _useSideNavVisibilityCallbacks = require("./use-side-nav-visibility-callbacks");
 var _useToggleSideNav = require("./use-toggle-side-nav");
@@ -77,6 +80,7 @@ var styles = {
   fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
 };
 var fallbackDefaultWidth = 320;
+var onPeekStartDelayMs = exports.onPeekStartDelayMs = 500;
 
 /**
  * We need an additional component layer so we can wrap the side nav in a `OpenLayerObserver` and have access to the
@@ -95,7 +99,10 @@ function SideNavInternal(_ref) {
     skipLinkLabel = _ref$skipLinkLabel === void 0 ? label : _ref$skipLinkLabel,
     onExpand = _ref.onExpand,
     onCollapse = _ref.onCollapse,
-    providedId = _ref.id;
+    onPeekStart = _ref.onPeekStart,
+    onPeekEnd = _ref.onPeekEnd,
+    providedId = _ref.id,
+    canToggleWithShortcut = _ref.canToggleWithShortcut;
   var id = (0, _idUtils.useLayoutId)({
     providedId: providedId
   });
@@ -161,6 +168,16 @@ function SideNavInternal(_ref) {
     type: 'not-active'
   });
   var isFlyoutVisible = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open';
+  var isExpandedOnDesktopRef = (0, _useStableRef.default)(isExpandedOnDesktop);
+  var hasPeekStartedRef = (0, _react.useRef)(false);
+  var onPeekStartRef = (0, _useStableRef.default)(onPeekStart);
+  var onPeekEndRef = (0, _useStableRef.default)(onPeekEnd);
+  var onPeekStartTimeoutIdRef = (0, _react.useRef)(undefined);
+  (0, _react.useEffect)(function () {
+    return function () {
+      clearTimeout(onPeekStartTimeoutIdRef.current);
+    };
+  }, []);
   var updateFlyoutState = (0, _react.useMemo)(function () {
     function tryAbortPendingClose() {
       if (flyoutStateRef.current.type === 'waiting-for-close') {
@@ -168,6 +185,7 @@ function SideNavInternal(_ref) {
       }
     }
     function open() {
+      var prevFlyoutState = flyoutStateRef.current;
       tryAbortPendingClose();
       flyoutStateRef.current = {
         type: 'open'
@@ -180,8 +198,24 @@ function SideNavInternal(_ref) {
         }
         return currentState;
       });
+
+      // Avoid redundant calls to `onPeekStart()`
+      if (prevFlyoutState.type === 'not-active') {
+        clearTimeout(onPeekStartTimeoutIdRef.current);
+        onPeekStartTimeoutIdRef.current = setTimeout(function () {
+          var _onPeekStartRef$curre;
+          // If the flyout isn't still open after ~500ms then we won't count the peek
+          // As we want to track user intention rather than all hovers
+          if (isExpandedOnDesktopRef.current || flyoutStateRef.current.type !== 'open') {
+            return;
+          }
+          hasPeekStartedRef.current = true;
+          (_onPeekStartRef$curre = onPeekStartRef.current) === null || _onPeekStartRef$curre === void 0 || _onPeekStartRef$curre.call(onPeekStartRef);
+        }, onPeekStartDelayMs);
+      }
     }
     function close() {
+      var prevFlyoutState = flyoutStateRef.current;
       tryAbortPendingClose();
       flyoutStateRef.current = {
         type: 'not-active'
@@ -194,6 +228,15 @@ function SideNavInternal(_ref) {
         }
         return currentState;
       });
+
+      // Avoid redundant calls to `onPeekEnd()`
+      if (prevFlyoutState.type !== 'not-active' && hasPeekStartedRef.current) {
+        var _onPeekEndRef$current;
+        hasPeekStartedRef.current = false;
+        (_onPeekEndRef$current = onPeekEndRef.current) === null || _onPeekEndRef$current === void 0 || _onPeekEndRef$current.call(onPeekEndRef, {
+          trigger: isExpandedOnDesktopRef.current ? 'side-nav-expand' : 'mouse-leave'
+        });
+      }
     }
     return function onAction(action) {
       if (action === 'drag-from-flyout-started') {
@@ -252,7 +295,7 @@ function SideNavInternal(_ref) {
         return;
       }
     };
-  }, [openLayerObserver, setSideNavState]);
+  }, [isExpandedOnDesktopRef, onPeekEndRef, onPeekStartRef, openLayerObserver, setSideNavState]);
   var toggleVisibilityByScreenResize = (0, _useToggleSideNav.useToggleSideNav)({
     trigger: 'screen-resize'
   });
@@ -604,6 +647,9 @@ function SideNavInternal(_ref) {
     }
     devTimeOnlyAttributes['data-visible'] = visible.length ? visible.join(',') : 'false';
   }
+  (0, _useSideNavToggleKeyboardShortcut.useSideNavToggleKeyboardShortcut)({
+    canToggleWithShortcut: canToggleWithShortcut
+  });
   (0, _useResizingWidthCssVarOnRootElement.useResizingWidthCssVarOnRootElement)({
     isEnabled: true,
     cssVar: panelSplitterResizingVar,
@@ -703,6 +749,9 @@ function SideNav(_ref8) {
     skipLinkLabel = _ref8$skipLinkLabel === void 0 ? label : _ref8$skipLinkLabel,
     onExpand = _ref8.onExpand,
     onCollapse = _ref8.onCollapse,
+    onPeekStart = _ref8.onPeekStart,
+    onPeekEnd = _ref8.onPeekEnd,
+    canToggleWithShortcut = _ref8.canToggleWithShortcut,
     id = _ref8.id;
   return /*#__PURE__*/React.createElement(_openLayerObserver.OpenLayerObserverNamespaceProvider, {
     namespace: openLayerObserverSideNavNamespace
@@ -714,6 +763,9 @@ function SideNav(_ref8) {
     skipLinkLabel: skipLinkLabel,
     onExpand: onExpand,
     onCollapse: onCollapse,
-    id: id
+    onPeekStart: onPeekStart,
+    onPeekEnd: onPeekEnd,
+    id: id,
+    canToggleWithShortcut: canToggleWithShortcut
   }, children));
 }

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

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSideNavToggleKeyboardShortcut = useSideNavToggleKeyboardShortcut;
+var _react = require("react");
+var _bindEventListener = require("bind-event-listener");
+var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
+var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _isSideNavShortcutEnabledContext = require("./is-side-nav-shortcut-enabled-context");
+var _useToggleSideNav = require("./use-toggle-side-nav");
+/**
+ * Binds the keyboard shortcut to toggle the side nav.
+ */
+function useSideNavToggleKeyboardShortcut(_ref) {
+  var canToggleWithShortcut = _ref.canToggleWithShortcut;
+  var openLayerObserver = (0, _openLayerObserver.useOpenLayerObserver)();
+  var toggleVisibilityByShortcut = (0, _useToggleSideNav.useToggleSideNav)({
+    trigger: 'keyboard'
+  });
+  var canToggleWithShortcutStableRef = (0, _useStableRef.default)(canToggleWithShortcut);
+  var isSideNavShortcutEnabled = (0, _isSideNavShortcutEnabledContext.useIsSideNavShortcutEnabled)();
+  (0, _react.useEffect)(function () {
+    if (!(0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+      return;
+    }
+    if (!isSideNavShortcutEnabled) {
+      return;
+    }
+    return (0, _bindEventListener.bind)(window, {
+      type: 'keydown',
+      listener: function listener(event) {
+        if (event.ctrlKey && event.key === '[') {
+          if (canToggleWithShortcutStableRef.current && !canToggleWithShortcutStableRef.current()) {
+            // Return early if the callback returns false.
+            // If the callback is not provided, we assume the shortcut is enabled.
+            return;
+          }
+          if (event.repeat) {
+            // Ignore repeated keydown events from holding down the keys
+            return;
+          }
+          if (openLayerObserver.getCount({
+            type: 'modal'
+          }) > 0 && (0, _platformFeatureFlags.fg)('platform-dst-open-layer-observer-layer-type')) {
+            // Return early if there are any open modals
+            // This check is behind the layer type FG, as `getCount` will return the count of all layers when
+            // the FG is disabled - meaning we would ignore the shortcut if there is any open layer (not just modals).
+            return;
+          }
+          toggleVisibilityByShortcut();
+        }
+      }
+    });
+  }, [canToggleWithShortcutStableRef, openLayerObserver, toggleVisibilityByShortcut, isSideNavShortcutEnabled]);
+}

package/dist/es2019/ui/page-layout/root.js

@@ -7,6 +7,7 @@ import { SkipLinksProvider } from '../../context/skip-links/skip-links-provider'
 import { TopNavStartProvider } from '../../context/top-nav-start/top-nav-start-context-provider';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
 import { SideNavElementProvider } from './side-nav/element-context';
+import { IsSideNavShortcutEnabledProvider } from './side-nav/is-side-nav-shortcut-enabled-context';
 import { SideNavToggleButtonProvider } from './side-nav/toggle-button-provider';
 import { SideNavVisibilityProvider } from './side-nav/visibility-provider';
 
@@ -26,7 +27,8 @@ export function Root({
   UNSAFE_dangerouslyHoistSlotSizes = false,
   skipLinksLabel = 'Skip to:',
   testId,
-  defaultSideNavCollapsed
+  defaultSideNavCollapsed,
+  isSideNavShortcutEnabled = false
 }) {
   const ref = useRef(null);
   useEffect(() => {
@@ -53,7 +55,9 @@ This message will not be displayed in production.
   }, []);
   return /*#__PURE__*/React.createElement(SideNavVisibilityProvider, {
     defaultCollapsed: defaultSideNavCollapsed
-  }, /*#__PURE__*/React.createElement(SideNavToggleButtonProvider, null, /*#__PURE__*/React.createElement(SideNavElementProvider, null, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
+  }, /*#__PURE__*/React.createElement(SideNavToggleButtonProvider, null, /*#__PURE__*/React.createElement(SideNavElementProvider, null, /*#__PURE__*/React.createElement(IsSideNavShortcutEnabledProvider, {
+    isSideNavShortcutEnabled: isSideNavShortcutEnabled
+  }, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/React.createElement(SkipLinksProvider, {
     label: skipLinksLabel,
@@ -63,5 +67,5 @@ This message will not be displayed in production.
     className: ax([styles.root, xcss]),
     id: gridRootId,
     "data-testid": testId
-  }, children))))))));
+  }, children)))))))));
 }

package/dist/es2019/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-context.js

@@ -0,0 +1,29 @@
+import React, { createContext, useContext } from 'react';
+
+/**
+ * Context for whether the side nav toggle shortcut is enabled.
+ *
+ * Used to share the `isSideNavShortcutEnabled` prop value from `Root` with other components,
+ * so the visual keyboard shortcut in tooltips can be conditionally displayed.
+ */
+const IsSideNavShortcutEnabledContext = /*#__PURE__*/createContext(false);
+
+/**
+ * Provider for the `IsSideNavShortcutEnabledContext`.
+ */
+export function IsSideNavShortcutEnabledProvider({
+  children,
+  isSideNavShortcutEnabled
+}) {
+  return /*#__PURE__*/React.createElement(IsSideNavShortcutEnabledContext.Provider, {
+    value: isSideNavShortcutEnabled
+  }, children);
+}
+
+/**
+ * Returns the value of the `isSideNavShortcutEnabled` prop from the `Root` component, which
+ * is shared through context.
+ */
+export function useIsSideNavShortcutEnabled() {
+  return useContext(IsSideNavShortcutEnabledContext);
+}

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

@@ -7,6 +7,7 @@ import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, u
 import { bind } from 'bind-event-listener';
 import { flushSync } from 'react-dom';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { OpenLayerObserverNamespaceProvider, useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
@@ -24,6 +25,7 @@ import { useSideNavRef } from './element-context';
 import { sideNavFlyoutCloseDelayMs } from './flyout-close-delay-ms';
 import { SideNavToggleButtonElement } from './toggle-button-context';
 import { useExpandSideNav } from './use-expand-side-nav';
+import { useSideNavToggleKeyboardShortcut } from './use-side-nav-toggle-keyboard-shortcut';
 import { useSideNavVisibility } from './use-side-nav-visibility';
 import { useSideNavVisibilityCallbacks } from './use-side-nav-visibility-callbacks';
 import { useToggleSideNav } from './use-toggle-side-nav';
@@ -64,6 +66,7 @@ const styles = {
   fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
 };
 const fallbackDefaultWidth = 320;
+export const onPeekStartDelayMs = 500;
 
 /**
  * We need an additional component layer so we can wrap the side nav in a `OpenLayerObserver` and have access to the
@@ -78,7 +81,10 @@ function SideNavInternal({
   skipLinkLabel = label,
   onExpand,
   onCollapse,
-  id: providedId
+  onPeekStart,
+  onPeekEnd,
+  id: providedId,
+  canToggleWithShortcut
 }) {
   var _sideNavState$lastTri;
   const id = useLayoutId({
@@ -142,6 +148,16 @@ function SideNavInternal({
     type: 'not-active'
   });
   const isFlyoutVisible = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open';
+  const isExpandedOnDesktopRef = useStableRef(isExpandedOnDesktop);
+  const hasPeekStartedRef = useRef(false);
+  const onPeekStartRef = useStableRef(onPeekStart);
+  const onPeekEndRef = useStableRef(onPeekEnd);
+  const onPeekStartTimeoutIdRef = useRef(undefined);
+  useEffect(() => {
+    return () => {
+      clearTimeout(onPeekStartTimeoutIdRef.current);
+    };
+  }, []);
   const updateFlyoutState = useMemo(() => {
     function tryAbortPendingClose() {
       if (flyoutStateRef.current.type === 'waiting-for-close') {
@@ -149,6 +165,7 @@ function SideNavInternal({
       }
     }
     function open() {
+      const prevFlyoutState = flyoutStateRef.current;
       tryAbortPendingClose();
       flyoutStateRef.current = {
         type: 'open'
@@ -162,8 +179,24 @@ function SideNavInternal({
         }
         return currentState;
       });
+
+      // Avoid redundant calls to `onPeekStart()`
+      if (prevFlyoutState.type === 'not-active') {
+        clearTimeout(onPeekStartTimeoutIdRef.current);
+        onPeekStartTimeoutIdRef.current = setTimeout(() => {
+          var _onPeekStartRef$curre;
+          // If the flyout isn't still open after ~500ms then we won't count the peek
+          // As we want to track user intention rather than all hovers
+          if (isExpandedOnDesktopRef.current || flyoutStateRef.current.type !== 'open') {
+            return;
+          }
+          hasPeekStartedRef.current = true;
+          (_onPeekStartRef$curre = onPeekStartRef.current) === null || _onPeekStartRef$curre === void 0 ? void 0 : _onPeekStartRef$curre.call(onPeekStartRef);
+        }, onPeekStartDelayMs);
+      }
     }
     function close() {
+      const prevFlyoutState = flyoutStateRef.current;
       tryAbortPendingClose();
       flyoutStateRef.current = {
         type: 'not-active'
@@ -177,6 +210,15 @@ function SideNavInternal({
         }
         return currentState;
       });
+
+      // Avoid redundant calls to `onPeekEnd()`
+      if (prevFlyoutState.type !== 'not-active' && hasPeekStartedRef.current) {
+        var _onPeekEndRef$current;
+        hasPeekStartedRef.current = false;
+        (_onPeekEndRef$current = onPeekEndRef.current) === null || _onPeekEndRef$current === void 0 ? void 0 : _onPeekEndRef$current.call(onPeekEndRef, {
+          trigger: isExpandedOnDesktopRef.current ? 'side-nav-expand' : 'mouse-leave'
+        });
+      }
     }
     return function onAction(action) {
       if (action === 'drag-from-flyout-started') {
@@ -235,7 +277,7 @@ function SideNavInternal({
         return;
       }
     };
-  }, [openLayerObserver, setSideNavState]);
+  }, [isExpandedOnDesktopRef, onPeekEndRef, onPeekStartRef, openLayerObserver, setSideNavState]);
   const toggleVisibilityByScreenResize = useToggleSideNav({
     trigger: 'screen-resize'
   });
@@ -593,6 +635,9 @@ function SideNavInternal({
     }
     devTimeOnlyAttributes['data-visible'] = visible.length ? visible.join(',') : 'false';
   }
+  useSideNavToggleKeyboardShortcut({
+    canToggleWithShortcut
+  });
   useResizingWidthCssVarOnRootElement({
     isEnabled: true,
     cssVar: panelSplitterResizingVar,
@@ -695,6 +740,9 @@ export function SideNav({
   // Default value is defined in `SideNavInternal`
   onExpand,
   onCollapse,
+  onPeekStart,
+  onPeekEnd,
+  canToggleWithShortcut,
   id
 }) {
   return /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
@@ -707,6 +755,9 @@ export function SideNav({
     skipLinkLabel: skipLinkLabel,
     onExpand: onExpand,
     onCollapse: onCollapse,
-    id: id
+    onPeekStart: onPeekStart,
+    onPeekEnd: onPeekEnd,
+    id: id,
+    canToggleWithShortcut: canToggleWithShortcut
   }, children));
 }

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

@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+import { bind } from 'bind-event-listener';
+import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
+import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useIsSideNavShortcutEnabled } from './is-side-nav-shortcut-enabled-context';
+import { useToggleSideNav } from './use-toggle-side-nav';
+
+/**
+ * Binds the keyboard shortcut to toggle the side nav.
+ */
+export function useSideNavToggleKeyboardShortcut({
+  canToggleWithShortcut
+}) {
+  const openLayerObserver = useOpenLayerObserver();
+  const toggleVisibilityByShortcut = useToggleSideNav({
+    trigger: 'keyboard'
+  });
+  const canToggleWithShortcutStableRef = useStableRef(canToggleWithShortcut);
+  const isSideNavShortcutEnabled = useIsSideNavShortcutEnabled();
+  useEffect(() => {
+    if (!fg('navx-full-height-sidebar')) {
+      return;
+    }
+    if (!isSideNavShortcutEnabled) {
+      return;
+    }
+    return bind(window, {
+      type: 'keydown',
+      listener(event) {
+        if (event.ctrlKey && event.key === '[') {
+          if (canToggleWithShortcutStableRef.current && !canToggleWithShortcutStableRef.current()) {
+            // Return early if the callback returns false.
+            // If the callback is not provided, we assume the shortcut is enabled.
+            return;
+          }
+          if (event.repeat) {
+            // Ignore repeated keydown events from holding down the keys
+            return;
+          }
+          if (openLayerObserver.getCount({
+            type: 'modal'
+          }) > 0 && fg('platform-dst-open-layer-observer-layer-type')) {
+            // Return early if there are any open modals
+            // This check is behind the layer type FG, as `getCount` will return the count of all layers when
+            // the FG is disabled - meaning we would ignore the shortcut if there is any open layer (not just modals).
+            return;
+          }
+          toggleVisibilityByShortcut();
+        }
+      }
+    });
+  }, [canToggleWithShortcutStableRef, openLayerObserver, toggleVisibilityByShortcut, isSideNavShortcutEnabled]);
+}

package/dist/esm/ui/page-layout/root.js

@@ -7,6 +7,7 @@ import { SkipLinksProvider } from '../../context/skip-links/skip-links-provider'
 import { TopNavStartProvider } from '../../context/top-nav-start/top-nav-start-context-provider';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
 import { SideNavElementProvider } from './side-nav/element-context';
+import { IsSideNavShortcutEnabledProvider } from './side-nav/is-side-nav-shortcut-enabled-context';
 import { SideNavToggleButtonProvider } from './side-nav/toggle-button-provider';
 import { SideNavVisibilityProvider } from './side-nav/visibility-provider';
 
@@ -28,7 +29,9 @@ export function Root(_ref) {
     _ref$skipLinksLabel = _ref.skipLinksLabel,
     skipLinksLabel = _ref$skipLinksLabel === void 0 ? 'Skip to:' : _ref$skipLinksLabel,
     testId = _ref.testId,
-    defaultSideNavCollapsed = _ref.defaultSideNavCollapsed;
+    defaultSideNavCollapsed = _ref.defaultSideNavCollapsed,
+    _ref$isSideNavShortcu = _ref.isSideNavShortcutEnabled,
+    isSideNavShortcutEnabled = _ref$isSideNavShortcu === void 0 ? false : _ref$isSideNavShortcu;
   var ref = useRef(null);
   useEffect(function () {
     if (process.env.NODE_ENV !== 'production') {
@@ -45,7 +48,9 @@ export function Root(_ref) {
   }, []);
   return /*#__PURE__*/React.createElement(SideNavVisibilityProvider, {
     defaultCollapsed: defaultSideNavCollapsed
-  }, /*#__PURE__*/React.createElement(SideNavToggleButtonProvider, null, /*#__PURE__*/React.createElement(SideNavElementProvider, null, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
+  }, /*#__PURE__*/React.createElement(SideNavToggleButtonProvider, null, /*#__PURE__*/React.createElement(SideNavElementProvider, null, /*#__PURE__*/React.createElement(IsSideNavShortcutEnabledProvider, {
+    isSideNavShortcutEnabled: isSideNavShortcutEnabled
+  }, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/React.createElement(SkipLinksProvider, {
     label: skipLinksLabel,
@@ -55,5 +60,5 @@ export function Root(_ref) {
     className: ax([styles.root, xcss]),
     id: gridRootId,
     "data-testid": testId
-  }, children))))))));
+  }, children)))))))));
 }

package/dist/esm/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-context.js

@@ -0,0 +1,28 @@
+import React, { createContext, useContext } from 'react';
+
+/**
+ * Context for whether the side nav toggle shortcut is enabled.
+ *
+ * Used to share the `isSideNavShortcutEnabled` prop value from `Root` with other components,
+ * so the visual keyboard shortcut in tooltips can be conditionally displayed.
+ */
+var IsSideNavShortcutEnabledContext = /*#__PURE__*/createContext(false);
+
+/**
+ * Provider for the `IsSideNavShortcutEnabledContext`.
+ */
+export function IsSideNavShortcutEnabledProvider(_ref) {
+  var children = _ref.children,
+    isSideNavShortcutEnabled = _ref.isSideNavShortcutEnabled;
+  return /*#__PURE__*/React.createElement(IsSideNavShortcutEnabledContext.Provider, {
+    value: isSideNavShortcutEnabled
+  }, children);
+}
+
+/**
+ * Returns the value of the `isSideNavShortcutEnabled` prop from the `Root` component, which
+ * is shared through context.
+ */
+export function useIsSideNavShortcutEnabled() {
+  return useContext(IsSideNavShortcutEnabledContext);
+}

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

@@ -11,6 +11,7 @@ import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, u
 import { bind } from 'bind-event-listener';
 import { flushSync } from 'react-dom';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { OpenLayerObserverNamespaceProvider, useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
@@ -28,6 +29,7 @@ import { useSideNavRef } from './element-context';
 import { sideNavFlyoutCloseDelayMs } from './flyout-close-delay-ms';
 import { SideNavToggleButtonElement } from './toggle-button-context';
 import { useExpandSideNav } from './use-expand-side-nav';
+import { useSideNavToggleKeyboardShortcut } from './use-side-nav-toggle-keyboard-shortcut';
 import { useSideNavVisibility } from './use-side-nav-visibility';
 import { useSideNavVisibilityCallbacks } from './use-side-nav-visibility-callbacks';
 import { useToggleSideNav } from './use-toggle-side-nav';
@@ -68,6 +70,7 @@ var styles = {
   fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
 };
 var fallbackDefaultWidth = 320;
+export var onPeekStartDelayMs = 500;
 
 /**
  * We need an additional component layer so we can wrap the side nav in a `OpenLayerObserver` and have access to the
@@ -86,7 +89,10 @@ function SideNavInternal(_ref) {
     skipLinkLabel = _ref$skipLinkLabel === void 0 ? label : _ref$skipLinkLabel,
     onExpand = _ref.onExpand,
     onCollapse = _ref.onCollapse,
-    providedId = _ref.id;
+    onPeekStart = _ref.onPeekStart,
+    onPeekEnd = _ref.onPeekEnd,
+    providedId = _ref.id,
+    canToggleWithShortcut = _ref.canToggleWithShortcut;
   var id = useLayoutId({
     providedId: providedId
   });
@@ -152,6 +158,16 @@ function SideNavInternal(_ref) {
     type: 'not-active'
   });
   var isFlyoutVisible = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open';
+  var isExpandedOnDesktopRef = useStableRef(isExpandedOnDesktop);
+  var hasPeekStartedRef = useRef(false);
+  var onPeekStartRef = useStableRef(onPeekStart);
+  var onPeekEndRef = useStableRef(onPeekEnd);
+  var onPeekStartTimeoutIdRef = useRef(undefined);
+  useEffect(function () {
+    return function () {
+      clearTimeout(onPeekStartTimeoutIdRef.current);
+    };
+  }, []);
   var updateFlyoutState = useMemo(function () {
     function tryAbortPendingClose() {
       if (flyoutStateRef.current.type === 'waiting-for-close') {
@@ -159,6 +175,7 @@ function SideNavInternal(_ref) {
       }
     }
     function open() {
+      var prevFlyoutState = flyoutStateRef.current;
       tryAbortPendingClose();
       flyoutStateRef.current = {
         type: 'open'
@@ -171,8 +188,24 @@ function SideNavInternal(_ref) {
         }
         return currentState;
       });
+
+      // Avoid redundant calls to `onPeekStart()`
+      if (prevFlyoutState.type === 'not-active') {
+        clearTimeout(onPeekStartTimeoutIdRef.current);
+        onPeekStartTimeoutIdRef.current = setTimeout(function () {
+          var _onPeekStartRef$curre;
+          // If the flyout isn't still open after ~500ms then we won't count the peek
+          // As we want to track user intention rather than all hovers
+          if (isExpandedOnDesktopRef.current || flyoutStateRef.current.type !== 'open') {
+            return;
+          }
+          hasPeekStartedRef.current = true;
+          (_onPeekStartRef$curre = onPeekStartRef.current) === null || _onPeekStartRef$curre === void 0 || _onPeekStartRef$curre.call(onPeekStartRef);
+        }, onPeekStartDelayMs);
+      }
     }
     function close() {
+      var prevFlyoutState = flyoutStateRef.current;
       tryAbortPendingClose();
       flyoutStateRef.current = {
         type: 'not-active'
@@ -185,6 +218,15 @@ function SideNavInternal(_ref) {
         }
         return currentState;
       });
+
+      // Avoid redundant calls to `onPeekEnd()`
+      if (prevFlyoutState.type !== 'not-active' && hasPeekStartedRef.current) {
+        var _onPeekEndRef$current;
+        hasPeekStartedRef.current = false;
+        (_onPeekEndRef$current = onPeekEndRef.current) === null || _onPeekEndRef$current === void 0 || _onPeekEndRef$current.call(onPeekEndRef, {
+          trigger: isExpandedOnDesktopRef.current ? 'side-nav-expand' : 'mouse-leave'
+        });
+      }
     }
     return function onAction(action) {
       if (action === 'drag-from-flyout-started') {
@@ -243,7 +285,7 @@ function SideNavInternal(_ref) {
         return;
       }
     };
-  }, [openLayerObserver, setSideNavState]);
+  }, [isExpandedOnDesktopRef, onPeekEndRef, onPeekStartRef, openLayerObserver, setSideNavState]);
   var toggleVisibilityByScreenResize = useToggleSideNav({
     trigger: 'screen-resize'
   });
@@ -595,6 +637,9 @@ function SideNavInternal(_ref) {
     }
     devTimeOnlyAttributes['data-visible'] = visible.length ? visible.join(',') : 'false';
   }
+  useSideNavToggleKeyboardShortcut({
+    canToggleWithShortcut: canToggleWithShortcut
+  });
   useResizingWidthCssVarOnRootElement({
     isEnabled: true,
     cssVar: panelSplitterResizingVar,
@@ -694,6 +739,9 @@ export function SideNav(_ref8) {
     skipLinkLabel = _ref8$skipLinkLabel === void 0 ? label : _ref8$skipLinkLabel,
     onExpand = _ref8.onExpand,
     onCollapse = _ref8.onCollapse,
+    onPeekStart = _ref8.onPeekStart,
+    onPeekEnd = _ref8.onPeekEnd,
+    canToggleWithShortcut = _ref8.canToggleWithShortcut,
     id = _ref8.id;
   return /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
     namespace: openLayerObserverSideNavNamespace
@@ -705,6 +753,9 @@ export function SideNav(_ref8) {
     skipLinkLabel: skipLinkLabel,
     onExpand: onExpand,
     onCollapse: onCollapse,
-    id: id
+    onPeekStart: onPeekStart,
+    onPeekEnd: onPeekEnd,
+    id: id,
+    canToggleWithShortcut: canToggleWithShortcut
   }, children));
 }

package/dist/esm/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js

@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+import { bind } from 'bind-event-listener';
+import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
+import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useIsSideNavShortcutEnabled } from './is-side-nav-shortcut-enabled-context';
+import { useToggleSideNav } from './use-toggle-side-nav';
+
+/**
+ * Binds the keyboard shortcut to toggle the side nav.
+ */
+export function useSideNavToggleKeyboardShortcut(_ref) {
+  var canToggleWithShortcut = _ref.canToggleWithShortcut;
+  var openLayerObserver = useOpenLayerObserver();
+  var toggleVisibilityByShortcut = useToggleSideNav({
+    trigger: 'keyboard'
+  });
+  var canToggleWithShortcutStableRef = useStableRef(canToggleWithShortcut);
+  var isSideNavShortcutEnabled = useIsSideNavShortcutEnabled();
+  useEffect(function () {
+    if (!fg('navx-full-height-sidebar')) {
+      return;
+    }
+    if (!isSideNavShortcutEnabled) {
+      return;
+    }
+    return bind(window, {
+      type: 'keydown',
+      listener: function listener(event) {
+        if (event.ctrlKey && event.key === '[') {
+          if (canToggleWithShortcutStableRef.current && !canToggleWithShortcutStableRef.current()) {
+            // Return early if the callback returns false.
+            // If the callback is not provided, we assume the shortcut is enabled.
+            return;
+          }
+          if (event.repeat) {
+            // Ignore repeated keydown events from holding down the keys
+            return;
+          }
+          if (openLayerObserver.getCount({
+            type: 'modal'
+          }) > 0 && fg('platform-dst-open-layer-observer-layer-type')) {
+            // Return early if there are any open modals
+            // This check is behind the layer type FG, as `getCount` will return the count of all layers when
+            // the FG is disabled - meaning we would ignore the shortcut if there is any open layer (not just modals).
+            return;
+          }
+          toggleVisibilityByShortcut();
+        }
+      }
+    });
+  }, [canToggleWithShortcutStableRef, openLayerObserver, toggleVisibilityByShortcut, isSideNavShortcutEnabled]);
+}

package/dist/types/ui/page-layout/root.d.ts

@@ -9,7 +9,7 @@ export declare const gridRootId = "unsafe-design-system-page-layout-root";
  * The root component of the navigation system. It wraps the underlying components with the necessary contexts allowing to use certain data and hooks
  * @param skipLinksLabel - The very first element of the layout is a skip links container that can be accessed by pressing Tab button and holds the links to the other sections of the layout thus improving accessibility. This parameter defines the header text for this container
  */
-export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, testId, defaultSideNavCollapsed, }: {
+export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, testId, defaultSideNavCollapsed, isSideNavShortcutEnabled, }: {
     /**
      * For rendering the layout areas, e.g. TopNav, SideNav, Main.
      * They should be rendered as immediate children.
@@ -47,4 +47,22 @@ export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes,
      * __Note:__ When provided, the `defaultCollapsed` props on `SideNav` and `SideNavToggleButton` will be ignored.
      */
     defaultSideNavCollapsed?: boolean;
+    /**
+     * Controls whether the side nav toggle shortcut is enabled. This will be used to bind the keyboard event listener,
+     * and to display the keyboard shortcuts in the appropriate tooltips (`SideNavToggleButton`, `SideNavPanelSplitter`).
+     *
+     * The shortcut key is `Ctrl` + `[`.
+     *
+     * The shortcut is not enabled by default.
+     *
+     * The shortcut will also be ignored if there are any open ADS modal dialogs (`@atlaskit/modal-dialog`). This is behind
+     * the `platform-dst-open-layer-observer-layer-type` feature flag.
+     *
+     * `SideNav` has another prop `canToggleWithShortcut()` that can be used to run additional checks after the shortcut
+     * is pressed, before the SideNav is toggled. You can use this to conditionally disable the shortcut based on your
+     * your own custom checks, e.g. if there is a legacy dialog open.
+     *
+     * Note: The built-in keyboard shortcut is behind the `navx-full-height-sidebar` feature flag.
+     */
+    isSideNavShortcutEnabled?: boolean;
 }): JSX.Element;

package/dist/types/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-context.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+/**
+ * Provider for the `IsSideNavShortcutEnabledContext`.
+ */
+export declare function IsSideNavShortcutEnabledProvider({ children, isSideNavShortcutEnabled, }: {
+    children: React.ReactNode;
+    isSideNavShortcutEnabled: boolean;
+}): React.JSX.Element;
+/**
+ * Returns the value of the `isSideNavShortcutEnabled` prop from the `Root` component, which
+ * is shared through context.
+ */
+export declare function useIsSideNavShortcutEnabled(): boolean;

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

@@ -53,7 +53,30 @@ type SideNavProps = CommonSlotProps & {
      * Note: The trigger parameter is only provided when the `navx-full-height-sidebar` feature flag is enabled.
      */
     onCollapse?: VisibilityCallback;
+    /**
+     * Called when the side nav begins peeking / flyout.
+     */
+    onPeekStart?: () => void;
+    /**
+     * Called when the side nav stops peeking / flyout.
+     */
+    onPeekEnd?: (args: {
+        trigger: 'mouse-leave' | 'side-nav-expand';
+    }) => void;
+    /**
+     * Whether the side nav should be toggled in response to the built-in keyboard shortcut. Use this callback to
+     * conditionally disable the shortcut based on your own custom checks, e.g. if there is a legacy dialog open.
+     *
+     * This prop will do nothing if `isSideNavShortcutEnabled` on Root is not set to `true`, as the keyboard event
+     * listener is only binded if `isSideNavShortcutEnabled` is `true`.
+     *
+     * The shortcut key is `Ctrl` + `[`.
+     *
+     * Note: The built-in keyboard shortcut is behind the `navx-full-height-sidebar` feature flag.
+     */
+    canToggleWithShortcut?: () => boolean;
 };
+export declare const onPeekStartDelayMs = 500;
 /**
  * The side navigation layout area. It will show on the left (inline start) of the screen.
  *
@@ -64,5 +87,5 @@ type SideNavProps = CommonSlotProps & {
  */
 export declare function SideNav({ children, defaultCollapsed, defaultWidth, testId, label, // Default value is defined in `SideNavInternal`
 skipLinkLabel, // Default value is defined in `SideNavInternal`
-onExpand, onCollapse, id, }: SideNavProps): JSX.Element;
+onExpand, onCollapse, onPeekStart, onPeekEnd, canToggleWithShortcut, id, }: SideNavProps): JSX.Element;
 export {};

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

@@ -0,0 +1,6 @@
+/**
+ * Binds the keyboard shortcut to toggle the side nav.
+ */
+export declare function useSideNavToggleKeyboardShortcut({ canToggleWithShortcut, }: {
+    canToggleWithShortcut?: () => boolean;
+}): void;

package/dist/types-ts4.5/ui/page-layout/root.d.ts

@@ -9,7 +9,7 @@ export declare const gridRootId = "unsafe-design-system-page-layout-root";
  * The root component of the navigation system. It wraps the underlying components with the necessary contexts allowing to use certain data and hooks
  * @param skipLinksLabel - The very first element of the layout is a skip links container that can be accessed by pressing Tab button and holds the links to the other sections of the layout thus improving accessibility. This parameter defines the header text for this container
  */
-export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, testId, defaultSideNavCollapsed, }: {
+export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, testId, defaultSideNavCollapsed, isSideNavShortcutEnabled, }: {
     /**
      * For rendering the layout areas, e.g. TopNav, SideNav, Main.
      * They should be rendered as immediate children.
@@ -47,4 +47,22 @@ export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes,
      * __Note:__ When provided, the `defaultCollapsed` props on `SideNav` and `SideNavToggleButton` will be ignored.
      */
     defaultSideNavCollapsed?: boolean;
+    /**
+     * Controls whether the side nav toggle shortcut is enabled. This will be used to bind the keyboard event listener,
+     * and to display the keyboard shortcuts in the appropriate tooltips (`SideNavToggleButton`, `SideNavPanelSplitter`).
+     *
+     * The shortcut key is `Ctrl` + `[`.
+     *
+     * The shortcut is not enabled by default.
+     *
+     * The shortcut will also be ignored if there are any open ADS modal dialogs (`@atlaskit/modal-dialog`). This is behind
+     * the `platform-dst-open-layer-observer-layer-type` feature flag.
+     *
+     * `SideNav` has another prop `canToggleWithShortcut()` that can be used to run additional checks after the shortcut
+     * is pressed, before the SideNav is toggled. You can use this to conditionally disable the shortcut based on your
+     * your own custom checks, e.g. if there is a legacy dialog open.
+     *
+     * Note: The built-in keyboard shortcut is behind the `navx-full-height-sidebar` feature flag.
+     */
+    isSideNavShortcutEnabled?: boolean;
 }): JSX.Element;

package/dist/types-ts4.5/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-context.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+/**
+ * Provider for the `IsSideNavShortcutEnabledContext`.
+ */
+export declare function IsSideNavShortcutEnabledProvider({ children, isSideNavShortcutEnabled, }: {
+    children: React.ReactNode;
+    isSideNavShortcutEnabled: boolean;
+}): React.JSX.Element;
+/**
+ * Returns the value of the `isSideNavShortcutEnabled` prop from the `Root` component, which
+ * is shared through context.
+ */
+export declare function useIsSideNavShortcutEnabled(): boolean;

package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav.d.ts

@@ -53,7 +53,30 @@ type SideNavProps = CommonSlotProps & {
      * Note: The trigger parameter is only provided when the `navx-full-height-sidebar` feature flag is enabled.
      */
     onCollapse?: VisibilityCallback;
+    /**
+     * Called when the side nav begins peeking / flyout.
+     */
+    onPeekStart?: () => void;
+    /**
+     * Called when the side nav stops peeking / flyout.
+     */
+    onPeekEnd?: (args: {
+        trigger: 'mouse-leave' | 'side-nav-expand';
+    }) => void;
+    /**
+     * Whether the side nav should be toggled in response to the built-in keyboard shortcut. Use this callback to
+     * conditionally disable the shortcut based on your own custom checks, e.g. if there is a legacy dialog open.
+     *
+     * This prop will do nothing if `isSideNavShortcutEnabled` on Root is not set to `true`, as the keyboard event
+     * listener is only binded if `isSideNavShortcutEnabled` is `true`.
+     *
+     * The shortcut key is `Ctrl` + `[`.
+     *
+     * Note: The built-in keyboard shortcut is behind the `navx-full-height-sidebar` feature flag.
+     */
+    canToggleWithShortcut?: () => boolean;
 };
+export declare const onPeekStartDelayMs = 500;
 /**
  * The side navigation layout area. It will show on the left (inline start) of the screen.
  *
@@ -64,5 +87,5 @@ type SideNavProps = CommonSlotProps & {
  */
 export declare function SideNav({ children, defaultCollapsed, defaultWidth, testId, label, // Default value is defined in `SideNavInternal`
 skipLinkLabel, // Default value is defined in `SideNavInternal`
-onExpand, onCollapse, id, }: SideNavProps): JSX.Element;
+onExpand, onCollapse, onPeekStart, onPeekEnd, canToggleWithShortcut, id, }: SideNavProps): JSX.Element;
 export {};

package/dist/types-ts4.5/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Binds the keyboard shortcut to toggle the side nav.
+ */
+export declare function useSideNavToggleKeyboardShortcut({ canToggleWithShortcut, }: {
+    canToggleWithShortcut?: () => boolean;
+}): void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "4.3.0",
+	"version": "4.5.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -72,7 +72,7 @@
 		"@atlaskit/css": "^0.15.0",
 		"@atlaskit/ds-lib": "^5.1.0",
 		"@atlaskit/icon": "^28.5.0",
-		"@atlaskit/layering": "^3.1.0",
+		"@atlaskit/layering": "^3.2.0",
 		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^4.4.0",
@@ -107,6 +107,7 @@
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/lozenge": "^13.0.0",
 		"@atlaskit/menu": "^8.4.0",
+		"@atlaskit/modal-dialog": "^14.6.0",
 		"@atlaskit/onboarding": "^14.4.0",
 		"@atlaskit/page-header": "^12.1.0",
 		"@atlaskit/page-layout": "^4.2.0",
@@ -118,6 +119,7 @@
 		"@atlassian/gemini": "^1.20.0",
 		"@atlassian/search-dialog": "^9.7.0",
 		"@atlassian/ssr-tests": "^0.3.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",
@@ -184,6 +186,9 @@
 		},
 		"platform_dst_side_nav_remove_custom_tooltip": {
 			"type": "boolean"
+		},
+		"platform-dst-open-layer-observer-layer-type": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/navigation-system"