@atlaskit/navigation-system 5.0.1 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @atlassian/navigation-system
 
+## 5.1.0
+
+### Minor Changes
+
+- [`03b6f055c6340`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/03b6f055c6340) -
+  The `SideNavPanelSplitter` component is now exported from
+  `@atlaskit/navigation-system/layout/side-nav`. It should be used within the `SideNav` layout area.
+
+  It supports double clicking to collapse the side nav. You can conditionally disable this through
+  the `shouldCollapseOnDoubleClick` prop. It is enabled by default.
+
+  It also supports displaying a tooltip when hovered, through the `tooltipContent` prop. This should
+  be used to explain the double click to collapse interaction. The recommended tooltip content is
+  "Double click to collapse".
+
+  A tooltip will only be displayed if the `shouldCollapseOnDoubleClick` prop is `true`, or not
+  provided (as it defaults to `true`), and if the `tooltipContent` prop is provided.
+
+  If the `isSideNavShortcutEnabled` prop is enabled on `<Root />`, the built-in keyboard shortcut
+  will be displayed with the tooltip.
+
+  Example usage:
+
+  ```tsx
+  import { SideNav, SideNavPanelSplitter } from '@atlaskit/navigation-system/layout/side-nav';
+
+  // In component:
+  <SideNav>
+  	<SideNavPanelSplitter label="Double click to collapse" />
+  </SideNav>;
+  ```
+
+## 5.0.2
+
+### Patch Changes
+
+- [`bb5f1424b34de`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bb5f1424b34de) -
+  [ux] Fixes the scrolled indicator in SideNavContent to set initial state for SSR'd scroll
+  position. Behind the `navx-full-height-sidebar` gate.
+
 ## 5.0.1
 
 ### Patch Changes

package/constellation/layout/examples.mdx

@@ -125,13 +125,14 @@ See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-in
 
 #### Side nav resizing
 
-- You can optionally render a [panel splitter](#resizable-areas) as a child to make the side nav
-  resizable. It is resized using the drag handle. When hovering on the drag handle the mouse pointer
-  changes to a resize pointer.
+- You can optionally render a [side nav panel splitter](#resizable-areas) as a child to make the
+  side nav resizable. It is resized using the drag handle. When hovering on the drag handle the
+  mouse pointer changes to a resize pointer.
 - The side nav can be resized to a minimum width of 240px, and a maximum width equal to 50% of the
   total viewport width. It retains this resized width even after collapsing, reopening, or
   refreshing the page. When resizing, any open layer components (e.g. popups, dropdowns, selects,
   tooltips) will be closed.
+- The side nav panel splitter can be also double clicked to collapse the side nav.
 
 See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
 
@@ -230,13 +231,13 @@ See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-in
 
 ## Resizable areas
 
-Render `PanelSplitter` in a layout area to make it resizable.
+Render a `PanelSplitter` in a layout area to make it resizable.
 
 Resizing is supported for the following areas:
 
-- [SideNav](/components/navigation-system/layout/examples#side-nav)
-- [Aside](/components/navigation-system/layout/examples#aside)
-- [Panel](/components/navigation-system/layout/examples#panel)
+- [SideNav](/components/navigation-system/layout/examples#side-nav) - use `SideNavPanelSplitter`
+- [Aside](/components/navigation-system/layout/examples#aside) - use `PanelSplitter`
+- [Panel](/components/navigation-system/layout/examples#panel) - use `PanelSplitter`
 
 See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
 

package/dist/cjs/entry-points/layout/side-nav.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "SideNavHeader", {
     return _sideNavHeader.SideNavHeader;
   }
 });
+Object.defineProperty(exports, "SideNavPanelSplitter", {
+  enumerable: true,
+  get: function get() {
+    return _sideNavPanelSplitter.SideNavPanelSplitter;
+  }
+});
 Object.defineProperty(exports, "SideNavToggleButton", {
   enumerable: true,
   get: function get() {
@@ -51,4 +57,5 @@ var _sideNavContent = require("../../ui/page-layout/side-nav/side-nav-content");
 var _sideNavFooter = require("../../ui/page-layout/side-nav/side-nav-footer");
 var _toggleButton = require("../../ui/page-layout/side-nav/toggle-button");
 var _useToggleSideNav = require("../../ui/page-layout/side-nav/use-toggle-side-nav");
-var _useExpandSideNav = require("../../ui/page-layout/side-nav/use-expand-side-nav");
+var _useExpandSideNav = require("../../ui/page-layout/side-nav/use-expand-side-nav");
+var _sideNavPanelSplitter = require("../../ui/page-layout/panel-splitter/side-nav-panel-splitter");

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

@@ -332,10 +332,11 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
  * _PanelSplitter_
  *
  * A component that allows the user to resize a layout area.
- * It can be used within layout areas like `SideNav`, `Panel`, and `Aside`. The layout area component should
- * provide the context for it using `<PanelSplitterProvider>`.
+ * It can be used within layout areas like `Panel`, and `Aside`.
+ * For the `SideNav`, use the `SideNavPanelSplitter` component instead, as it provides additional functionality
+ * such as double clicking to collapse the side nav.
  *
- * Example usage in products:
+ * Example usage:
  * ```tsx
  * <Aside>
  *   <!-- other side nav content -->

package/dist/cjs/ui/page-layout/side-nav/side-nav-content.compiled.css

@@ -1,10 +1,13 @@
-._16jlkb7n{flex-grow:1}
-._16qs10dg{box-shadow:0 -1px var(--ds-border,#091e4224)}
+
+._1un9baqb{scroll-timeline:--sNcst block}._16jlkb7n{flex-grow:1}
 ._18m91wug{overflow-y:auto}
 ._1o9zkb7n{flex-shrink:1}
 ._1q51utpp{padding-block-start:var(--ds-space-150,9pt)}
 ._1reo1wug{overflow-x:auto}
+._21o1gc9s{animation-timeline:--sNcst}
 ._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._i0dlf1ug{flex-basis:0%}
-._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
+._j7hq1ysc{animation-name:kewh7qa}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
+@keyframes kewh7qa{0%{box-shadow:none}0.1%{box-shadow:0 -1px var(--ds-border,#091e4224)}to{box-shadow:0 -1px var(--ds-border,#091e4224)}}

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

@@ -9,10 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SideNavContent = void 0;
 require("./side-nav-content.compiled.css");
 var _runtime = require("@compiled/react/runtime");
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _bindEventListener = require("bind-event-listener");
-var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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); }
@@ -29,8 +26,20 @@ var styles = {
   scrollContainer: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo1wug _18m91wug",
   paddingContainer: "_1q51utpp _y4tiutpp _85i5utpp _bozgutpp"
 };
+
+/**
+ * Using CSS scroll-driven animations to apply a scrolled indicator border.
+ *
+ * This approach is better for SSR, as some apps like Confluence will apply the
+ * initial scroll position of the side nav content using JS before hydration.
+ *
+ * If we applied the border through React state it would only appear after hydration,
+ * whereas this CSS approach should show even before hydration.
+ */
+var scrolledBorder = null;
+var scrollTimelineVar = '--sNcst';
 var fullHeightSidebarStyles = {
-  scrolled: "_16qs10dg"
+  scrollContainer: "_1un9baqb _21o1gc9s _j7hq1ysc"
 };
 function _SideNavContent(_ref, forwardedRef) {
   var children = _ref.children,
@@ -39,43 +48,11 @@ function _SideNavContent(_ref, forwardedRef) {
   var mergedRef = (0, _react.useMemo)(function () {
     return (0, _mergeRefs.default)([internalRef, forwardedRef]);
   }, [forwardedRef]);
-  var isScrolled = useIsScrolled(internalRef);
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') ? mergedRef : forwardedRef,
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.scrollContainer, isScrolled && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && fullHeightSidebarStyles.scrolled])
+    className: (0, _runtime.ax)([styles.scrollContainer, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && fullHeightSidebarStyles.scrollContainer])
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)([styles.paddingContainer])
   }, children));
-}
-function useIsScrolled(ref) {
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isScrolled = _useState2[0],
-    setIsScrolled = _useState2[1];
-  (0, _react.useEffect)(function () {
-    if (!(0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
-      return;
-    }
-    if (!ref.current) {
-      return;
-    }
-    var scrollContainer = ref.current;
-
-    // Listener is throttled to requestAnimationFrame()
-    var listener = (0, _rafSchd.default)(function () {
-      setIsScrolled(scrollContainer.scrollTop > 0);
-    });
-    return (0, _bindEventListener.bind)(scrollContainer, {
-      type: 'scroll',
-      options: {
-        // Passive means we cannot call event.preventDefault()
-        // It allows the browser to optimize scrolling performance:
-        // https://developer.chrome.com/docs/lighthouse/best-practices/uses-passive-event-listeners
-        passive: true
-      },
-      listener: listener
-    });
-  }, [ref]);
-  return isScrolled;
 }

package/dist/es2019/entry-points/layout/side-nav.js

@@ -4,4 +4,5 @@ export { SideNavContent } from '../../ui/page-layout/side-nav/side-nav-content';
 export { SideNavFooter } from '../../ui/page-layout/side-nav/side-nav-footer';
 export { SideNavToggleButton } from '../../ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from '../../ui/page-layout/side-nav/use-toggle-side-nav';
-export { useExpandSideNav } from '../../ui/page-layout/side-nav/use-expand-side-nav';
+export { useExpandSideNav } from '../../ui/page-layout/side-nav/use-expand-side-nav';
+export { SideNavPanelSplitter } from '../../ui/page-layout/panel-splitter/side-nav-panel-splitter';

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

@@ -311,10 +311,11 @@ const PortaledPanelSplitter = ({
  * _PanelSplitter_
  *
  * A component that allows the user to resize a layout area.
- * It can be used within layout areas like `SideNav`, `Panel`, and `Aside`. The layout area component should
- * provide the context for it using `<PanelSplitterProvider>`.
+ * It can be used within layout areas like `Panel`, and `Aside`.
+ * For the `SideNav`, use the `SideNavPanelSplitter` component instead, as it provides additional functionality
+ * such as double clicking to collapse the side nav.
  *
- * Example usage in products:
+ * Example usage:
  * ```tsx
  * <Aside>
  *   <!-- other side nav content -->

package/dist/es2019/ui/page-layout/side-nav/side-nav-content.compiled.css

@@ -1,10 +1,13 @@
-._16jlkb7n{flex-grow:1}
-._16qs10dg{box-shadow:0 -1px var(--ds-border,#091e4224)}
+
+._1un9baqb{scroll-timeline:--sNcst block}._16jlkb7n{flex-grow:1}
 ._18m91wug{overflow-y:auto}
 ._1o9zkb7n{flex-shrink:1}
 ._1q51utpp{padding-block-start:var(--ds-space-150,9pt)}
 ._1reo1wug{overflow-x:auto}
+._21o1gc9s{animation-timeline:--sNcst}
 ._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._i0dlf1ug{flex-basis:0%}
-._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
+._j7hq98ya{animation-name:k1v0uu2e}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
+@keyframes k1v0uu2e{0%{box-shadow:none}0.1%{box-shadow:0 -1px var(--ds-border,#091e4224)}to{box-shadow:0 -1px var(--ds-border,#091e4224)}}

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

@@ -1,9 +1,7 @@
 /* side-nav-content.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./side-nav-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import { bind } from 'bind-event-listener';
-import rafSchd from 'raf-schd';
+import React, { forwardRef, useMemo, useRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { fg } from '@atlaskit/platform-feature-flags';
 /**
@@ -19,8 +17,20 @@ const styles = {
   scrollContainer: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo1wug _18m91wug",
   paddingContainer: "_1q51utpp _y4tiutpp _85i5utpp _bozgutpp"
 };
+
+/**
+ * Using CSS scroll-driven animations to apply a scrolled indicator border.
+ *
+ * This approach is better for SSR, as some apps like Confluence will apply the
+ * initial scroll position of the side nav content using JS before hydration.
+ *
+ * If we applied the border through React state it would only appear after hydration,
+ * whereas this CSS approach should show even before hydration.
+ */
+const scrolledBorder = null;
+const scrollTimelineVar = '--sNcst';
 const fullHeightSidebarStyles = {
-  scrolled: "_16qs10dg"
+  scrollContainer: "_1un9baqb _21o1gc9s _j7hq98ya"
 };
 function _SideNavContent({
   children,
@@ -28,40 +38,11 @@ function _SideNavContent({
 }, forwardedRef) {
   const internalRef = useRef(null);
   const mergedRef = useMemo(() => mergeRefs([internalRef, forwardedRef]), [forwardedRef]);
-  const isScrolled = useIsScrolled(internalRef);
   return /*#__PURE__*/React.createElement("div", {
     ref: fg('navx-full-height-sidebar') ? mergedRef : forwardedRef,
     "data-testid": testId,
-    className: ax([styles.scrollContainer, isScrolled && fg('navx-full-height-sidebar') && fullHeightSidebarStyles.scrolled])
+    className: ax([styles.scrollContainer, fg('navx-full-height-sidebar') && fullHeightSidebarStyles.scrollContainer])
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([styles.paddingContainer])
   }, children));
-}
-function useIsScrolled(ref) {
-  const [isScrolled, setIsScrolled] = useState(false);
-  useEffect(() => {
-    if (!fg('navx-full-height-sidebar')) {
-      return;
-    }
-    if (!ref.current) {
-      return;
-    }
-    const scrollContainer = ref.current;
-
-    // Listener is throttled to requestAnimationFrame()
-    const listener = rafSchd(() => {
-      setIsScrolled(scrollContainer.scrollTop > 0);
-    });
-    return bind(scrollContainer, {
-      type: 'scroll',
-      options: {
-        // Passive means we cannot call event.preventDefault()
-        // It allows the browser to optimize scrolling performance:
-        // https://developer.chrome.com/docs/lighthouse/best-practices/uses-passive-event-listeners
-        passive: true
-      },
-      listener
-    });
-  }, [ref]);
-  return isScrolled;
 }

package/dist/esm/entry-points/layout/side-nav.js

@@ -4,4 +4,5 @@ export { SideNavContent } from '../../ui/page-layout/side-nav/side-nav-content';
 export { SideNavFooter } from '../../ui/page-layout/side-nav/side-nav-footer';
 export { SideNavToggleButton } from '../../ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from '../../ui/page-layout/side-nav/use-toggle-side-nav';
-export { useExpandSideNav } from '../../ui/page-layout/side-nav/use-expand-side-nav';
+export { useExpandSideNav } from '../../ui/page-layout/side-nav/use-expand-side-nav';
+export { SideNavPanelSplitter } from '../../ui/page-layout/panel-splitter/side-nav-panel-splitter';

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

@@ -322,10 +322,11 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref2) {
  * _PanelSplitter_
  *
  * A component that allows the user to resize a layout area.
- * It can be used within layout areas like `SideNav`, `Panel`, and `Aside`. The layout area component should
- * provide the context for it using `<PanelSplitterProvider>`.
+ * It can be used within layout areas like `Panel`, and `Aside`.
+ * For the `SideNav`, use the `SideNavPanelSplitter` component instead, as it provides additional functionality
+ * such as double clicking to collapse the side nav.
  *
- * Example usage in products:
+ * Example usage:
  * ```tsx
  * <Aside>
  *   <!-- other side nav content -->

package/dist/esm/ui/page-layout/side-nav/side-nav-content.compiled.css

@@ -1,10 +1,13 @@
-._16jlkb7n{flex-grow:1}
-._16qs10dg{box-shadow:0 -1px var(--ds-border,#091e4224)}
+
+._1un9baqb{scroll-timeline:--sNcst block}._16jlkb7n{flex-grow:1}
 ._18m91wug{overflow-y:auto}
 ._1o9zkb7n{flex-shrink:1}
 ._1q51utpp{padding-block-start:var(--ds-space-150,9pt)}
 ._1reo1wug{overflow-x:auto}
+._21o1gc9s{animation-timeline:--sNcst}
 ._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._i0dlf1ug{flex-basis:0%}
-._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
+._j7hq1ysc{animation-name:kewh7qa}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
+@keyframes kewh7qa{0%{box-shadow:none}0.1%{box-shadow:0 -1px var(--ds-border,#091e4224)}to{box-shadow:0 -1px var(--ds-border,#091e4224)}}

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

@@ -1,10 +1,7 @@
 /* side-nav-content.tsx generated by @compiled/babel-plugin v0.38.1 */
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./side-nav-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import { bind } from 'bind-event-listener';
-import rafSchd from 'raf-schd';
+import React, { forwardRef, useMemo, useRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { fg } from '@atlaskit/platform-feature-flags';
 /**
@@ -20,8 +17,20 @@ var styles = {
   scrollContainer: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo1wug _18m91wug",
   paddingContainer: "_1q51utpp _y4tiutpp _85i5utpp _bozgutpp"
 };
+
+/**
+ * Using CSS scroll-driven animations to apply a scrolled indicator border.
+ *
+ * This approach is better for SSR, as some apps like Confluence will apply the
+ * initial scroll position of the side nav content using JS before hydration.
+ *
+ * If we applied the border through React state it would only appear after hydration,
+ * whereas this CSS approach should show even before hydration.
+ */
+var scrolledBorder = null;
+var scrollTimelineVar = '--sNcst';
 var fullHeightSidebarStyles = {
-  scrolled: "_16qs10dg"
+  scrollContainer: "_1un9baqb _21o1gc9s _j7hq1ysc"
 };
 function _SideNavContent(_ref, forwardedRef) {
   var children = _ref.children,
@@ -30,43 +39,11 @@ function _SideNavContent(_ref, forwardedRef) {
   var mergedRef = useMemo(function () {
     return mergeRefs([internalRef, forwardedRef]);
   }, [forwardedRef]);
-  var isScrolled = useIsScrolled(internalRef);
   return /*#__PURE__*/React.createElement("div", {
     ref: fg('navx-full-height-sidebar') ? mergedRef : forwardedRef,
     "data-testid": testId,
-    className: ax([styles.scrollContainer, isScrolled && fg('navx-full-height-sidebar') && fullHeightSidebarStyles.scrolled])
+    className: ax([styles.scrollContainer, fg('navx-full-height-sidebar') && fullHeightSidebarStyles.scrollContainer])
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([styles.paddingContainer])
   }, children));
-}
-function useIsScrolled(ref) {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isScrolled = _useState2[0],
-    setIsScrolled = _useState2[1];
-  useEffect(function () {
-    if (!fg('navx-full-height-sidebar')) {
-      return;
-    }
-    if (!ref.current) {
-      return;
-    }
-    var scrollContainer = ref.current;
-
-    // Listener is throttled to requestAnimationFrame()
-    var listener = rafSchd(function () {
-      setIsScrolled(scrollContainer.scrollTop > 0);
-    });
-    return bind(scrollContainer, {
-      type: 'scroll',
-      options: {
-        // Passive means we cannot call event.preventDefault()
-        // It allows the browser to optimize scrolling performance:
-        // https://developer.chrome.com/docs/lighthouse/best-practices/uses-passive-event-listeners
-        passive: true
-      },
-      listener: listener
-    });
-  }, [ref]);
-  return isScrolled;
 }

package/dist/types/entry-points/layout/side-nav.d.ts

@@ -5,3 +5,4 @@ export { SideNavFooter } from '../../ui/page-layout/side-nav/side-nav-footer';
 export { SideNavToggleButton } from '../../ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from '../../ui/page-layout/side-nav/use-toggle-side-nav';
 export { useExpandSideNav } from '../../ui/page-layout/side-nav/use-expand-side-nav';
+export { SideNavPanelSplitter } from '../../ui/page-layout/panel-splitter/side-nav-panel-splitter';

package/dist/types/ui/page-layout/panel-splitter/panel-splitter.d.ts

@@ -45,10 +45,11 @@ export declare function isPanelSplitterDragData(data: Record<string | symbol, un
  * _PanelSplitter_
  *
  * A component that allows the user to resize a layout area.
- * It can be used within layout areas like `SideNav`, `Panel`, and `Aside`. The layout area component should
- * provide the context for it using `<PanelSplitterProvider>`.
+ * It can be used within layout areas like `Panel`, and `Aside`.
+ * For the `SideNav`, use the `SideNavPanelSplitter` component instead, as it provides additional functionality
+ * such as double clicking to collapse the side nav.
  *
- * Example usage in products:
+ * Example usage:
  * ```tsx
  * <Aside>
  *   <!-- other side nav content -->

package/dist/types-ts4.5/entry-points/layout/side-nav.d.ts

@@ -5,3 +5,4 @@ export { SideNavFooter } from '../../ui/page-layout/side-nav/side-nav-footer';
 export { SideNavToggleButton } from '../../ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from '../../ui/page-layout/side-nav/use-toggle-side-nav';
 export { useExpandSideNav } from '../../ui/page-layout/side-nav/use-expand-side-nav';
+export { SideNavPanelSplitter } from '../../ui/page-layout/panel-splitter/side-nav-panel-splitter';

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

@@ -45,10 +45,11 @@ export declare function isPanelSplitterDragData(data: Record<string | symbol, un
  * _PanelSplitter_
  *
  * A component that allows the user to resize a layout area.
- * It can be used within layout areas like `SideNav`, `Panel`, and `Aside`. The layout area component should
- * provide the context for it using `<PanelSplitterProvider>`.
+ * It can be used within layout areas like `Panel`, and `Aside`.
+ * For the `SideNav`, use the `SideNavPanelSplitter` component instead, as it provides additional functionality
+ * such as double clicking to collapse the side nav.
  *
- * Example usage in products:
+ * Example usage:
  * ```tsx
  * <Aside>
  *   <!-- other side nav content -->

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "5.0.1",
+	"version": "5.1.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -70,7 +70,7 @@
 		"@atlaskit/avatar": "^25.5.0",
 		"@atlaskit/button": "^23.5.0",
 		"@atlaskit/css": "^0.15.0",
-		"@atlaskit/ds-lib": "^5.1.0",
+		"@atlaskit/ds-lib": "^5.2.0",
 		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/layering": "^3.2.0",
 		"@atlaskit/logo": "^19.9.0",
@@ -80,7 +80,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^16.1.0",
-		"@atlaskit/tokens": "^7.0.0",
+		"@atlaskit/tokens": "^7.1.0",
 		"@atlaskit/tooltip": "^20.7.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",