@atlaskit/navigation-system 11.1.2 → 11.1.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlassian/navigation-system
 
+## 11.1.3
+
+### Patch Changes
+
+- [`dc134f854c5c0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dc134f854c5c0) -
+  Remove the platform-dst-keep-desired-fhs-features gate and enable the desired FHS behavior by
+  default.
+- Updated dependencies
+
 ## 11.1.2
 
 ### Patch Changes

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

@@ -117,8 +117,7 @@ var MaybeTooltip = function MaybeTooltip(_ref2) {
     shortcut = _ref2.shortcut,
     children = _ref2.children,
     testId = _ref2.testId;
-  var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
-  if (tooltipContent && (isFhsEnabled || (0, _fg.fg)('platform-dst-keep-desired-fhs-features'))) {
+  if (tooltipContent) {
     return /*#__PURE__*/React.createElement(_Tooltip.default, {
       testId: testId,
       content: tooltipContent,

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

@@ -17,8 +17,6 @@ var _useAnalyticsEvents2 = require("@atlaskit/analytics-next/useAnalyticsEvents"
 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");
 var _sideNavToggleTooltipKeyboardShortcut = require("./side-nav-toggle-tooltip-keyboard-shortcut");
@@ -54,7 +52,6 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
     testId = _ref.testId,
     interactionName = _ref.interactionName,
     onClick = _ref.onClick;
-  var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
   var _useSideNavVisibility = (0, _useSideNavVisibility2.useSideNavVisibility)({
       defaultCollapsed: defaultCollapsed
     }),
@@ -111,10 +108,8 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-    if (isFhsEnabled || (0, _fg.fg)('platform-dst-keep-desired-fhs-features')) {
-      openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
-    }
-  }, [isFhsEnabled, isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
+    openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
+  }, [isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
   var handlePointerEnter = (0, _react.useCallback)(function () {
     // Hovers don't do anything on mobile, so not capturing
     var isDesktop = window.matchMedia('(min-width: 64rem)').matches;
@@ -155,13 +150,10 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
   };
   var isShortcutEnabled = (0, _useIsSideNavShortcutEnabled.useIsSideNavShortcutEnabled)();
   var tooltipProps = (0, _react.useMemo)(function () {
-    if (isFhsEnabled || (0, _fg.fg)('platform-dst-keep-desired-fhs-features')) {
-      return _objectSpread(_objectSpread({}, toggleButtonTooltipOptions), {}, {
-        shortcut: isShortcutEnabled ? _sideNavToggleTooltipKeyboardShortcut.sideNavToggleTooltipKeyboardShortcut : undefined
-      });
-    }
-    return toggleButtonTooltipOptions;
-  }, [isFhsEnabled, isShortcutEnabled]);
+    return _objectSpread(_objectSpread({}, toggleButtonTooltipOptions), {}, {
+      shortcut: isShortcutEnabled ? _sideNavToggleTooltipKeyboardShortcut.sideNavToggleTooltipKeyboardShortcut : undefined
+    });
+  }, [isShortcutEnabled]);
   return /*#__PURE__*/_react.default.createElement(_iconButton.IconButton, {
     appearance: "subtle",
     label: isSideNavExpanded ? collapseLabel : expandLabel,

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

@@ -9,8 +9,6 @@ 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");
 /**
@@ -18,7 +16,6 @@ var _useToggleSideNav = require("./use-toggle-side-nav");
  */
 function useSideNavToggleKeyboardShortcut(_ref) {
   var canToggleWithShortcut = _ref.canToggleWithShortcut;
-  var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
   var openLayerObserver = (0, _useOpenLayerObserver.useOpenLayerObserver)();
   var toggleVisibilityByShortcut = (0, _useToggleSideNav.useToggleSideNav)({
     trigger: 'keyboard'
@@ -26,9 +23,6 @@ function useSideNavToggleKeyboardShortcut(_ref) {
   var canToggleWithShortcutStableRef = (0, _useStableRef.default)(canToggleWithShortcut);
   var isSideNavShortcutEnabled = (0, _useIsSideNavShortcutEnabled.useIsSideNavShortcutEnabled)();
   (0, _react.useEffect)(function () {
-    if (!isFhsEnabled && !(0, _fg.fg)('platform-dst-keep-desired-fhs-features')) {
-      return;
-    }
     if (!isSideNavShortcutEnabled) {
       return;
     }
@@ -56,5 +50,5 @@ function useSideNavToggleKeyboardShortcut(_ref) {
         }
       }
     });
-  }, [canToggleWithShortcutStableRef, isFhsEnabled, isSideNavShortcutEnabled, openLayerObserver, toggleVisibilityByShortcut]);
+  }, [canToggleWithShortcutStableRef, isSideNavShortcutEnabled, openLayerObserver, toggleVisibilityByShortcut]);
 }

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

@@ -105,8 +105,7 @@ const MaybeTooltip = ({
   children,
   testId
 }) => {
-  const isFhsEnabled = useIsFhsEnabled();
-  if (tooltipContent && (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features'))) {
+  if (tooltipContent) {
     return /*#__PURE__*/React.createElement(Tooltip, {
       testId: testId,
       content: tooltipContent,

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

@@ -7,8 +7,6 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents'
 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';
 import { sideNavToggleTooltipKeyboardShortcut } from './side-nav-toggle-tooltip-keyboard-shortcut';
@@ -41,7 +39,6 @@ export const SideNavToggleButton = ({
   interactionName,
   onClick
 }) => {
-  const isFhsEnabled = useIsFhsEnabled();
   const {
     isExpandedOnDesktop: isSideNavExpandedOnDesktop,
     isExpandedOnMobile: isSideNavExpandedOnMobile
@@ -95,10 +92,8 @@ export const SideNavToggleButton = ({
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-    if (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features')) {
-      openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.closeLayers();
-    }
-  }, [isFhsEnabled, isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
+    openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.closeLayers();
+  }, [isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
   const handlePointerEnter = useCallback(() => {
     // Hovers don't do anything on mobile, so not capturing
     const isDesktop = window.matchMedia('(min-width: 64rem)').matches;
@@ -136,15 +131,10 @@ export const SideNavToggleButton = ({
     className: ax(["_1e0c1bgi _lcxvglyw"])
   }, isSideNavExpanded ? /*#__PURE__*/React.createElement(SidebarCollapseIcon, props) : /*#__PURE__*/React.createElement(SidebarExpandIcon, props));
   const isShortcutEnabled = useIsSideNavShortcutEnabled();
-  const tooltipProps = useMemo(() => {
-    if (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features')) {
-      return {
-        ...toggleButtonTooltipOptions,
-        shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined
-      };
-    }
-    return toggleButtonTooltipOptions;
-  }, [isFhsEnabled, isShortcutEnabled]);
+  const tooltipProps = useMemo(() => ({
+    ...toggleButtonTooltipOptions,
+    shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined
+  }), [isShortcutEnabled]);
   return /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     label: isSideNavExpanded ? collapseLabel : expandLabel,

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

@@ -2,8 +2,6 @@ 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';
 
@@ -13,7 +11,6 @@ import { useToggleSideNav } from './use-toggle-side-nav';
 export function useSideNavToggleKeyboardShortcut({
   canToggleWithShortcut
 }) {
-  const isFhsEnabled = useIsFhsEnabled();
   const openLayerObserver = useOpenLayerObserver();
   const toggleVisibilityByShortcut = useToggleSideNav({
     trigger: 'keyboard'
@@ -21,9 +18,6 @@ export function useSideNavToggleKeyboardShortcut({
   const canToggleWithShortcutStableRef = useStableRef(canToggleWithShortcut);
   const isSideNavShortcutEnabled = useIsSideNavShortcutEnabled();
   useEffect(() => {
-    if (!isFhsEnabled && !fg('platform-dst-keep-desired-fhs-features')) {
-      return;
-    }
     if (!isSideNavShortcutEnabled) {
       return;
     }
@@ -51,5 +45,5 @@ export function useSideNavToggleKeyboardShortcut({
         }
       }
     });
-  }, [canToggleWithShortcutStableRef, isFhsEnabled, isSideNavShortcutEnabled, openLayerObserver, toggleVisibilityByShortcut]);
+  }, [canToggleWithShortcutStableRef, isSideNavShortcutEnabled, openLayerObserver, toggleVisibilityByShortcut]);
 }

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

@@ -108,8 +108,7 @@ var MaybeTooltip = function MaybeTooltip(_ref2) {
     shortcut = _ref2.shortcut,
     children = _ref2.children,
     testId = _ref2.testId;
-  var isFhsEnabled = useIsFhsEnabled();
-  if (tooltipContent && (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features'))) {
+  if (tooltipContent) {
     return /*#__PURE__*/React.createElement(Tooltip, {
       testId: testId,
       content: tooltipContent,

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

@@ -11,8 +11,6 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents'
 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';
 import { sideNavToggleTooltipKeyboardShortcut } from './side-nav-toggle-tooltip-keyboard-shortcut';
@@ -45,7 +43,6 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
     testId = _ref.testId,
     interactionName = _ref.interactionName,
     onClick = _ref.onClick;
-  var isFhsEnabled = useIsFhsEnabled();
   var _useSideNavVisibility = useSideNavVisibility({
       defaultCollapsed: defaultCollapsed
     }),
@@ -102,10 +99,8 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-    if (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features')) {
-      openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
-    }
-  }, [isFhsEnabled, isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
+    openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
+  }, [isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
   var handlePointerEnter = useCallback(function () {
     // Hovers don't do anything on mobile, so not capturing
     var isDesktop = window.matchMedia('(min-width: 64rem)').matches;
@@ -146,13 +141,10 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
   };
   var isShortcutEnabled = useIsSideNavShortcutEnabled();
   var tooltipProps = useMemo(function () {
-    if (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features')) {
-      return _objectSpread(_objectSpread({}, toggleButtonTooltipOptions), {}, {
-        shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined
-      });
-    }
-    return toggleButtonTooltipOptions;
-  }, [isFhsEnabled, isShortcutEnabled]);
+    return _objectSpread(_objectSpread({}, toggleButtonTooltipOptions), {}, {
+      shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined
+    });
+  }, [isShortcutEnabled]);
   return /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     label: isSideNavExpanded ? collapseLabel : expandLabel,

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

@@ -2,8 +2,6 @@ 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';
 
@@ -12,7 +10,6 @@ import { useToggleSideNav } from './use-toggle-side-nav';
  */
 export function useSideNavToggleKeyboardShortcut(_ref) {
   var canToggleWithShortcut = _ref.canToggleWithShortcut;
-  var isFhsEnabled = useIsFhsEnabled();
   var openLayerObserver = useOpenLayerObserver();
   var toggleVisibilityByShortcut = useToggleSideNav({
     trigger: 'keyboard'
@@ -20,9 +17,6 @@ export function useSideNavToggleKeyboardShortcut(_ref) {
   var canToggleWithShortcutStableRef = useStableRef(canToggleWithShortcut);
   var isSideNavShortcutEnabled = useIsSideNavShortcutEnabled();
   useEffect(function () {
-    if (!isFhsEnabled && !fg('platform-dst-keep-desired-fhs-features')) {
-      return;
-    }
     if (!isSideNavShortcutEnabled) {
       return;
     }
@@ -50,5 +44,5 @@ export function useSideNavToggleKeyboardShortcut(_ref) {
         }
       }
     });
-  }, [canToggleWithShortcutStableRef, isFhsEnabled, isSideNavShortcutEnabled, openLayerObserver, toggleVisibilityByShortcut]);
+  }, [canToggleWithShortcutStableRef, isSideNavShortcutEnabled, openLayerObserver, toggleVisibilityByShortcut]);
 }

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 `platform-dst-keep-desired-fhs-features` or `useIsFhsEnabled` is enabled.
+     * Used when the panel splitter tooltip is enabled.
      */
     tooltipContent?: PanelSplitterProps['tooltipContent'];
 };

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

@@ -65,8 +65,7 @@ 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 the `platform-dst-keep-desired-fhs-features`
-     * feature gate, or `useIsFhsEnabled` for backwards compatibility.
+     * The built-in keyboard shortcut is available whenever this prop is enabled.
      */
     isSideNavShortcutEnabled?: boolean;
 }): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "11.1.2",
+	"version": "11.1.3",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"license": "Apache-2.0",
@@ -66,7 +66,7 @@
 		"@atlaskit/icon": "^38.0.0",
 		"@atlaskit/layering": "^6.0.0",
 		"@atlaskit/logo": "^23.3.0",
-		"@atlaskit/motion": "^9.1.0",
+		"@atlaskit/motion": "^9.2.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/platform-feature-flags-react": "^1.2.0",
 		"@atlaskit/popup": "^9.0.0",
@@ -152,9 +152,6 @@
 		"navx-full-height-sidebar": {
 			"type": "boolean"
 		},
-		"platform-dst-keep-desired-fhs-features": {
-			"type": "boolean"
-		},
 		"platform_dst_button_chevron_sizing": {
 			"type": "boolean"
 		},