@atlaskit/navigation-system 2.4.1 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlassian/navigation-system
 
+## 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
+
+- [`f506e887c7e55`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f506e887c7e55) -
+  Cleans up `platform_design_system_nav4_panel_default_border` feature flag. The `Panel` slot will
+  have a border by default.
+
 ## 2.4.1
 
 ### Patch Changes

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

@@ -63,7 +63,7 @@ function Panel(_ref) {
     providedId = _ref.id,
     xcss = _ref.xcss,
     _ref$hasBorder = _ref.hasBorder,
-    hasBorder = _ref$hasBorder === void 0 ? (0, _platformFeatureFlags.fg)('platform_design_system_nav4_panel_default_border') : _ref$hasBorder;
+    hasBorder = _ref$hasBorder === void 0 ? true : _ref$hasBorder;
   var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
   var id = (0, _idUtils.useLayoutId)({
     providedId: providedId

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/page-layout/panel.js

@@ -48,7 +48,7 @@ export function Panel({
   testId,
   id: providedId,
   xcss,
-  hasBorder = fg('platform_design_system_nav4_panel_default_border')
+  hasBorder = true
 }) {
   const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
   const id = useLayoutId({

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/page-layout/panel.js

@@ -54,7 +54,7 @@ export function Panel(_ref) {
     providedId = _ref.id,
     xcss = _ref.xcss,
     _ref$hasBorder = _ref.hasBorder,
-    hasBorder = _ref$hasBorder === void 0 ? fg('platform_design_system_nav4_panel_default_border') : _ref$hasBorder;
+    hasBorder = _ref$hasBorder === void 0 ? true : _ref$hasBorder;
   var dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
   var id = useLayoutId({
     providedId: providedId

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/page-layout/panel.d.ts

@@ -32,9 +32,9 @@ export declare function Panel({ children, defaultWidth: defaultWidthProp, label,
     /**
      * Whether or not the slot has its own border. On small screens this becomes a shadow.
      *
-     * Defaults to the `platform_design_system_nav4_panel_default_border` gate.
-     * This will be `false` while we update app usage, eventually becoming `true`.
-     * Then this prop will be removed.
+     * Defaults to true. Will be removed in the future (and disabling the border will not be supported).
+     *
+     * @deprecated
      */
     hasBorder?: boolean;
 }): JSX.Element;

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

@@ -32,9 +32,9 @@ export declare function Panel({ children, defaultWidth: defaultWidthProp, label,
     /**
      * Whether or not the slot has its own border. On small screens this becomes a shadow.
      *
-     * Defaults to the `platform_design_system_nav4_panel_default_border` gate.
-     * This will be `false` while we update app usage, eventually becoming `true`.
-     * Then this prop will be removed.
+     * Defaults to true. Will be removed in the future (and disabling the border will not be supported).
+     *
+     * @deprecated
      */
     hasBorder?: boolean;
 }): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "2.4.1",
+	"version": "2.6.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -152,9 +152,6 @@
 		"platform_design_system_nav4_sidenav_border": {
 			"type": "boolean"
 		},
-		"platform_design_system_nav4_panel_default_border": {
-			"type": "boolean"
-		},
 		"platform-team25-app-icon-tiles": {
 			"type": "boolean"
 		},
@@ -187,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"