@atlaskit/navigation-system 5.0.2 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @atlassian/navigation-system
 
+## 5.2.0
+
+### Minor Changes
+
+- [`fef4ccb6af01f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fef4ccb6af01f) -
+  Cleans up the `platform_dst_nav4_side_nav_default_collapsed_api` feature gate. Default side nav
+  collapsed state can now be passed into the `Root` component via the `defaultSideNavCollapsed`
+  prop. This is the preferred API, and the legacy API will be removed at some point in the future.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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/cjs/ui/page-layout/side-nav/side-nav.js

@@ -304,29 +304,10 @@ function SideNavInternal(_ref) {
   var toggleVisibilityByClickOutsideOnMobile = (0, _useToggleSideNav.useToggleSideNav)({
     trigger: 'click-outside-on-mobile'
   });
-  (0, _react.useEffect)(function () {
-    if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_default_collapsed_api')) {
-      // This is the old version of the hook, so we skip it when the flag is enabled
-      return;
-    }
-
-    // Sync the visibility in context (provided in `<Root>`) with the local `defaultCollapsed` prop provided to `SideNav`
-    // after SSR hydration. This should only run once, after the initial render on the client.
-    setSideNavState({
-      desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
-      mobile: 'collapsed',
-      flyout: 'closed',
-      lastTrigger: null
-    });
-  }, [initialDefaultCollapsed, setSideNavState]);
 
   // Moving to `useLayoutEffect` so that there's no visual shift in non-SSR environments when using legacy API
   // For SSR the new API is still necessary
   (0, _react.useLayoutEffect)(function () {
-    if (!(0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_default_collapsed_api')) {
-      // This is the new version of the hook, so we skip it when the flag is disabled
-      return;
-    }
     if (sideNavState !== null) {
       // Only need to do an initial sync if it hasn't been initialized from Root
       return;

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

@@ -57,7 +57,7 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
 
   // When default state is provided to `Root` the state in context will already be
   // initialized in SSR
-  var _useState = (0, _react.useState)(sideNavState === null || !(0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_default_collapsed_api') ? !defaultCollapsed : isSideNavExpandedOnDesktop),
+  var _useState = (0, _react.useState)(sideNavState === null ? !defaultCollapsed : isSideNavExpandedOnDesktop),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isSideNavExpanded = _useState2[0],
     setIsSideNavExpanded = _useState2[1];

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.SideNavVisibilityProvider = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _visibilityContext = require("./visibility-context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
@@ -17,7 +16,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var SideNavVisibilityProvider = exports.SideNavVisibilityProvider = function SideNavVisibilityProvider(_ref) {
   var children = _ref.children,
     defaultCollapsed = _ref.defaultCollapsed;
-  var initialState = typeof defaultCollapsed === 'boolean' && (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_default_collapsed_api') ? {
+  var initialState = typeof defaultCollapsed === 'boolean' ? {
     desktop: defaultCollapsed ? 'collapsed' : 'expanded',
     mobile: 'collapsed',
     flyout: 'closed',

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.js

@@ -286,29 +286,10 @@ function SideNavInternal({
   const toggleVisibilityByClickOutsideOnMobile = useToggleSideNav({
     trigger: 'click-outside-on-mobile'
   });
-  useEffect(() => {
-    if (fg('platform_dst_nav4_side_nav_default_collapsed_api')) {
-      // This is the old version of the hook, so we skip it when the flag is enabled
-      return;
-    }
-
-    // Sync the visibility in context (provided in `<Root>`) with the local `defaultCollapsed` prop provided to `SideNav`
-    // after SSR hydration. This should only run once, after the initial render on the client.
-    setSideNavState({
-      desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
-      mobile: 'collapsed',
-      flyout: 'closed',
-      lastTrigger: null
-    });
-  }, [initialDefaultCollapsed, setSideNavState]);
 
   // Moving to `useLayoutEffect` so that there's no visual shift in non-SSR environments when using legacy API
   // For SSR the new API is still necessary
   useLayoutEffect(() => {
-    if (!fg('platform_dst_nav4_side_nav_default_collapsed_api')) {
-      // This is the new version of the hook, so we skip it when the flag is disabled
-      return;
-    }
     if (sideNavState !== null) {
       // Only need to do an initial sync if it hasn't been initialized from Root
       return;

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

@@ -45,7 +45,7 @@ export const SideNavToggleButton = ({
 
   // When default state is provided to `Root` the state in context will already be
   // initialized in SSR
-  const [isSideNavExpanded, setIsSideNavExpanded] = useState(sideNavState === null || !fg('platform_dst_nav4_side_nav_default_collapsed_api') ? !defaultCollapsed : isSideNavExpandedOnDesktop);
+  const [isSideNavExpanded, setIsSideNavExpanded] = useState(sideNavState === null ? !defaultCollapsed : isSideNavExpandedOnDesktop);
   const ref = useContext(SideNavToggleButtonAttachRef);
   const elementRef = useRef(null);
 

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

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { SetSideNavVisibilityState, SideNavVisibilityState } from './visibility-context';
 
 /**
@@ -9,7 +8,7 @@ export const SideNavVisibilityProvider = ({
   children,
   defaultCollapsed
 }) => {
-  const initialState = typeof defaultCollapsed === 'boolean' && fg('platform_dst_nav4_side_nav_default_collapsed_api') ? {
+  const initialState = typeof defaultCollapsed === 'boolean' ? {
     desktop: defaultCollapsed ? 'collapsed' : 'expanded',
     mobile: 'collapsed',
     flyout: 'closed',

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.js

@@ -294,29 +294,10 @@ function SideNavInternal(_ref) {
   var toggleVisibilityByClickOutsideOnMobile = useToggleSideNav({
     trigger: 'click-outside-on-mobile'
   });
-  useEffect(function () {
-    if (fg('platform_dst_nav4_side_nav_default_collapsed_api')) {
-      // This is the old version of the hook, so we skip it when the flag is enabled
-      return;
-    }
-
-    // Sync the visibility in context (provided in `<Root>`) with the local `defaultCollapsed` prop provided to `SideNav`
-    // after SSR hydration. This should only run once, after the initial render on the client.
-    setSideNavState({
-      desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
-      mobile: 'collapsed',
-      flyout: 'closed',
-      lastTrigger: null
-    });
-  }, [initialDefaultCollapsed, setSideNavState]);
 
   // Moving to `useLayoutEffect` so that there's no visual shift in non-SSR environments when using legacy API
   // For SSR the new API is still necessary
   useLayoutEffect(function () {
-    if (!fg('platform_dst_nav4_side_nav_default_collapsed_api')) {
-      // This is the new version of the hook, so we skip it when the flag is disabled
-      return;
-    }
     if (sideNavState !== null) {
       // Only need to do an initial sync if it hasn't been initialized from Root
       return;

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

@@ -48,7 +48,7 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
 
   // When default state is provided to `Root` the state in context will already be
   // initialized in SSR
-  var _useState = useState(sideNavState === null || !fg('platform_dst_nav4_side_nav_default_collapsed_api') ? !defaultCollapsed : isSideNavExpandedOnDesktop),
+  var _useState = useState(sideNavState === null ? !defaultCollapsed : isSideNavExpandedOnDesktop),
     _useState2 = _slicedToArray(_useState, 2),
     isSideNavExpanded = _useState2[0],
     setIsSideNavExpanded = _useState2[1];

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

@@ -1,6 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { SetSideNavVisibilityState, SideNavVisibilityState } from './visibility-context';
 
 /**
@@ -9,7 +8,7 @@ import { SetSideNavVisibilityState, SideNavVisibilityState } from './visibility-
 export var SideNavVisibilityProvider = function SideNavVisibilityProvider(_ref) {
   var children = _ref.children,
     defaultCollapsed = _ref.defaultCollapsed;
-  var initialState = typeof defaultCollapsed === 'boolean' && fg('platform_dst_nav4_side_nav_default_collapsed_api') ? {
+  var initialState = typeof defaultCollapsed === 'boolean' ? {
     desktop: defaultCollapsed ? 'collapsed' : 'expanded',
     mobile: 'collapsed',
     flyout: 'closed',

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.2.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",
@@ -147,9 +147,6 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform_dst_nav4_side_nav_default_collapsed_api": {
-			"type": "boolean"
-		},
 		"platform_dst_nav4_side_nav_toggle_ref_fix": {
 			"type": "boolean"
 		},