@atlaskit/menu 2.12.3 → 2.12.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/menu
 
+## 2.12.4
+
+### Patch Changes
+
+- [#144715](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144715)
+  [`dac4cd0c2919b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dac4cd0c2919b) -
+  Added UFO interaction metrics to ButtonItem
+
 ## 2.12.3
 
 ### Patch Changes

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

@@ -11,8 +11,10 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _menuItemPrimitive = _interopRequireDefault(require("../internal/components/menu-item-primitive"));
-var _excluded = ["children", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className"];
+var _excluded = ["children", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "interactionName"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -46,8 +48,14 @@ function (props, ref) {
     shouldTitleWrap = props.shouldTitleWrap,
     shouldDescriptionWrap = props.shouldDescriptionWrap,
     UNSAFE_className = props.className,
+    interactionName = props.interactionName,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var onMouseDownHandler = onMouseDown;
+  var interactionContext = (0, _react.useContext)(_interactionContext.default);
+  var handleClick = (0, _react.useCallback)(function (e) {
+    interactionContext === null || interactionContext === void 0 || interactionContext.tracePress(interactionName, e.timeStamp);
+    onClick === null || onClick === void 0 || onClick(e);
+  }, [onClick, interactionContext, interactionName]);
   if (!children) {
     return null;
   }
@@ -85,7 +93,7 @@ function (props, ref) {
       className: className,
       ref: ref,
       disabled: isDisabled,
-      onClick: onClick,
+      onClick: (0, _platformFeatureFlags.fg)('platform_button_item-add-ufo-metrics') ? handleClick : onClick,
       onMouseDown: onMouseDownHandler,
       type: "button"
     }), children);

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

@@ -3,12 +3,14 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { forwardRef, memo } from 'react';
+import { forwardRef, memo, useCallback, useContext } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import noop from '@atlaskit/ds-lib/noop';
+import InteractionContext from '@atlaskit/interaction-context';
+import { fg } from '@atlaskit/platform-feature-flags';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 /**
  * __Button item__
@@ -40,9 +42,15 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
     // picked it out and supressed the expected type error.
     // @ts-expect-error
     className: UNSAFE_className,
+    interactionName,
     ...rest
   } = props;
   const onMouseDownHandler = onMouseDown;
+  const interactionContext = useContext(InteractionContext);
+  const handleClick = useCallback(e => {
+    interactionContext === null || interactionContext === void 0 ? void 0 : interactionContext.tracePress(interactionName, e.timeStamp);
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  }, [onClick, interactionContext, interactionName]);
   if (!children) {
     return null;
   }
@@ -80,7 +88,7 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
     className: className,
     ref: ref,
     disabled: isDisabled,
-    onClick: onClick,
+    onClick: fg('platform_button_item-add-ufo-metrics') ? handleClick : onClick,
     onMouseDown: onMouseDownHandler,
     type: "button"
   }), children));

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

@@ -1,16 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className"];
+var _excluded = ["children", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "interactionName"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { forwardRef, memo } from 'react';
+import { forwardRef, memo, useCallback, useContext } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import noop from '@atlaskit/ds-lib/noop';
+import InteractionContext from '@atlaskit/interaction-context';
+import { fg } from '@atlaskit/platform-feature-flags';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 /**
  * __Button item__
@@ -40,8 +42,14 @@ function (props, ref) {
     shouldTitleWrap = props.shouldTitleWrap,
     shouldDescriptionWrap = props.shouldDescriptionWrap,
     UNSAFE_className = props.className,
+    interactionName = props.interactionName,
     rest = _objectWithoutProperties(props, _excluded);
   var onMouseDownHandler = onMouseDown;
+  var interactionContext = useContext(InteractionContext);
+  var handleClick = useCallback(function (e) {
+    interactionContext === null || interactionContext === void 0 || interactionContext.tracePress(interactionName, e.timeStamp);
+    onClick === null || onClick === void 0 || onClick(e);
+  }, [onClick, interactionContext, interactionName]);
   if (!children) {
     return null;
   }
@@ -79,7 +87,7 @@ function (props, ref) {
       className: className,
       ref: ref,
       disabled: isDisabled,
-      onClick: onClick,
+      onClick: fg('platform_button_item-add-ufo-metrics') ? handleClick : onClick,
       onMouseDown: onMouseDownHandler,
       type: "button"
     }), children);

package/dist/types/types.d.ts

@@ -217,6 +217,10 @@ export interface ButtonItemProps extends MenuItemProps {
      * Use this to override the accessibility role for the element.
      */
     role?: string;
+    /**
+     * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
+     */
+    interactionName?: string;
 }
 export interface LinkItemProps extends MenuItemProps {
     /**

package/dist/types-ts4.5/types.d.ts

@@ -217,6 +217,10 @@ export interface ButtonItemProps extends MenuItemProps {
      * Use this to override the accessibility role for the element.
      */
     role?: string;
+    /**
+     * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
+     */
+    interactionName?: string;
 }
 export interface LinkItemProps extends MenuItemProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "2.12.3",
+	"version": "2.12.4",
 	"description": "A list of options to help users navigate, or perform actions.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -42,6 +42,7 @@
 		"@atlaskit/app-provider": "^1.4.0",
 		"@atlaskit/ds-lib": "^2.6.0",
 		"@atlaskit/focus-ring": "^1.6.0",
+		"@atlaskit/interaction-context": "^2.1.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/theme": "^13.0.0",
@@ -119,6 +120,9 @@
 	"platform-feature-flags": {
 		"platform.design-system-team.section-1px-seperator-borders": {
 			"type": "boolean"
+		},
+		"platform_button_item-add-ufo-metrics": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/menu/"