@atlaskit/navigation-system 2.14.2 → 2.16.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlassian/navigation-system
 
+## 2.16.0
+
+### Minor Changes
+
+- [`d219613fe59b7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d219613fe59b7) -
+  When a `FlyoutMenuItemContent` is open, clicking outside the content will close the flyout. We
+  have improved this functionality to make it more resilient to application code that stops events.
+
+  This change was previously behind a feature flag, which has now been removed.
+
+## 2.15.0
+
+### Minor Changes
+
+- [`71f5e9dd549f3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/71f5e9dd549f3) -
+  Adds a fix for the flyout breaking due to stale element references behind the
+  `platform_dst_nav4_side_nav_toggle_ref_fix` feature gate.
+
 ## 2.14.2
 
 ### Patch Changes

package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js

@@ -42,7 +42,7 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
     // code that stops events. We _really_ want to close the flyout whenever
     // user user clicks outside the flyout content
     ,
-    shouldUseCaptureOnOutsideClick: (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_use_capture_outside'),
+    shouldUseCaptureOnOutsideClick: true,
     shouldFitViewport: true,
     testId: containerTestId,
     xcss: flyoutMenuItemContentStyles.root,

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

@@ -68,8 +68,27 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
     setIsSideNavExpanded = _useState2[1];
   var ref = (0, _react.useContext)(_toggleButtonContext.SideNavToggleButtonAttachRef);
   var elementRef = (0, _react.useRef)(null);
+
+  /**
+   * Attempts to address HOT-121458 by ensuring that the toggle button element
+   * in context is always up to date.
+   *
+   * My theory is that something to do with SSR, hydration and suspense was causing the
+   * underlying HTML element to change but without causing the toggle button to remount.
+   *
+   * This meant the effect calling `ref()` did not re-run, and the value in context became stale.
+   */
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    element = _useState4[0],
+    setElement = _useState4[1];
+  (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_toggle_ref_fix')) {
+      ref(element);
+    }
+  }, [element, ref]);
   (0, _react.useEffect)(function () {
-    if ((0, _platformFeatureFlags.fg)('platform_fix_component_state_update_for_suspense')) {
+    if (!(0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_toggle_ref_fix')) {
       ref(elementRef.current);
     }
   }, [elementRef, ref]);
@@ -133,7 +152,7 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
     testId: testId,
     isTooltipDisabled: UNSAFE_isTooltipDisabled,
     interactionName: interactionName,
-    ref: (0, _platformFeatureFlags.fg)('platform_fix_component_state_update_for_suspense') ? elementRef : ref,
+    ref: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_toggle_ref_fix') ? setElement : elementRef,
     tooltip: tooltipProps
   });
   var isInsideSlot = (0, _react.useContext)(_toggleButtonContext.SideNavToggleButtonSlotContext);

package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js

@@ -33,7 +33,7 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
     // code that stops events. We _really_ want to close the flyout whenever
     // user user clicks outside the flyout content
     ,
-    shouldUseCaptureOnOutsideClick: fg('platform_dst_nav4_flyout_use_capture_outside'),
+    shouldUseCaptureOnOutsideClick: true,
     shouldFitViewport: true,
     testId: containerTestId,
     xcss: flyoutMenuItemContentStyles.root,

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

@@ -52,8 +52,24 @@ export const SideNavToggleButton = ({
   const [isSideNavExpanded, setIsSideNavExpanded] = useState(fg('platform_dst_nav4_full_height_sidebar_api_changes') ? isSideNavExpandedOnDesktop : !defaultCollapsed);
   const ref = useContext(SideNavToggleButtonAttachRef);
   const elementRef = useRef(null);
+
+  /**
+   * Attempts to address HOT-121458 by ensuring that the toggle button element
+   * in context is always up to date.
+   *
+   * My theory is that something to do with SSR, hydration and suspense was causing the
+   * underlying HTML element to change but without causing the toggle button to remount.
+   *
+   * This meant the effect calling `ref()` did not re-run, and the value in context became stale.
+   */
+  const [element, setElement] = useState(null);
+  useEffect(() => {
+    if (fg('platform_dst_nav4_side_nav_toggle_ref_fix')) {
+      ref(element);
+    }
+  }, [element, ref]);
   useEffect(() => {
-    if (fg('platform_fix_component_state_update_for_suspense')) {
+    if (!fg('platform_dst_nav4_side_nav_toggle_ref_fix')) {
       ref(elementRef.current);
     }
   }, [elementRef, ref]);
@@ -117,7 +133,7 @@ export const SideNavToggleButton = ({
     testId: testId,
     isTooltipDisabled: UNSAFE_isTooltipDisabled,
     interactionName: interactionName,
-    ref: fg('platform_fix_component_state_update_for_suspense') ? elementRef : ref,
+    ref: fg('platform_dst_nav4_side_nav_toggle_ref_fix') ? setElement : elementRef,
     tooltip: tooltipProps
   });
   const isInsideSlot = useContext(SideNavToggleButtonSlotContext);

package/dist/esm/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js

@@ -33,7 +33,7 @@ export var FlyoutMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwa
     // code that stops events. We _really_ want to close the flyout whenever
     // user user clicks outside the flyout content
     ,
-    shouldUseCaptureOnOutsideClick: fg('platform_dst_nav4_flyout_use_capture_outside'),
+    shouldUseCaptureOnOutsideClick: true,
     shouldFitViewport: true,
     testId: containerTestId,
     xcss: flyoutMenuItemContentStyles.root,

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

@@ -59,8 +59,27 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
     setIsSideNavExpanded = _useState2[1];
   var ref = useContext(SideNavToggleButtonAttachRef);
   var elementRef = useRef(null);
+
+  /**
+   * Attempts to address HOT-121458 by ensuring that the toggle button element
+   * in context is always up to date.
+   *
+   * My theory is that something to do with SSR, hydration and suspense was causing the
+   * underlying HTML element to change but without causing the toggle button to remount.
+   *
+   * This meant the effect calling `ref()` did not re-run, and the value in context became stale.
+   */
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    element = _useState4[0],
+    setElement = _useState4[1];
+  useEffect(function () {
+    if (fg('platform_dst_nav4_side_nav_toggle_ref_fix')) {
+      ref(element);
+    }
+  }, [element, ref]);
   useEffect(function () {
-    if (fg('platform_fix_component_state_update_for_suspense')) {
+    if (!fg('platform_dst_nav4_side_nav_toggle_ref_fix')) {
       ref(elementRef.current);
     }
   }, [elementRef, ref]);
@@ -124,7 +143,7 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
     testId: testId,
     isTooltipDisabled: UNSAFE_isTooltipDisabled,
     interactionName: interactionName,
-    ref: fg('platform_fix_component_state_update_for_suspense') ? elementRef : ref,
+    ref: fg('platform_dst_nav4_side_nav_toggle_ref_fix') ? setElement : elementRef,
     tooltip: tooltipProps
   });
   var isInsideSlot = useContext(SideNavToggleButtonSlotContext);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "2.14.2",
+	"version": "2.16.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -71,9 +71,9 @@
 		"@atlaskit/button": "^23.5.0",
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/ds-lib": "^5.1.0",
-		"@atlaskit/icon": "^28.3.0",
+		"@atlaskit/icon": "^28.4.0",
 		"@atlaskit/layering": "^3.0.0",
-		"@atlaskit/logo": "^19.8.0",
+		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^4.4.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
@@ -146,6 +146,9 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform_dst_nav4_side_nav_toggle_ref_fix": {
+			"type": "boolean"
+		},
 		"platform-component-visual-refresh": {
 			"type": "boolean",
 			"referenceOnly": true
@@ -162,9 +165,6 @@
 		"platform_dst_nav4_layering_in_main_slot_fixes": {
 			"type": "boolean"
 		},
-		"platform_dst_nav4_flyout_use_capture_outside": {
-			"type": "boolean"
-		},
 		"platform_dst_nav4_actionsonhover_focus_fix": {
 			"type": "boolean"
 		},