@atlaskit/side-nav-items 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/side-nav-items
 
+## 1.3.0
+
+### Minor Changes
+
+- [`c50f9ea3221b7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c50f9ea3221b7) -
+  The `description` of menu items will now use the selected state token when the menu item is
+  selected.
+
+  This change was previously behind the feature gate `platform-dst-menu-item-description-selected`,
+  which has now been cleaned up.
+
+## 1.2.0
+
+### Minor Changes
+
+- [`d06bf7b1c35dd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d06bf7b1c35dd) -
+  Added back event firing analytics for flyout menu opening, and flyout menu closing upon trigger
+  click. Added back tests for flyout menu open and close analytics.
+
 ## 1.1.0
 
 ### Minor Changes

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

@@ -13,8 +13,10 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experimental = require("@atlaskit/popup/experimental");
 var _menuItem = require("../menu-item");
+var _flyoutMenuItemContext = require("./flyout-menu-item-context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var elemAfterStyles = {
   root: "_18zr12x7 _1tz3r0mg"
@@ -36,6 +38,18 @@ var FlyoutMenuItemTrigger = exports.FlyoutMenuItemTrigger = /*#__PURE__*/(0, _re
     isDragging = _ref.isDragging,
     hasDragIndicator = _ref.hasDragIndicator,
     dropIndicator = _ref.dropIndicator;
+  var isOpen = (0, _react.useContext)(_flyoutMenuItemContext.IsOpenContext);
+  var onCloseRef = (0, _react.useContext)(_flyoutMenuItemContext.OnCloseContext);
+  var handleClick = (0, _react.useCallback)(function (event, analyticsEvent) {
+    // If the flyout is open and the trigger is clicked, close the flyout and call the onClick
+    // handler with the source information set to 'outside-click'.
+    if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button')) {
+      if (isOpen && onCloseRef.current) {
+        onCloseRef.current(event, 'outside-click');
+      }
+    }
+    onClick === null || onClick === void 0 || onClick(event, analyticsEvent);
+  }, [isOpen, onCloseRef, onClick]);
   return /*#__PURE__*/React.createElement(_experimental.PopupTrigger, null, function (_ref2) {
     var ref = _ref2.ref,
       ariaControls = _ref2['aria-controls'],
@@ -53,7 +67,7 @@ var FlyoutMenuItemTrigger = exports.FlyoutMenuItemTrigger = /*#__PURE__*/(0, _re
         color: "currentColor",
         size: "small"
       })),
-      onClick: onClick,
+      onClick: handleClick,
       ariaControls: ariaControls,
       ariaExpanded: ariaExpanded,
       ariaHasPopup: ariaHasPopup,

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.FlyoutMenuItem = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _analyticsNext = require("@atlaskit/analytics-next");
 var _useControlled3 = _interopRequireDefault(require("@atlaskit/ds-lib/use-controlled"));
 var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -49,6 +50,9 @@ var FlyoutMenuItem = exports.FlyoutMenuItem = /*#__PURE__*/(0, _react.forwardRef
     isOpen = _useControlled2[0],
     setIsOpen = _useControlled2[1];
   var previousIsOpen = (0, _usePreviousValue.default)(isOpen);
+  var onCloseRef = (0, _react.useRef)(null);
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   (0, _react.useEffect)(function () {
     if (previousIsOpen === undefined || previousIsOpen === isOpen) {
       /**
@@ -60,17 +64,31 @@ var FlyoutMenuItem = exports.FlyoutMenuItem = /*#__PURE__*/(0, _react.forwardRef
        */
       return;
     }
+
+    // When flyout menu is opened, fire analytics event
+    if (isOpen && previousIsOpen === false) {
+      if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button')) {
+        var navigationAnalyticsEvent = createAnalyticsEvent({
+          source: 'sideNav',
+          actionSubject: 'flyoutMenu',
+          action: 'opened'
+        });
+        navigationAnalyticsEvent.fire('navigation');
+      }
+    }
     onOpenChange === null || onOpenChange === void 0 || onOpenChange(isOpen);
-  }, [isOpen, onOpenChange, previousIsOpen]);
+  }, [isOpen, onOpenChange, previousIsOpen, createAnalyticsEvent]);
   return /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.IsOpenContext.Provider, {
     value: isOpen
   }, /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.SetIsOpenContext.Provider, {
     value: setIsOpen
+  }, /*#__PURE__*/_react.default.createElement(_flyoutMenuItemContext.OnCloseContext.Provider, {
+    value: onCloseRef
   }, /*#__PURE__*/_react.default.createElement(_menuListItem.MenuListItem, {
     ref: forwardedRef
   }, /*#__PURE__*/_react.default.createElement(_experimental.Popup, {
     id: id,
     isOpen: isOpen,
     role: (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined
-  }, children))));
+  }, children)))));
 });

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

@@ -281,10 +281,10 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref2, forwardedRef) {
     }),
     ref: labelRef
   }, children), description && /*#__PURE__*/_react.default.createElement(_compiled.Text, {
-    color: (0, _platformFeatureFlags.fg)('platform-dst-menu-item-description-selected') ? getTextColor({
+    color: getTextColor({
       isDisabled: isDisabled,
       isSelected: isSelected
-    }) : isDisabled ? 'color.text.disabled' : 'color.text.subtle',
+    }),
     size: "small",
     maxLines: 1,
     ref: descriptionRef

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

@@ -2,11 +2,13 @@
 import "./flyout-menu-item-trigger.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useCallback, useContext } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { PopupTrigger } from '@atlaskit/popup/experimental';
 import { MenuItemBase } from '../menu-item';
+import { IsOpenContext, OnCloseContext } from './flyout-menu-item-context';
 const elemAfterStyles = {
   root: "_18zr12x7 _1tz3r0mg"
 };
@@ -27,31 +29,45 @@ export const FlyoutMenuItemTrigger = /*#__PURE__*/forwardRef(({
   isDragging,
   hasDragIndicator,
   dropIndicator
-}, forwardedRef) => /*#__PURE__*/React.createElement(PopupTrigger, null, ({
-  ref,
-  'aria-controls': ariaControls,
-  'aria-expanded': ariaExpanded,
-  'aria-haspopup': ariaHasPopup
-}) => /*#__PURE__*/React.createElement(MenuItemBase, {
-  testId: testId,
-  ref: mergeRefs([ref, forwardedRef]),
-  visualContentRef: visualContentRef,
-  elemBefore: elemBefore,
-  elemAfter: /*#__PURE__*/React.createElement("div", {
-    className: ax([elemAfterStyles.root])
-  }, /*#__PURE__*/React.createElement(ChevronRightIcon, {
-    label: "",
-    color: "currentColor",
-    size: "small"
-  })),
-  onClick: onClick,
-  ariaControls: ariaControls,
-  ariaExpanded: ariaExpanded,
-  ariaHasPopup: ariaHasPopup,
-  interactionName: interactionName,
-  isContentTooltipDisabled: isContentTooltipDisabled,
-  isSelected: isSelected,
-  isDragging: isDragging,
-  hasDragIndicator: hasDragIndicator,
-  dropIndicator: dropIndicator
-}, children)));
+}, forwardedRef) => {
+  const isOpen = useContext(IsOpenContext);
+  const onCloseRef = useContext(OnCloseContext);
+  const handleClick = useCallback((event, analyticsEvent) => {
+    // If the flyout is open and the trigger is clicked, close the flyout and call the onClick
+    // handler with the source information set to 'outside-click'.
+    if (fg('platform_dst_nav4_flyout_menu_slots_close_button')) {
+      if (isOpen && onCloseRef.current) {
+        onCloseRef.current(event, 'outside-click');
+      }
+    }
+    onClick === null || onClick === void 0 ? void 0 : onClick(event, analyticsEvent);
+  }, [isOpen, onCloseRef, onClick]);
+  return /*#__PURE__*/React.createElement(PopupTrigger, null, ({
+    ref,
+    'aria-controls': ariaControls,
+    'aria-expanded': ariaExpanded,
+    'aria-haspopup': ariaHasPopup
+  }) => /*#__PURE__*/React.createElement(MenuItemBase, {
+    testId: testId,
+    ref: mergeRefs([ref, forwardedRef]),
+    visualContentRef: visualContentRef,
+    elemBefore: elemBefore,
+    elemAfter: /*#__PURE__*/React.createElement("div", {
+      className: ax([elemAfterStyles.root])
+    }, /*#__PURE__*/React.createElement(ChevronRightIcon, {
+      label: "",
+      color: "currentColor",
+      size: "small"
+    })),
+    onClick: handleClick,
+    ariaControls: ariaControls,
+    ariaExpanded: ariaExpanded,
+    ariaHasPopup: ariaHasPopup,
+    interactionName: interactionName,
+    isContentTooltipDisabled: isContentTooltipDisabled,
+    isSelected: isSelected,
+    isDragging: isDragging,
+    hasDragIndicator: hasDragIndicator,
+    dropIndicator: dropIndicator
+  }, children));
+});

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

@@ -1,10 +1,11 @@
-import React, { forwardRef, useEffect } from 'react';
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import useControlled from '@atlaskit/ds-lib/use-controlled';
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Popup } from '@atlaskit/popup/experimental';
 import { MenuListItem } from '../menu-list-item';
-import { IsOpenContext, SetIsOpenContext } from './flyout-menu-item-context';
+import { IsOpenContext, OnCloseContext, SetIsOpenContext } from './flyout-menu-item-context';
 /**
  * __FlyoutMenuItem__
  *
@@ -34,6 +35,10 @@ export const FlyoutMenuItem = /*#__PURE__*/forwardRef(({
 }, forwardedRef) => {
   const [isOpen, setIsOpen] = useControlled(isOpenControlled, () => isDefaultOpen);
   const previousIsOpen = usePreviousValue(isOpen);
+  const onCloseRef = useRef(null);
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
   useEffect(() => {
     if (previousIsOpen === undefined || previousIsOpen === isOpen) {
       /**
@@ -45,17 +50,31 @@ export const FlyoutMenuItem = /*#__PURE__*/forwardRef(({
        */
       return;
     }
+
+    // When flyout menu is opened, fire analytics event
+    if (isOpen && previousIsOpen === false) {
+      if (fg('platform_dst_nav4_flyout_menu_slots_close_button')) {
+        const navigationAnalyticsEvent = createAnalyticsEvent({
+          source: 'sideNav',
+          actionSubject: 'flyoutMenu',
+          action: 'opened'
+        });
+        navigationAnalyticsEvent.fire('navigation');
+      }
+    }
     onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
-  }, [isOpen, onOpenChange, previousIsOpen]);
+  }, [isOpen, onOpenChange, previousIsOpen, createAnalyticsEvent]);
   return /*#__PURE__*/React.createElement(IsOpenContext.Provider, {
     value: isOpen
   }, /*#__PURE__*/React.createElement(SetIsOpenContext.Provider, {
     value: setIsOpen
+  }, /*#__PURE__*/React.createElement(OnCloseContext.Provider, {
+    value: onCloseRef
   }, /*#__PURE__*/React.createElement(MenuListItem, {
     ref: forwardedRef
   }, /*#__PURE__*/React.createElement(Popup, {
     id: id,
     isOpen: isOpen,
     role: fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined
-  }, children))));
+  }, children)))));
 });

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

@@ -271,10 +271,10 @@ const MenuItemBaseNoRef = ({
     }),
     ref: labelRef
   }, children), description && /*#__PURE__*/React.createElement(Text, {
-    color: fg('platform-dst-menu-item-description-selected') ? getTextColor({
+    color: getTextColor({
       isDisabled,
       isSelected
-    }) : isDisabled ? 'color.text.disabled' : 'color.text.subtle',
+    }),
     size: "small",
     maxLines: 1,
     ref: descriptionRef

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

@@ -2,11 +2,13 @@
 import "./flyout-menu-item-trigger.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useCallback, useContext } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { PopupTrigger } from '@atlaskit/popup/experimental';
 import { MenuItemBase } from '../menu-item';
+import { IsOpenContext, OnCloseContext } from './flyout-menu-item-context';
 var elemAfterStyles = {
   root: "_18zr12x7 _1tz3r0mg"
 };
@@ -27,6 +29,18 @@ export var FlyoutMenuItemTrigger = /*#__PURE__*/forwardRef(function (_ref, forwa
     isDragging = _ref.isDragging,
     hasDragIndicator = _ref.hasDragIndicator,
     dropIndicator = _ref.dropIndicator;
+  var isOpen = useContext(IsOpenContext);
+  var onCloseRef = useContext(OnCloseContext);
+  var handleClick = useCallback(function (event, analyticsEvent) {
+    // If the flyout is open and the trigger is clicked, close the flyout and call the onClick
+    // handler with the source information set to 'outside-click'.
+    if (fg('platform_dst_nav4_flyout_menu_slots_close_button')) {
+      if (isOpen && onCloseRef.current) {
+        onCloseRef.current(event, 'outside-click');
+      }
+    }
+    onClick === null || onClick === void 0 || onClick(event, analyticsEvent);
+  }, [isOpen, onCloseRef, onClick]);
   return /*#__PURE__*/React.createElement(PopupTrigger, null, function (_ref2) {
     var ref = _ref2.ref,
       ariaControls = _ref2['aria-controls'],
@@ -44,7 +58,7 @@ export var FlyoutMenuItemTrigger = /*#__PURE__*/forwardRef(function (_ref, forwa
         color: "currentColor",
         size: "small"
       })),
-      onClick: onClick,
+      onClick: handleClick,
       ariaControls: ariaControls,
       ariaExpanded: ariaExpanded,
       ariaHasPopup: ariaHasPopup,

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

@@ -1,11 +1,12 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { forwardRef, useEffect } from 'react';
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import useControlled from '@atlaskit/ds-lib/use-controlled';
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Popup } from '@atlaskit/popup/experimental';
 import { MenuListItem } from '../menu-list-item';
-import { IsOpenContext, SetIsOpenContext } from './flyout-menu-item-context';
+import { IsOpenContext, OnCloseContext, SetIsOpenContext } from './flyout-menu-item-context';
 /**
  * __FlyoutMenuItem__
  *
@@ -40,6 +41,9 @@ export var FlyoutMenuItem = /*#__PURE__*/forwardRef(function (_ref, forwardedRef
     isOpen = _useControlled2[0],
     setIsOpen = _useControlled2[1];
   var previousIsOpen = usePreviousValue(isOpen);
+  var onCloseRef = useRef(null);
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   useEffect(function () {
     if (previousIsOpen === undefined || previousIsOpen === isOpen) {
       /**
@@ -51,17 +55,31 @@ export var FlyoutMenuItem = /*#__PURE__*/forwardRef(function (_ref, forwardedRef
        */
       return;
     }
+
+    // When flyout menu is opened, fire analytics event
+    if (isOpen && previousIsOpen === false) {
+      if (fg('platform_dst_nav4_flyout_menu_slots_close_button')) {
+        var navigationAnalyticsEvent = createAnalyticsEvent({
+          source: 'sideNav',
+          actionSubject: 'flyoutMenu',
+          action: 'opened'
+        });
+        navigationAnalyticsEvent.fire('navigation');
+      }
+    }
     onOpenChange === null || onOpenChange === void 0 || onOpenChange(isOpen);
-  }, [isOpen, onOpenChange, previousIsOpen]);
+  }, [isOpen, onOpenChange, previousIsOpen, createAnalyticsEvent]);
   return /*#__PURE__*/React.createElement(IsOpenContext.Provider, {
     value: isOpen
   }, /*#__PURE__*/React.createElement(SetIsOpenContext.Provider, {
     value: setIsOpen
+  }, /*#__PURE__*/React.createElement(OnCloseContext.Provider, {
+    value: onCloseRef
   }, /*#__PURE__*/React.createElement(MenuListItem, {
     ref: forwardedRef
   }, /*#__PURE__*/React.createElement(Popup, {
     id: id,
     isOpen: isOpen,
     role: fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : undefined
-  }, children))));
+  }, children)))));
 });

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

@@ -272,10 +272,10 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref2, forwardedRef) {
     }),
     ref: labelRef
   }, children), description && /*#__PURE__*/React.createElement(Text, {
-    color: fg('platform-dst-menu-item-description-selected') ? getTextColor({
+    color: getTextColor({
       isDisabled: isDisabled,
       isSelected: isSelected
-    }) : isDisabled ? 'color.text.disabled' : 'color.text.subtle',
+    }),
     size: "small",
     maxLines: 1,
     ref: descriptionRef

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/side-nav-items",
-	"version": "1.1.0",
+	"version": "1.3.0",
 	"description": "Menu items and elements for the navigation side nav area.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -58,7 +58,7 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/app-provider": "^3.3.0",
 		"@atlaskit/lozenge": "^13.3.0",
-		"@atlaskit/navigation-system": "^5.30.0",
+		"@atlaskit/navigation-system": "^5.31.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlassian/a11y-jest-testing": "^0.8.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
@@ -112,9 +112,6 @@
 		"platform_dst_nav4_flyout_menu_slots_close_button": {
 			"type": "boolean"
 		},
-		"platform-dst-menu-item-description-selected": {
-			"type": "boolean"
-		},
 		"platform_dst_nav4_flyoutmenuitem_render_to_parent": {
 			"type": "boolean"
 		}