@atlaskit/navigation-system 4.4.0 → 4.5.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @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

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

@@ -36,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");
@@ -100,7 +101,8 @@ function SideNavInternal(_ref) {
     onCollapse = _ref.onCollapse,
     onPeekStart = _ref.onPeekStart,
     onPeekEnd = _ref.onPeekEnd,
-    providedId = _ref.id;
+    providedId = _ref.id,
+    canToggleWithShortcut = _ref.canToggleWithShortcut;
   var id = (0, _idUtils.useLayoutId)({
     providedId: providedId
   });
@@ -645,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,
@@ -746,6 +751,7 @@ function SideNav(_ref8) {
     onCollapse = _ref8.onCollapse,
     onPeekStart = _ref8.onPeekStart,
     onPeekEnd = _ref8.onPeekEnd,
+    canToggleWithShortcut = _ref8.canToggleWithShortcut,
     id = _ref8.id;
   return /*#__PURE__*/React.createElement(_openLayerObserver.OpenLayerObserverNamespaceProvider, {
     namespace: openLayerObserverSideNavNamespace
@@ -759,6 +765,7 @@ function SideNav(_ref8) {
     onCollapse: onCollapse,
     onPeekStart: onPeekStart,
     onPeekEnd: onPeekEnd,
-    id: id
+    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

@@ -25,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';
@@ -82,7 +83,8 @@ function SideNavInternal({
   onCollapse,
   onPeekStart,
   onPeekEnd,
-  id: providedId
+  id: providedId,
+  canToggleWithShortcut
 }) {
   var _sideNavState$lastTri;
   const id = useLayoutId({
@@ -633,6 +635,9 @@ function SideNavInternal({
     }
     devTimeOnlyAttributes['data-visible'] = visible.length ? visible.join(',') : 'false';
   }
+  useSideNavToggleKeyboardShortcut({
+    canToggleWithShortcut
+  });
   useResizingWidthCssVarOnRootElement({
     isEnabled: true,
     cssVar: panelSplitterResizingVar,
@@ -737,6 +742,7 @@ export function SideNav({
   onCollapse,
   onPeekStart,
   onPeekEnd,
+  canToggleWithShortcut,
   id
 }) {
   return /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
@@ -751,6 +757,7 @@ export function SideNav({
     onCollapse: onCollapse,
     onPeekStart: onPeekStart,
     onPeekEnd: onPeekEnd,
-    id: id
+    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

@@ -29,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';
@@ -90,7 +91,8 @@ function SideNavInternal(_ref) {
     onCollapse = _ref.onCollapse,
     onPeekStart = _ref.onPeekStart,
     onPeekEnd = _ref.onPeekEnd,
-    providedId = _ref.id;
+    providedId = _ref.id,
+    canToggleWithShortcut = _ref.canToggleWithShortcut;
   var id = useLayoutId({
     providedId: providedId
   });
@@ -635,6 +637,9 @@ function SideNavInternal(_ref) {
     }
     devTimeOnlyAttributes['data-visible'] = visible.length ? visible.join(',') : 'false';
   }
+  useSideNavToggleKeyboardShortcut({
+    canToggleWithShortcut: canToggleWithShortcut
+  });
   useResizingWidthCssVarOnRootElement({
     isEnabled: true,
     cssVar: panelSplitterResizingVar,
@@ -736,6 +741,7 @@ export function SideNav(_ref8) {
     onCollapse = _ref8.onCollapse,
     onPeekStart = _ref8.onPeekStart,
     onPeekEnd = _ref8.onPeekEnd,
+    canToggleWithShortcut = _ref8.canToggleWithShortcut,
     id = _ref8.id;
   return /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
     namespace: openLayerObserverSideNavNamespace
@@ -749,6 +755,7 @@ export function SideNav(_ref8) {
     onCollapse: onCollapse,
     onPeekStart: onPeekStart,
     onPeekEnd: onPeekEnd,
-    id: id
+    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

@@ -63,6 +63,18 @@ type SideNavProps = CommonSlotProps & {
     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;
 /**
@@ -75,5 +87,5 @@ export declare const onPeekStartDelayMs = 500;
  */
 export declare function SideNav({ children, defaultCollapsed, defaultWidth, testId, label, // Default value is defined in `SideNavInternal`
 skipLinkLabel, // Default value is defined in `SideNavInternal`
-onExpand, onCollapse, onPeekStart, onPeekEnd, 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

@@ -63,6 +63,18 @@ type SideNavProps = CommonSlotProps & {
     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;
 /**
@@ -75,5 +87,5 @@ export declare const onPeekStartDelayMs = 500;
  */
 export declare function SideNav({ children, defaultCollapsed, defaultWidth, testId, label, // Default value is defined in `SideNavInternal`
 skipLinkLabel, // Default value is defined in `SideNavInternal`
-onExpand, onCollapse, onPeekStart, onPeekEnd, 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.4.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"