@atlaskit/navigation-system 2.9.0 → 2.10.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlassian/navigation-system
 
+## 2.10.0
+
+### Minor Changes
+
+- [`8c5f4864d7d4c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8c5f4864d7d4c) -
+  Adds `defaultSideNavCollapsed` prop to `Root` which replaces the `defaultCollapsed` props on
+  `SideNav` and `SideNavToggleButton`. This prop is enabled behind the
+  `platform_dst_nav4_full_height_sidebar_api_changes` feature gate. When this gate is cleaned up the
+  `defaultCollapsed` props will be removed.
+
 ## 2.9.0
 
 ### Minor Changes

package/constellation/index/examples.mdx

@@ -31,7 +31,8 @@ For ready-made navigation experiences see
 
 - <a href="https://go.atlassian.com/nav4-interactive-example" target="_blank">
   	Full screen interactive example
-  </a> (only available for Atlassian employees at this stage).
+  </a>
+  (only available for Atlassian employees at this stage).
 
 ## Related
 

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

@@ -35,7 +35,9 @@ function Root(_ref) {
     UNSAFE_dangerouslyHoistSlotSizes = _ref$UNSAFE_dangerous === void 0 ? false : _ref$UNSAFE_dangerous,
     _ref$skipLinksLabel = _ref.skipLinksLabel,
     skipLinksLabel = _ref$skipLinksLabel === void 0 ? 'Skip to:' : _ref$skipLinksLabel,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    _ref$defaultSideNavCo = _ref.defaultSideNavCollapsed,
+    defaultSideNavCollapsed = _ref$defaultSideNavCo === void 0 ? false : _ref$defaultSideNavCo;
   var ref = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     if (process.env.NODE_ENV !== 'production') {
@@ -50,7 +52,9 @@ function Root(_ref) {
       }
     }
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_visibilityProvider.SideNavVisibilityProvider, null, /*#__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, {
+  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, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/_react.default.createElement(_skipLinksProvider.SkipLinksProvider, {
     label: skipLinksLabel,

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

@@ -247,6 +247,11 @@ function SideNavInternal(_ref) {
     trigger: 'click-outside-on-mobile'
   });
   (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_full_height_sidebar_api_changes')) {
+      // We are passing initial state to the Root now, so no initial sync is required
+      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({

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

@@ -53,7 +53,10 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
     }),
     isSideNavExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop,
     isSideNavExpandedOnMobile = _useSideNavVisibility.isExpandedOnMobile;
-  var _useState = (0, _react.useState)(!defaultCollapsed),
+
+  // When `platform_dst_nav4_full_height_sidebar_api_changes` is enabled,
+  // we default to the desktop state for SSR
+  var _useState = (0, _react.useState)((0, _platformFeatureFlags.fg)('platform_dst_nav4_full_height_sidebar_api_changes') ? isSideNavExpandedOnDesktop : !defaultCollapsed),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isSideNavExpanded = _useState2[0],
     setIsSideNavExpanded = _useState2[1];

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

@@ -8,15 +8,24 @@ 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); }
 /**
  * Manages the side nav visibility state and provides the context.
  */
 var SideNavVisibilityProvider = exports.SideNavVisibilityProvider = function SideNavVisibilityProvider(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    defaultCollapsed = _ref.defaultCollapsed;
+  var initialState = (0, _platformFeatureFlags.fg)('platform_dst_nav4_full_height_sidebar_api_changes') ? {
+    desktop: defaultCollapsed ? 'collapsed' : 'expanded',
+    mobile: 'collapsed',
+    flyout: 'closed',
+    lastTrigger: null
+  } : null;
+
   // Defaults to null so we can determine if the value has been set yet (for SSR)
-  var _useState = (0, _react.useState)(null),
+  var _useState = (0, _react.useState)(initialState),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     sideNavState = _useState2[0],
     setSideNavState = _useState2[1];

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

@@ -25,7 +25,8 @@ export function Root({
   xcss,
   UNSAFE_dangerouslyHoistSlotSizes = false,
   skipLinksLabel = 'Skip to:',
-  testId
+  testId,
+  defaultSideNavCollapsed = false
 }) {
   const ref = useRef(null);
   useEffect(() => {
@@ -50,7 +51,9 @@ This message will not be displayed in production.
       }
     }
   }, []);
-  return /*#__PURE__*/React.createElement(SideNavVisibilityProvider, null, /*#__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, {
+  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, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/React.createElement(SkipLinksProvider, {
     label: skipLinksLabel,

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

@@ -230,6 +230,11 @@ function SideNavInternal({
     trigger: 'click-outside-on-mobile'
   });
   useEffect(() => {
+    if (fg('platform_dst_nav4_full_height_sidebar_api_changes')) {
+      // We are passing initial state to the Root now, so no initial sync is required
+      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({

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

@@ -44,7 +44,10 @@ export const SideNavToggleButton = ({
   } = useSideNavVisibility({
     defaultCollapsed
   });
-  const [isSideNavExpanded, setIsSideNavExpanded] = useState(!defaultCollapsed);
+
+  // When `platform_dst_nav4_full_height_sidebar_api_changes` is enabled,
+  // we default to the desktop state for SSR
+  const [isSideNavExpanded, setIsSideNavExpanded] = useState(fg('platform_dst_nav4_full_height_sidebar_api_changes') ? isSideNavExpandedOnDesktop : !defaultCollapsed);
   const ref = useContext(SideNavToggleButtonAttachRef);
   const elementRef = useRef(null);
   useEffect(() => {

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

@@ -1,14 +1,23 @@
 import React, { useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SetSideNavVisibilityState, SideNavVisibilityState } from './visibility-context';
 
 /**
  * Manages the side nav visibility state and provides the context.
  */
 export const SideNavVisibilityProvider = ({
-  children
+  children,
+  defaultCollapsed
 }) => {
+  const initialState = fg('platform_dst_nav4_full_height_sidebar_api_changes') ? {
+    desktop: defaultCollapsed ? 'collapsed' : 'expanded',
+    mobile: 'collapsed',
+    flyout: 'closed',
+    lastTrigger: null
+  } : null;
+
   // Defaults to null so we can determine if the value has been set yet (for SSR)
-  const [sideNavState, setSideNavState] = useState(null);
+  const [sideNavState, setSideNavState] = useState(initialState);
   return /*#__PURE__*/React.createElement(SideNavVisibilityState.Provider, {
     value: sideNavState
   }, /*#__PURE__*/React.createElement(SetSideNavVisibilityState.Provider, {

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

@@ -27,7 +27,9 @@ export function Root(_ref) {
     UNSAFE_dangerouslyHoistSlotSizes = _ref$UNSAFE_dangerous === void 0 ? false : _ref$UNSAFE_dangerous,
     _ref$skipLinksLabel = _ref.skipLinksLabel,
     skipLinksLabel = _ref$skipLinksLabel === void 0 ? 'Skip to:' : _ref$skipLinksLabel,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    _ref$defaultSideNavCo = _ref.defaultSideNavCollapsed,
+    defaultSideNavCollapsed = _ref$defaultSideNavCo === void 0 ? false : _ref$defaultSideNavCo;
   var ref = useRef(null);
   useEffect(function () {
     if (process.env.NODE_ENV !== 'production') {
@@ -42,7 +44,9 @@ export function Root(_ref) {
       }
     }
   }, []);
-  return /*#__PURE__*/React.createElement(SideNavVisibilityProvider, null, /*#__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, {
+  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, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/React.createElement(SkipLinksProvider, {
     label: skipLinksLabel,

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

@@ -238,6 +238,11 @@ function SideNavInternal(_ref) {
     trigger: 'click-outside-on-mobile'
   });
   useEffect(function () {
+    if (fg('platform_dst_nav4_full_height_sidebar_api_changes')) {
+      // We are passing initial state to the Root now, so no initial sync is required
+      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({

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

@@ -44,7 +44,10 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
     }),
     isSideNavExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop,
     isSideNavExpandedOnMobile = _useSideNavVisibility.isExpandedOnMobile;
-  var _useState = useState(!defaultCollapsed),
+
+  // When `platform_dst_nav4_full_height_sidebar_api_changes` is enabled,
+  // we default to the desktop state for SSR
+  var _useState = useState(fg('platform_dst_nav4_full_height_sidebar_api_changes') ? isSideNavExpandedOnDesktop : !defaultCollapsed),
     _useState2 = _slicedToArray(_useState, 2),
     isSideNavExpanded = _useState2[0],
     setIsSideNavExpanded = _useState2[1];

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

@@ -1,14 +1,23 @@
 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';
 
 /**
  * Manages the side nav visibility state and provides the context.
  */
 export var SideNavVisibilityProvider = function SideNavVisibilityProvider(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    defaultCollapsed = _ref.defaultCollapsed;
+  var initialState = fg('platform_dst_nav4_full_height_sidebar_api_changes') ? {
+    desktop: defaultCollapsed ? 'collapsed' : 'expanded',
+    mobile: 'collapsed',
+    flyout: 'closed',
+    lastTrigger: null
+  } : null;
+
   // Defaults to null so we can determine if the value has been set yet (for SSR)
-  var _useState = useState(null),
+  var _useState = useState(initialState),
     _useState2 = _slicedToArray(_useState, 2),
     sideNavState = _useState2[0],
     setSideNavState = _useState2[1];

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, }: {
+export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, testId, defaultSideNavCollapsed, }: {
     /**
      * For rendering the layout areas, e.g. TopNav, SideNav, Main.
      * They should be rendered as immediate children.
@@ -35,4 +35,16 @@ export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes,
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * Whether the side nav should be collapsed by default __on desktop screens__.
+     *
+     * It is always collapsed by default for mobile screens.
+     *
+     * This value is used when the side nav is first mounted, but you should continuously update your
+     * persisted state using the `onCollapse` and `onExpand` callbacks, to ensure it is up to date
+     * when the app is reloaded.
+     *
+     * __Note:__ This prop will only work when the `platform_dst_nav4_full_height_sidebar_api_changes` gate is enabled.
+     */
+    defaultSideNavCollapsed?: boolean;
 }): JSX.Element;

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

@@ -12,6 +12,13 @@ type SideNavProps = CommonSlotProps & {
      */
     label?: string;
     /**
+     * @deprecated
+     *
+     * This prop is being replaced by `defaultSideNavCollapsed` on the `Root` element,
+     * and will be removed after `platform_dst_nav4_full_height_sidebar_api_changes` is cleaned up.
+     *
+     * ---
+     *
      * Whether the side nav should be collapsed by default __on desktop screens__.
      *
      * It is always collapsed by default for mobile screens.

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

@@ -14,6 +14,13 @@ export type SideNavVisibilityChangeAnalyticsAttributes = {
  */
 export declare const SideNavToggleButton: ({ defaultCollapsed, expandLabel, collapseLabel, testId, interactionName, onClick, }: {
     /**
+     * @deprecated
+     *
+     * This prop is being replaced by `defaultSideNavCollapsed` on the `Root` element,
+     * and will be removed after `platform_dst_nav4_full_height_sidebar_api_changes` is cleaned up.
+     *
+     * ---
+     *
      * Whether the side nav should be collapsed by default __on desktop screens__.
      *
      * It is always collapsed by default for mobile screens.

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

@@ -2,6 +2,7 @@ import React from 'react';
 /**
  * Manages the side nav visibility state and provides the context.
  */
-export declare const SideNavVisibilityProvider: ({ children }: {
+export declare const SideNavVisibilityProvider: ({ children, defaultCollapsed, }: {
     children: React.ReactNode;
+    defaultCollapsed: boolean;
 }) => React.JSX.Element;

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, }: {
+export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, testId, defaultSideNavCollapsed, }: {
     /**
      * For rendering the layout areas, e.g. TopNav, SideNav, Main.
      * They should be rendered as immediate children.
@@ -35,4 +35,16 @@ export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes,
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * Whether the side nav should be collapsed by default __on desktop screens__.
+     *
+     * It is always collapsed by default for mobile screens.
+     *
+     * This value is used when the side nav is first mounted, but you should continuously update your
+     * persisted state using the `onCollapse` and `onExpand` callbacks, to ensure it is up to date
+     * when the app is reloaded.
+     *
+     * __Note:__ This prop will only work when the `platform_dst_nav4_full_height_sidebar_api_changes` gate is enabled.
+     */
+    defaultSideNavCollapsed?: boolean;
 }): JSX.Element;

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

@@ -12,6 +12,13 @@ type SideNavProps = CommonSlotProps & {
      */
     label?: string;
     /**
+     * @deprecated
+     *
+     * This prop is being replaced by `defaultSideNavCollapsed` on the `Root` element,
+     * and will be removed after `platform_dst_nav4_full_height_sidebar_api_changes` is cleaned up.
+     *
+     * ---
+     *
      * Whether the side nav should be collapsed by default __on desktop screens__.
      *
      * It is always collapsed by default for mobile screens.

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

@@ -14,6 +14,13 @@ export type SideNavVisibilityChangeAnalyticsAttributes = {
  */
 export declare const SideNavToggleButton: ({ defaultCollapsed, expandLabel, collapseLabel, testId, interactionName, onClick, }: {
     /**
+     * @deprecated
+     *
+     * This prop is being replaced by `defaultSideNavCollapsed` on the `Root` element,
+     * and will be removed after `platform_dst_nav4_full_height_sidebar_api_changes` is cleaned up.
+     *
+     * ---
+     *
      * Whether the side nav should be collapsed by default __on desktop screens__.
      *
      * It is always collapsed by default for mobile screens.

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

@@ -2,6 +2,7 @@ import React from 'react';
 /**
  * Manages the side nav visibility state and provides the context.
  */
-export declare const SideNavVisibilityProvider: ({ children }: {
+export declare const SideNavVisibilityProvider: ({ children, defaultCollapsed, }: {
     children: React.ReactNode;
+    defaultCollapsed: boolean;
 }) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "2.9.0",
+	"version": "2.10.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -71,7 +71,7 @@
 		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/ds-lib": "^5.0.0",
-		"@atlaskit/icon": "^28.1.0",
+		"@atlaskit/icon": "^28.2.0",
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/logo": "^19.7.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -111,7 +111,7 @@
 		"@atlaskit/page-header": "^12.1.0",
 		"@atlaskit/page-layout": "^4.2.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
-		"@atlaskit/select": "^21.2.0",
+		"@atlaskit/select": "^21.3.0",
 		"@atlaskit/skeleton": "^2.1.0",
 		"@atlaskit/temp-nav-app-icons": "^0.10.0",
 		"@atlaskit/textfield": "^8.0.0",