@atlaskit/navigation-system 5.0.2 → 5.1.0

package/CHANGELOG.md

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

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/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/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/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.2",
+	"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",