@atlaskit/dropdown-menu 12.18.4 → 12.18.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/dropdown-menu
 
+## 12.18.5
+
+### Patch Changes
+
+- [#148720](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/148720)
+  [`fcf151627c8de`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fcf151627c8de) -
+  Added interactionName to components in menu and dropdownmenu
+
 ## 12.18.4
 
 ### Patch Changes

package/dist/cjs/checkbox/dropdown-item-checkbox.js

@@ -13,10 +13,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _menu = require("@atlaskit/menu");
 var _buttonItem = _interopRequireDefault(require("@atlaskit/menu/button-item"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _checkboxIcon = _interopRequireDefault(require("../internal/components/checkbox-icon"));
 var _useCheckboxState3 = _interopRequireDefault(require("../internal/hooks/use-checkbox-state"));
 var _useRegisterItemWithFocusManager = _interopRequireDefault(require("../internal/hooks/use-register-item-with-focus-manager"));
-var _excluded = ["children", "defaultSelected", "description", "id", "isDisabled", "isSelected", "onClick", "shouldDescriptionWrap", "shouldTitleWrap", "testId"];
+var _excluded = ["children", "defaultSelected", "description", "id", "isDisabled", "isSelected", "onClick", "shouldDescriptionWrap", "shouldTitleWrap", "testId", "interactionName"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -42,6 +43,7 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(_ref) {
     _ref$shouldTitleWrap = _ref.shouldTitleWrap,
     shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? true : _ref$shouldTitleWrap,
     testId = _ref.testId,
+    interactionName = _ref.interactionName,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
     // eslint-disable-next-line no-console
@@ -79,7 +81,8 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(_ref) {
     shouldDescriptionWrap: shouldDescriptionWrap,
     shouldTitleWrap: shouldTitleWrap,
     testId: testId
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, (0, _platformFeatureFlags.fg)('platform_button_item-add-ufo-metrics') && {
+    interactionName: interactionName
   }, rest), children));
 };
 var _default = exports.default = DropdownItemCheckbox;

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

@@ -13,8 +13,9 @@ var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _buttonItem = _interopRequireDefault(require("@atlaskit/menu/button-item"));
 var _customItem = _interopRequireDefault(require("@atlaskit/menu/custom-item"));
 var _linkItem = _interopRequireDefault(require("@atlaskit/menu/link-item"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useRegisterItemWithFocusManager = _interopRequireDefault(require("./internal/hooks/use-register-item-with-focus-manager"));
-var _excluded = ["children", "component", "description", "elemAfter", "elemBefore", "href", "isDisabled", "isSelected", "onClick", "rel", "shouldDescriptionWrap", "shouldTitleWrap", "target", "testId", "UNSAFE_shouldDisableRouterLink", "returnFocusRef"];
+var _excluded = ["children", "component", "description", "elemAfter", "elemBefore", "href", "isDisabled", "isSelected", "onClick", "rel", "shouldDescriptionWrap", "shouldTitleWrap", "target", "testId", "UNSAFE_shouldDisableRouterLink", "returnFocusRef", "interactionName"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -45,6 +46,7 @@ var DropdownMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     testId = _ref.testId,
     UNSAFE_shouldDisableRouterLink = _ref.UNSAFE_shouldDisableRouterLink,
     returnFocusRef = _ref.returnFocusRef,
+    interactionName = _ref.interactionName,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var itemRef = (0, _useRegisterItemWithFocusManager.default)();
   var handleItemClick = (0, _react.useCallback)(function (event) {
@@ -75,7 +77,8 @@ var DropdownMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
       ,
       target: target,
       rel: rel
-      // DSP-13312 TODO: remove spread props in future major release
+    }, (0, _platformFeatureFlags.fg)('platform_button_item-add-ufo-metrics') && {
+      interactionName: interactionName
     }, rest), children);
   } else if (href) {
     return /*#__PURE__*/_react.default.createElement(_linkItem.default, (0, _extends2.default)({
@@ -94,7 +97,8 @@ var DropdownMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
       target: target,
       testId: testId,
       UNSAFE_shouldDisableRouterLink: UNSAFE_shouldDisableRouterLink
-      // DSP-13312 TODO: remove spread props in future major release
+    }, (0, _platformFeatureFlags.fg)('platform_button_item-add-ufo-metrics') && {
+      interactionName: interactionName
     }, rest), children);
   } else {
     return /*#__PURE__*/_react.default.createElement(_buttonItem.default, (0, _extends2.default)({
@@ -115,7 +119,8 @@ var DropdownMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
       ,
       target: target,
       rel: rel
-      // DSP-13312 TODO: remove spread props in future major release
+    }, (0, _platformFeatureFlags.fg)('platform_button_item-add-ufo-metrics') && {
+      interactionName: interactionName
     }, rest), children);
   }
 });

package/dist/cjs/dropdown-menu.js

@@ -19,6 +19,7 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useControlled = _interopRequireDefault(require("@atlaskit/ds-lib/use-controlled"));
 var _useFocusEvent = _interopRequireDefault(require("@atlaskit/ds-lib/use-focus-event"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _constants = require("@atlaskit/theme/constants");
 var _focusManager = _interopRequireDefault(require("./internal/components/focus-manager"));
@@ -97,7 +98,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
     _trigger = _ref.trigger,
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? _constants.layers.modal() : _ref$zIndex,
-    label = _ref.label;
+    label = _ref.label,
+    interactionName = _ref.interactionName;
   var _useControlledState = (0, _useControlled.default)(isOpen, function () {
       return defaultOpen;
     }),
@@ -146,7 +148,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
       isOpen: newValue,
       event: event
     });
-  }, [itemRef, onOpenChange, isLocalOpen, setLocalIsOpen]);
+  }, [isLocalOpen, setLocalIsOpen, onOpenChange, itemRef]);
   var handleOnClose = (0, _react.useCallback)(function (event, currentLevel) {
     var _event$target, _event$target$closest;
     if (event.key !== 'Escape' && event.key !== 'Tab' && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$closest = _event$target.closest) !== null && _event$target$closest !== void 0 && _event$target$closest.call(_event$target, "[id^=".concat(_useGeneratedId.PREFIX, "] [aria-haspopup]"))) {
@@ -291,6 +293,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
         onClick: handleTriggerClicked,
         testId: testId && "".concat(testId, "--trigger"),
         "aria-label": label
+      }, (0, _platformFeatureFlags.fg)('platform_button_item-add-ufo-metrics') && {
+        interactionName: interactionName
       }), _trigger);
     },
     content: function content(_ref3) {

package/dist/cjs/radio/dropdown-item-radio.js

@@ -13,11 +13,12 @@ var _react = _interopRequireWildcard(require("react"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _menu = require("@atlaskit/menu");
 var _buttonItem = _interopRequireDefault(require("@atlaskit/menu/button-item"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _radioIcon = _interopRequireDefault(require("../internal/components/radio-icon"));
 var _useRadioState3 = _interopRequireDefault(require("../internal/hooks/use-radio-state"));
 var _useRegisterItemWithFocusManager = _interopRequireDefault(require("../internal/hooks/use-register-item-with-focus-manager"));
 var _isVoiceOverSupported = _interopRequireDefault(require("../internal/utils/is-voice-over-supported"));
-var _excluded = ["children", "defaultSelected", "testId", "id", "title", "description", "isDisabled", "isSelected", "onClick", "shouldDescriptionWrap", "shouldTitleWrap"];
+var _excluded = ["children", "defaultSelected", "testId", "id", "title", "description", "isDisabled", "isSelected", "onClick", "shouldDescriptionWrap", "shouldTitleWrap", "interactionName"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -44,6 +45,7 @@ var DropdownItemRadio = function DropdownItemRadio(_ref) {
     shouldDescriptionWrap = _ref$shouldDescriptio === void 0 ? true : _ref$shouldDescriptio,
     _ref$shouldTitleWrap = _ref.shouldTitleWrap,
     shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? true : _ref$shouldTitleWrap,
+    interactionName = _ref.interactionName,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
     // eslint-disable-next-line no-console
@@ -86,7 +88,8 @@ var DropdownItemRadio = function DropdownItemRadio(_ref) {
     // @ts-expect-error
     ,
     title: title
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, (0, _platformFeatureFlags.fg)('platform_button_item-add-ufo-metrics') && {
+    interactionName: interactionName
   }, rest), children));
 };
 var _default = exports.default = DropdownItemRadio;

package/dist/es2019/checkbox/dropdown-item-checkbox.js

@@ -3,6 +3,7 @@ import React, { useCallback } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
 import ButtonItem from '@atlaskit/menu/button-item';
+import { fg } from '@atlaskit/platform-feature-flags';
 import CheckboxIcon from '../internal/components/checkbox-icon';
 import useCheckboxState from '../internal/hooks/use-checkbox-state';
 import useRegisterItemWithFocusManager from '../internal/hooks/use-register-item-with-focus-manager';
@@ -26,6 +27,7 @@ const DropdownItemCheckbox = ({
   shouldDescriptionWrap = true,
   shouldTitleWrap = true,
   testId,
+  interactionName,
   // DSP-13312 TODO: remove spread props in future major release
   ...rest
 }) => {
@@ -60,7 +62,8 @@ const DropdownItemCheckbox = ({
     shouldDescriptionWrap: shouldDescriptionWrap,
     shouldTitleWrap: shouldTitleWrap,
     testId: testId
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, fg('platform_button_item-add-ufo-metrics') && {
+    interactionName
   }, rest), children));
 };
 export default DropdownItemCheckbox;

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

@@ -4,6 +4,7 @@ import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import ButtonItem from '@atlaskit/menu/button-item';
 import CustomItem from '@atlaskit/menu/custom-item';
 import LinkItem from '@atlaskit/menu/link-item';
+import { fg } from '@atlaskit/platform-feature-flags';
 import useRegisterItemWithFocusManager from './internal/hooks/use-register-item-with-focus-manager';
 /**
  * __Dropdown menu item__
@@ -31,6 +32,7 @@ const DropdownMenuItem = /*#__PURE__*/forwardRef(({
   testId,
   UNSAFE_shouldDisableRouterLink,
   returnFocusRef,
+  interactionName,
   ...rest
 }, ref) => {
   const itemRef = useRegisterItemWithFocusManager();
@@ -62,7 +64,8 @@ const DropdownMenuItem = /*#__PURE__*/forwardRef(({
       ,
       target: target,
       rel: rel
-      // DSP-13312 TODO: remove spread props in future major release
+    }, fg('platform_button_item-add-ufo-metrics') && {
+      interactionName
     }, rest), children);
   } else if (href) {
     return /*#__PURE__*/React.createElement(LinkItem, _extends({
@@ -81,7 +84,8 @@ const DropdownMenuItem = /*#__PURE__*/forwardRef(({
       target: target,
       testId: testId,
       UNSAFE_shouldDisableRouterLink: UNSAFE_shouldDisableRouterLink
-      // DSP-13312 TODO: remove spread props in future major release
+    }, fg('platform_button_item-add-ufo-metrics') && {
+      interactionName
     }, rest), children);
   } else {
     return /*#__PURE__*/React.createElement(ButtonItem, _extends({
@@ -102,7 +106,8 @@ const DropdownMenuItem = /*#__PURE__*/forwardRef(({
       ,
       target: target,
       rel: rel
-      // DSP-13312 TODO: remove spread props in future major release
+    }, fg('platform_button_item-add-ufo-metrics') && {
+      interactionName
     }, rest), children);
   }
 });

package/dist/es2019/dropdown-menu.js

@@ -8,6 +8,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import useControlledState from '@atlaskit/ds-lib/use-controlled';
 import useFocus from '@atlaskit/ds-lib/use-focus-event';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize as gridSizeFn, layers } from '@atlaskit/theme/constants';
@@ -73,7 +74,8 @@ const DropdownMenu = ({
   testId,
   trigger,
   zIndex = layers.modal(),
-  label
+  label,
+  interactionName
 }) => {
   const [isLocalOpen, setLocalIsOpen] = useControlledState(isOpen, () => defaultOpen);
   const triggerRef = useRef(null);
@@ -115,7 +117,7 @@ const DropdownMenu = ({
       isOpen: newValue,
       event
     });
-  }, [itemRef, onOpenChange, isLocalOpen, setLocalIsOpen]);
+  }, [isLocalOpen, setLocalIsOpen, onOpenChange, itemRef]);
   const handleOnClose = useCallback((event, currentLevel) => {
     var _event$target, _event$target$closest;
     if (event.key !== 'Escape' && event.key !== 'Tab' && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$closest = _event$target.closest) !== null && _event$target$closest !== void 0 && _event$target$closest.call(_event$target, `[id^=${PREFIX}] [aria-haspopup]`)) {
@@ -264,6 +266,8 @@ const DropdownMenu = ({
         onClick: handleTriggerClicked,
         testId: testId && `${testId}--trigger`,
         "aria-label": label
+      }, fg('platform_button_item-add-ufo-metrics') && {
+        interactionName
       }), trigger);
     },
     content: ({

package/dist/es2019/radio/dropdown-item-radio.js

@@ -3,6 +3,7 @@ import React, { useCallback } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
 import ButtonItem from '@atlaskit/menu/button-item';
+import { fg } from '@atlaskit/platform-feature-flags';
 import RadioIcon from '../internal/components/radio-icon';
 import useRadioState from '../internal/hooks/use-radio-state';
 import useRegisterItemWithFocusManager from '../internal/hooks/use-register-item-with-focus-manager';
@@ -28,6 +29,7 @@ const DropdownItemRadio = ({
   onClick: providedOnClick = noop,
   shouldDescriptionWrap = true,
   shouldTitleWrap = true,
+  interactionName,
   // DSP-13312 TODO: remove spread props in future major release
   ...rest
 }) => {
@@ -67,7 +69,8 @@ const DropdownItemRadio = ({
     // @ts-expect-error
     ,
     title: title
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, fg('platform_button_item-add-ufo-metrics') && {
+    interactionName
   }, rest), children));
 };
 export default DropdownItemRadio;

package/dist/esm/checkbox/dropdown-item-checkbox.js

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "defaultSelected", "description", "id", "isDisabled", "isSelected", "onClick", "shouldDescriptionWrap", "shouldTitleWrap", "testId"];
+var _excluded = ["children", "defaultSelected", "description", "id", "isDisabled", "isSelected", "onClick", "shouldDescriptionWrap", "shouldTitleWrap", "testId", "interactionName"];
 import React, { useCallback } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
 import ButtonItem from '@atlaskit/menu/button-item';
+import { fg } from '@atlaskit/platform-feature-flags';
 import CheckboxIcon from '../internal/components/checkbox-icon';
 import useCheckboxState from '../internal/hooks/use-checkbox-state';
 import useRegisterItemWithFocusManager from '../internal/hooks/use-register-item-with-focus-manager';
@@ -32,6 +33,7 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(_ref) {
     _ref$shouldTitleWrap = _ref.shouldTitleWrap,
     shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? true : _ref$shouldTitleWrap,
     testId = _ref.testId,
+    interactionName = _ref.interactionName,
     rest = _objectWithoutProperties(_ref, _excluded);
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
     // eslint-disable-next-line no-console
@@ -69,7 +71,8 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(_ref) {
     shouldDescriptionWrap: shouldDescriptionWrap,
     shouldTitleWrap: shouldTitleWrap,
     testId: testId
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, fg('platform_button_item-add-ufo-metrics') && {
+    interactionName: interactionName
   }, rest), children));
 };
 export default DropdownItemCheckbox;

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

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "component", "description", "elemAfter", "elemBefore", "href", "isDisabled", "isSelected", "onClick", "rel", "shouldDescriptionWrap", "shouldTitleWrap", "target", "testId", "UNSAFE_shouldDisableRouterLink", "returnFocusRef"];
+var _excluded = ["children", "component", "description", "elemAfter", "elemBefore", "href", "isDisabled", "isSelected", "onClick", "rel", "shouldDescriptionWrap", "shouldTitleWrap", "target", "testId", "UNSAFE_shouldDisableRouterLink", "returnFocusRef", "interactionName"];
 import React, { forwardRef, useCallback } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import ButtonItem from '@atlaskit/menu/button-item';
 import CustomItem from '@atlaskit/menu/custom-item';
 import LinkItem from '@atlaskit/menu/link-item';
+import { fg } from '@atlaskit/platform-feature-flags';
 import useRegisterItemWithFocusManager from './internal/hooks/use-register-item-with-focus-manager';
 /**
  * __Dropdown menu item__
@@ -35,6 +36,7 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     testId = _ref.testId,
     UNSAFE_shouldDisableRouterLink = _ref.UNSAFE_shouldDisableRouterLink,
     returnFocusRef = _ref.returnFocusRef,
+    interactionName = _ref.interactionName,
     rest = _objectWithoutProperties(_ref, _excluded);
   var itemRef = useRegisterItemWithFocusManager();
   var handleItemClick = useCallback(function (event) {
@@ -65,7 +67,8 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       ,
       target: target,
       rel: rel
-      // DSP-13312 TODO: remove spread props in future major release
+    }, fg('platform_button_item-add-ufo-metrics') && {
+      interactionName: interactionName
     }, rest), children);
   } else if (href) {
     return /*#__PURE__*/React.createElement(LinkItem, _extends({
@@ -84,7 +87,8 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       target: target,
       testId: testId,
       UNSAFE_shouldDisableRouterLink: UNSAFE_shouldDisableRouterLink
-      // DSP-13312 TODO: remove spread props in future major release
+    }, fg('platform_button_item-add-ufo-metrics') && {
+      interactionName: interactionName
     }, rest), children);
   } else {
     return /*#__PURE__*/React.createElement(ButtonItem, _extends({
@@ -105,7 +109,8 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       ,
       target: target,
       rel: rel
-      // DSP-13312 TODO: remove spread props in future major release
+    }, fg('platform_button_item-add-ufo-metrics') && {
+      interactionName: interactionName
     }, rest), children);
   }
 });

package/dist/esm/dropdown-menu.js

@@ -14,6 +14,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import useControlledState from '@atlaskit/ds-lib/use-controlled';
 import useFocus from '@atlaskit/ds-lib/use-focus-event';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize as gridSizeFn, layers } from '@atlaskit/theme/constants';
@@ -88,7 +89,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
     _trigger = _ref.trigger,
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? layers.modal() : _ref$zIndex,
-    label = _ref.label;
+    label = _ref.label,
+    interactionName = _ref.interactionName;
   var _useControlledState = useControlledState(isOpen, function () {
       return defaultOpen;
     }),
@@ -137,7 +139,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
       isOpen: newValue,
       event: event
     });
-  }, [itemRef, onOpenChange, isLocalOpen, setLocalIsOpen]);
+  }, [isLocalOpen, setLocalIsOpen, onOpenChange, itemRef]);
   var handleOnClose = useCallback(function (event, currentLevel) {
     var _event$target, _event$target$closest;
     if (event.key !== 'Escape' && event.key !== 'Tab' && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$closest = _event$target.closest) !== null && _event$target$closest !== void 0 && _event$target$closest.call(_event$target, "[id^=".concat(PREFIX, "] [aria-haspopup]"))) {
@@ -282,6 +284,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
         onClick: handleTriggerClicked,
         testId: testId && "".concat(testId, "--trigger"),
         "aria-label": label
+      }, fg('platform_button_item-add-ufo-metrics') && {
+        interactionName: interactionName
       }), _trigger);
     },
     content: function content(_ref3) {

package/dist/esm/radio/dropdown-item-radio.js

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "defaultSelected", "testId", "id", "title", "description", "isDisabled", "isSelected", "onClick", "shouldDescriptionWrap", "shouldTitleWrap"];
+var _excluded = ["children", "defaultSelected", "testId", "id", "title", "description", "isDisabled", "isSelected", "onClick", "shouldDescriptionWrap", "shouldTitleWrap", "interactionName"];
 import React, { useCallback } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
 import ButtonItem from '@atlaskit/menu/button-item';
+import { fg } from '@atlaskit/platform-feature-flags';
 import RadioIcon from '../internal/components/radio-icon';
 import useRadioState from '../internal/hooks/use-radio-state';
 import useRegisterItemWithFocusManager from '../internal/hooks/use-register-item-with-focus-manager';
@@ -34,6 +35,7 @@ var DropdownItemRadio = function DropdownItemRadio(_ref) {
     shouldDescriptionWrap = _ref$shouldDescriptio === void 0 ? true : _ref$shouldDescriptio,
     _ref$shouldTitleWrap = _ref.shouldTitleWrap,
     shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? true : _ref$shouldTitleWrap,
+    interactionName = _ref.interactionName,
     rest = _objectWithoutProperties(_ref, _excluded);
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
     // eslint-disable-next-line no-console
@@ -76,7 +78,8 @@ var DropdownItemRadio = function DropdownItemRadio(_ref) {
     // @ts-expect-error
     ,
     title: title
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, fg('platform_button_item-add-ufo-metrics') && {
+    interactionName: interactionName
   }, rest), children));
 };
 export default DropdownItemRadio;

package/dist/types/checkbox/dropdown-item-checkbox.d.ts

@@ -9,5 +9,5 @@ import { type DropdownItemCheckboxProps } from '../types';
  * - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/code)
  * - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/usage)
  */
-declare const DropdownItemCheckbox: ({ children, defaultSelected, description, id, isDisabled, isSelected, onClick: providedOnClick, shouldDescriptionWrap, shouldTitleWrap, testId, ...rest }: DropdownItemCheckboxProps) => JSX.Element;
+declare const DropdownItemCheckbox: ({ children, defaultSelected, description, id, isDisabled, isSelected, onClick: providedOnClick, shouldDescriptionWrap, shouldTitleWrap, testId, interactionName, ...rest }: DropdownItemCheckboxProps) => JSX.Element;
 export default DropdownItemCheckbox;

package/dist/types/dropdown-menu.d.ts

@@ -9,5 +9,5 @@ import type { DropdownMenuProps } from './types';
  * - [Code](https://atlassian.design/components/dropdown-menu/code)
  * - [Usage](https://atlassian.design/components/dropdown-menu/usage)
  */
-declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, returnFocusRef, spacing, statusLabel, testId, trigger, zIndex, label, }: DropdownMenuProps<T>) => JSX.Element;
+declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, returnFocusRef, spacing, statusLabel, testId, trigger, zIndex, label, interactionName, }: DropdownMenuProps<T>) => JSX.Element;
 export default DropdownMenu;

package/dist/types/radio/dropdown-item-radio.d.ts

@@ -9,5 +9,5 @@ import { type DropdownItemRadioProps } from '../types';
  * - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/code)
  * - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/usage)
  */
-declare const DropdownItemRadio: ({ children, defaultSelected, testId, id, title, description, isDisabled, isSelected, onClick: providedOnClick, shouldDescriptionWrap, shouldTitleWrap, ...rest }: DropdownItemRadioProps) => JSX.Element;
+declare const DropdownItemRadio: ({ children, defaultSelected, testId, id, title, description, isDisabled, isSelected, onClick: providedOnClick, shouldDescriptionWrap, shouldTitleWrap, interactionName, ...rest }: DropdownItemRadioProps) => JSX.Element;
 export default DropdownItemRadio;

package/dist/types/types.d.ts

@@ -154,6 +154,10 @@ interface InternalDropdownMenuProps<TriggerElement extends HTMLElement = any> {
      * If ref is passed, focus returns to that specific ref element after dropdown dismissed.
      */
     returnFocusRef?: RefObject<HTMLElement>;
+    /**
+     * 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;
 }
 type StandardDropdownMenuProps<TriggerElement extends HTMLElement = any> = InternalDropdownMenuProps<TriggerElement> & {
     shouldFitContainer?: false;
@@ -242,6 +246,10 @@ export interface DropdownItemProps {
      * If ref is passed, focus returns to that specific ref element after dropdown item clicked.
      */
     returnFocusRef?: RefObject<HTMLElement>;
+    /**
+     * 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 DropdownItemCheckboxProps {
     /**
@@ -291,6 +299,10 @@ export interface DropdownItemCheckboxProps {
      * serving as a hook for automated tests.
      */
     testId?: 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 DropdownItemRadioProps {
     /**
@@ -340,6 +352,10 @@ export interface DropdownItemRadioProps {
      * serving as a hook for automated tests.
      */
     testId?: 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 CustomItemHtmlProps extends CustomItemComponentProps {
     /**

package/dist/types-ts4.5/checkbox/dropdown-item-checkbox.d.ts

@@ -9,5 +9,5 @@ import { type DropdownItemCheckboxProps } from '../types';
  * - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/code)
  * - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/usage)
  */
-declare const DropdownItemCheckbox: ({ children, defaultSelected, description, id, isDisabled, isSelected, onClick: providedOnClick, shouldDescriptionWrap, shouldTitleWrap, testId, ...rest }: DropdownItemCheckboxProps) => JSX.Element;
+declare const DropdownItemCheckbox: ({ children, defaultSelected, description, id, isDisabled, isSelected, onClick: providedOnClick, shouldDescriptionWrap, shouldTitleWrap, testId, interactionName, ...rest }: DropdownItemCheckboxProps) => JSX.Element;
 export default DropdownItemCheckbox;

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

@@ -9,5 +9,5 @@ import type { DropdownMenuProps } from './types';
  * - [Code](https://atlassian.design/components/dropdown-menu/code)
  * - [Usage](https://atlassian.design/components/dropdown-menu/usage)
  */
-declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, returnFocusRef, spacing, statusLabel, testId, trigger, zIndex, label, }: DropdownMenuProps<T>) => JSX.Element;
+declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, returnFocusRef, spacing, statusLabel, testId, trigger, zIndex, label, interactionName, }: DropdownMenuProps<T>) => JSX.Element;
 export default DropdownMenu;

package/dist/types-ts4.5/radio/dropdown-item-radio.d.ts

@@ -9,5 +9,5 @@ import { type DropdownItemRadioProps } from '../types';
  * - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/code)
  * - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/usage)
  */
-declare const DropdownItemRadio: ({ children, defaultSelected, testId, id, title, description, isDisabled, isSelected, onClick: providedOnClick, shouldDescriptionWrap, shouldTitleWrap, ...rest }: DropdownItemRadioProps) => JSX.Element;
+declare const DropdownItemRadio: ({ children, defaultSelected, testId, id, title, description, isDisabled, isSelected, onClick: providedOnClick, shouldDescriptionWrap, shouldTitleWrap, interactionName, ...rest }: DropdownItemRadioProps) => JSX.Element;
 export default DropdownItemRadio;

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

@@ -154,6 +154,10 @@ interface InternalDropdownMenuProps<TriggerElement extends HTMLElement = any> {
      * If ref is passed, focus returns to that specific ref element after dropdown dismissed.
      */
     returnFocusRef?: RefObject<HTMLElement>;
+    /**
+     * 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;
 }
 type StandardDropdownMenuProps<TriggerElement extends HTMLElement = any> = InternalDropdownMenuProps<TriggerElement> & {
     shouldFitContainer?: false;
@@ -242,6 +246,10 @@ export interface DropdownItemProps {
      * If ref is passed, focus returns to that specific ref element after dropdown item clicked.
      */
     returnFocusRef?: RefObject<HTMLElement>;
+    /**
+     * 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 DropdownItemCheckboxProps {
     /**
@@ -291,6 +299,10 @@ export interface DropdownItemCheckboxProps {
      * serving as a hook for automated tests.
      */
     testId?: 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 DropdownItemRadioProps {
     /**
@@ -340,6 +352,10 @@ export interface DropdownItemRadioProps {
      * serving as a hook for automated tests.
      */
     testId?: 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 CustomItemHtmlProps extends CustomItemComponentProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "12.18.4",
+	"version": "12.18.5",
 	"description": "A dropdown menu displays a list of actions or options to a user.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -72,6 +72,9 @@
 	"platform-feature-flags": {
 		"platform_dst_popup-disable-focuslock": {
 			"type": "boolean"
+		},
+		"platform_button_item-add-ufo-metrics": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {