@atlaskit/navigation-system 2.5.0 → 2.6.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlassian/navigation-system
 
+## 2.6.1
+
+### Patch Changes
+
+- [`2445e6e19f1c7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2445e6e19f1c7) -
+  pass testId to menuList
+
+## 2.6.0
+
+### Minor Changes
+
+- [`e9ddf34435a22`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e9ddf34435a22) -
+  Clicking dropdown menu items will no longer collapse the side navigation on mobile. This change is
+  behind a feature flag.
+
 ## 2.5.0
 
 ### Minor Changes

package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item.js

@@ -46,7 +46,8 @@ var ExpandableMenuItem = exports.ExpandableMenuItem = /*#__PURE__*/(0, _react.fo
     isDefaultExpanded = _ref$isDefaultExpande === void 0 ? false : _ref$isDefaultExpande,
     onExpansionToggle = _ref.onExpansionToggle,
     children = _ref.children,
-    dropIndicator = _ref.dropIndicator;
+    dropIndicator = _ref.dropIndicator,
+    testId = _ref.testId;
   var _useControlled = (0, _useControlled3.default)(isExpandedControlled, function () {
       return isDefaultExpanded;
     }),
@@ -60,7 +61,8 @@ var ExpandableMenuItem = exports.ExpandableMenuItem = /*#__PURE__*/(0, _react.fo
   }, /*#__PURE__*/React.createElement(_expandableMenuItemContext.OnExpansionToggleContext.Provider, {
     value: onExpansionToggle !== null && onExpansionToggle !== void 0 ? onExpansionToggle : null
   }, /*#__PURE__*/React.createElement(_menuListItem.MenuListItem, {
-    ref: forwardedRef
+    ref: forwardedRef,
+    testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)([dropIndicator && relativeStyles.root])
   }, children, dropIndicator)))));

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

@@ -342,6 +342,15 @@ function SideNavInternal(_ref) {
           // Ignore if our element references are invalid
           return;
         }
+        if (!event.target.isConnected && (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_click_outside_fix')) {
+          /**
+           * If the element that was clicked is no longer in the document, we should not collapse the side nav.
+           * This can happen when the user clicks on a dropdown menu item (such as one used in a `...` More menu),
+           * as the dropdown menu will close after being clicked. By the time this event listener runs, the clicked
+           * element will no longer be in the document, so the check below for `sideNav.contains(event.target)` will fail.
+           */
+          return;
+        }
         if (sideNav.contains(event.target)) {
           // Clicks inside the side nav should not close it
           return;

package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item.js

@@ -35,7 +35,8 @@ export const ExpandableMenuItem = /*#__PURE__*/forwardRef(({
   isDefaultExpanded = false,
   onExpansionToggle,
   children,
-  dropIndicator
+  dropIndicator,
+  testId
 }, forwardedRef) => {
   const [isExpanded, setIsExpanded] = useControlled(isExpandedControlled, () => isDefaultExpanded);
   return /*#__PURE__*/React.createElement(IsExpandedContext.Provider, {
@@ -45,7 +46,8 @@ export const ExpandableMenuItem = /*#__PURE__*/forwardRef(({
   }, /*#__PURE__*/React.createElement(OnExpansionToggleContext.Provider, {
     value: onExpansionToggle !== null && onExpansionToggle !== void 0 ? onExpansionToggle : null
   }, /*#__PURE__*/React.createElement(MenuListItem, {
-    ref: forwardedRef
+    ref: forwardedRef,
+    testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([dropIndicator && relativeStyles.root])
   }, children, dropIndicator)))));

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

@@ -327,6 +327,15 @@ function SideNavInternal({
           // Ignore if our element references are invalid
           return;
         }
+        if (!event.target.isConnected && fg('platform_dst_nav4_side_nav_click_outside_fix')) {
+          /**
+           * If the element that was clicked is no longer in the document, we should not collapse the side nav.
+           * This can happen when the user clicks on a dropdown menu item (such as one used in a `...` More menu),
+           * as the dropdown menu will close after being clicked. By the time this event listener runs, the clicked
+           * element will no longer be in the document, so the check below for `sideNav.contains(event.target)` will fail.
+           */
+          return;
+        }
         if (sideNav.contains(event.target)) {
           // Clicks inside the side nav should not close it
           return;

package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item.js

@@ -37,7 +37,8 @@ export var ExpandableMenuItem = /*#__PURE__*/forwardRef(function (_ref, forwarde
     isDefaultExpanded = _ref$isDefaultExpande === void 0 ? false : _ref$isDefaultExpande,
     onExpansionToggle = _ref.onExpansionToggle,
     children = _ref.children,
-    dropIndicator = _ref.dropIndicator;
+    dropIndicator = _ref.dropIndicator,
+    testId = _ref.testId;
   var _useControlled = useControlled(isExpandedControlled, function () {
       return isDefaultExpanded;
     }),
@@ -51,7 +52,8 @@ export var ExpandableMenuItem = /*#__PURE__*/forwardRef(function (_ref, forwarde
   }, /*#__PURE__*/React.createElement(OnExpansionToggleContext.Provider, {
     value: onExpansionToggle !== null && onExpansionToggle !== void 0 ? onExpansionToggle : null
   }, /*#__PURE__*/React.createElement(MenuListItem, {
-    ref: forwardedRef
+    ref: forwardedRef,
+    testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([dropIndicator && relativeStyles.root])
   }, children, dropIndicator)))));

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

@@ -333,6 +333,15 @@ function SideNavInternal(_ref) {
           // Ignore if our element references are invalid
           return;
         }
+        if (!event.target.isConnected && fg('platform_dst_nav4_side_nav_click_outside_fix')) {
+          /**
+           * If the element that was clicked is no longer in the document, we should not collapse the side nav.
+           * This can happen when the user clicks on a dropdown menu item (such as one used in a `...` More menu),
+           * as the dropdown menu will close after being clicked. By the time this event listener runs, the clicked
+           * element will no longer be in the document, so the check below for `sideNav.contains(event.target)` will fail.
+           */
+          return;
+        }
         if (sideNav.contains(event.target)) {
           // Clicks inside the side nav should not close it
           return;

package/dist/types/ui/menu-item/expandable-menu-item/expandable-menu-item.d.ts

@@ -37,6 +37,10 @@ export type ExpandableMenuItemProps = {
      * and not when only the `ExpandableMenuItemTrigger` is a drop target.
      */
     dropIndicator?: ReactNode;
+    /**
+     * testId for MenuListItem
+     */
+    testId?: string;
 };
 /**
  * __ExpandableMenuItem__

package/dist/types-ts4.5/ui/menu-item/expandable-menu-item/expandable-menu-item.d.ts

@@ -37,6 +37,10 @@ export type ExpandableMenuItemProps = {
      * and not when only the `ExpandableMenuItemTrigger` is a drop target.
      */
     dropIndicator?: ReactNode;
+    /**
+     * testId for MenuListItem
+     */
+    testId?: string;
 };
 /**
  * __ExpandableMenuItem__

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "2.5.0",
+	"version": "2.6.1",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -184,6 +184,9 @@
 		},
 		"platform_dst_nav4_menu_section_heading_a11y": {
 			"type": "boolean"
+		},
+		"platform_dst_nav4_side_nav_click_outside_fix": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/navigation-system"