@atlaskit/navigation-system 10.13.0 → 10.14.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlassian/navigation-system
 
+## 10.14.0
+
+### Minor Changes
+
+- [`2309581c02076`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2309581c02076) -
+  Decouple the built-in side nav shortcut, toggle tooltip shortcut, and side nav splitter tooltip
+  from the full height sidebar rollout behind `platform-dst-keep-desired-fhs-features`.
+
 ## 10.13.0
 
 ### Minor Changes

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

@@ -21,6 +21,7 @@ var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
 var _useOpenLayerObserver = require("@atlaskit/layering/use-open-layer-observer");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _blockDraggingToIframes = require("@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes");
@@ -116,7 +117,7 @@ var MaybeTooltip = function MaybeTooltip(_ref2) {
     children = _ref2.children,
     testId = _ref2.testId;
   var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
-  if (tooltipContent && isFhsEnabled) {
+  if (tooltipContent && (isFhsEnabled || (0, _fg.fg)('platform-dst-keep-desired-fhs-features'))) {
     return /*#__PURE__*/React.createElement(_tooltip.default, {
       testId: testId,
       content: tooltipContent,

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

@@ -17,6 +17,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _sidebarCollapse = _interopRequireDefault(require("@atlaskit/icon/core/sidebar-collapse"));
 var _sidebarExpand = _interopRequireDefault(require("@atlaskit/icon/core/sidebar-expand"));
 var _useOpenLayerObserver = require("@atlaskit/layering/use-open-layer-observer");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _iconButton = require("../../top-nav-items/themed/icon-button");
 var _sideNavToggleButtonAttachRef = require("./side-nav-toggle-button-attach-ref");
@@ -107,7 +108,7 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-    if (isFhsEnabled) {
+    if (isFhsEnabled || (0, _fg.fg)('platform-dst-keep-desired-fhs-features')) {
       openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
     }
   }, [isFhsEnabled, isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
@@ -151,7 +152,7 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
   };
   var isShortcutEnabled = (0, _useIsSideNavShortcutEnabled.useIsSideNavShortcutEnabled)();
   var tooltipProps = (0, _react.useMemo)(function () {
-    if (isFhsEnabled) {
+    if (isFhsEnabled || (0, _fg.fg)('platform-dst-keep-desired-fhs-features')) {
       return _objectSpread(_objectSpread({}, toggleButtonTooltipOptions), {}, {
         shortcut: isShortcutEnabled ? _sideNavToggleTooltipKeyboardShortcut.sideNavToggleTooltipKeyboardShortcut : undefined
       });

package/dist/cjs/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js

@@ -9,6 +9,7 @@ var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
 var _useOpenLayerObserver = require("@atlaskit/layering/use-open-layer-observer");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _useIsSideNavShortcutEnabled = require("./use-is-side-nav-shortcut-enabled");
 var _useToggleSideNav = require("./use-toggle-side-nav");
@@ -25,7 +26,7 @@ function useSideNavToggleKeyboardShortcut(_ref) {
   var canToggleWithShortcutStableRef = (0, _useStableRef.default)(canToggleWithShortcut);
   var isSideNavShortcutEnabled = (0, _useIsSideNavShortcutEnabled.useIsSideNavShortcutEnabled)();
   (0, _react.useEffect)(function () {
-    if (!isFhsEnabled) {
+    if (!isFhsEnabled && !(0, _fg.fg)('platform-dst-keep-desired-fhs-features')) {
       return;
     }
     if (!isSideNavShortcutEnabled) {

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

@@ -10,6 +10,7 @@ import invariant from 'tiny-invariant';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { blockDraggingToIFrames } from '@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes';
@@ -104,7 +105,7 @@ const MaybeTooltip = ({
   testId
 }) => {
   const isFhsEnabled = useIsFhsEnabled();
-  if (tooltipContent && isFhsEnabled) {
+  if (tooltipContent && (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features'))) {
     return /*#__PURE__*/React.createElement(Tooltip, {
       testId: testId,
       content: tooltipContent,

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

@@ -7,6 +7,7 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
 import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { IconButton } from '../../top-nav-items/themed/icon-button';
 import { SideNavToggleButtonAttachRef } from './side-nav-toggle-button-attach-ref';
@@ -91,7 +92,7 @@ export const SideNavToggleButton = ({
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-    if (isFhsEnabled) {
+    if (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features')) {
       openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.closeLayers();
     }
   }, [isFhsEnabled, isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
@@ -133,7 +134,7 @@ export const SideNavToggleButton = ({
   }, isSideNavExpanded ? /*#__PURE__*/React.createElement(SidebarCollapseIcon, props) : /*#__PURE__*/React.createElement(SidebarExpandIcon, props));
   const isShortcutEnabled = useIsSideNavShortcutEnabled();
   const tooltipProps = useMemo(() => {
-    if (isFhsEnabled) {
+    if (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features')) {
       return {
         ...toggleButtonTooltipOptions,
         shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined

package/dist/es2019/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { bind } from 'bind-event-listener';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { useIsSideNavShortcutEnabled } from './use-is-side-nav-shortcut-enabled';
 import { useToggleSideNav } from './use-toggle-side-nav';
@@ -20,7 +21,7 @@ export function useSideNavToggleKeyboardShortcut({
   const canToggleWithShortcutStableRef = useStableRef(canToggleWithShortcut);
   const isSideNavShortcutEnabled = useIsSideNavShortcutEnabled();
   useEffect(() => {
-    if (!isFhsEnabled) {
+    if (!isFhsEnabled && !fg('platform-dst-keep-desired-fhs-features')) {
       return;
     }
     if (!isSideNavShortcutEnabled) {

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

@@ -16,6 +16,7 @@ import invariant from 'tiny-invariant';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { blockDraggingToIFrames } from '@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes';
@@ -107,7 +108,7 @@ var MaybeTooltip = function MaybeTooltip(_ref2) {
     children = _ref2.children,
     testId = _ref2.testId;
   var isFhsEnabled = useIsFhsEnabled();
-  if (tooltipContent && isFhsEnabled) {
+  if (tooltipContent && (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features'))) {
     return /*#__PURE__*/React.createElement(Tooltip, {
       testId: testId,
       content: tooltipContent,

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

@@ -11,6 +11,7 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
 import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { IconButton } from '../../top-nav-items/themed/icon-button';
 import { SideNavToggleButtonAttachRef } from './side-nav-toggle-button-attach-ref';
@@ -98,7 +99,7 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-    if (isFhsEnabled) {
+    if (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features')) {
       openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
     }
   }, [isFhsEnabled, isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
@@ -142,7 +143,7 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
   };
   var isShortcutEnabled = useIsSideNavShortcutEnabled();
   var tooltipProps = useMemo(function () {
-    if (isFhsEnabled) {
+    if (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features')) {
       return _objectSpread(_objectSpread({}, toggleButtonTooltipOptions), {}, {
         shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined
       });

package/dist/esm/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { bind } from 'bind-event-listener';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { useIsSideNavShortcutEnabled } from './use-is-side-nav-shortcut-enabled';
 import { useToggleSideNav } from './use-toggle-side-nav';
@@ -19,7 +20,7 @@ export function useSideNavToggleKeyboardShortcut(_ref) {
   var canToggleWithShortcutStableRef = useStableRef(canToggleWithShortcut);
   var isSideNavShortcutEnabled = useIsSideNavShortcutEnabled();
   useEffect(function () {
-    if (!isFhsEnabled) {
+    if (!isFhsEnabled && !fg('platform-dst-keep-desired-fhs-features')) {
       return;
     }
     if (!isSideNavShortcutEnabled) {

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

@@ -17,7 +17,7 @@ type SideNavPanelSplitterProps = Omit<PanelSplitterProps, 'onDoubleClick' | 'too
      *
      * If the `isSideNavShortcutEnabled` prop is enabled on `<Root />`, the built-in keyboard shortcut will be displayed with the tooltip.
      *
-     * Only used if `useIsFhsEnabled` is true.
+     * Only used if `platform-dst-keep-desired-fhs-features` or `useIsFhsEnabled` is enabled.
      */
     tooltipContent?: PanelSplitterProps['tooltipContent'];
 };

package/dist/types/ui/page-layout/root.d.ts

@@ -65,7 +65,8 @@ export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes,
      * 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 `useIsFhsEnabled`.
+     * Note: The built-in keyboard shortcut is behind the `platform-dst-keep-desired-fhs-features`
+     * feature gate, or `useIsFhsEnabled` for backwards compatibility.
      */
     isSideNavShortcutEnabled?: boolean;
 }): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "10.13.0",
+	"version": "10.14.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -134,6 +134,9 @@
 		"navx-full-height-sidebar": {
 			"type": "boolean"
 		},
+		"platform-dst-keep-desired-fhs-features": {
+			"type": "boolean"
+		},
 		"platform_dst_button_chevron_sizing": {
 			"type": "boolean"
 		},