@atlaskit/dropdown-menu 12.18.4 → 12.18.6

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/dropdown-menu
 
+## 12.18.6
+
+### Patch Changes
+
+- [`5ceb889d493ab`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5ceb889d493ab) -
+  Fix issue with Async loading of Dropdown Menu Items
+- [#148281](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/148281)
+  [`3c4de48168ffe`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3c4de48168ffe) -
+  Update the import path of `useId*` from `@atlaskit/ds-lib`
+- Updated dependencies
+
+## 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-group.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _reactUid = require("@atlaskit/ds-lib/react-uid");
+var _useId = require("@atlaskit/ds-lib/use-id");
 var _section = _interopRequireDefault(require("@atlaskit/menu/section"));
 var _groupTitle = _interopRequireDefault(require("../internal/components/group-title"));
 var _checkboxGroupContext = require("../internal/context/checkbox-group-context");
@@ -29,7 +29,7 @@ var DropdownItemCheckboxGroup = function DropdownItemCheckboxGroup(_ref) {
     testId = _ref.testId,
     title = _ref.title,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var uid = (0, _reactUid.useId)();
+  var uid = (0, _useId.useId)();
   var titleId = "dropdown-menu-item-checkbox-group-title-".concat(uid);
   return /*#__PURE__*/_react.default.createElement(_checkboxGroupContext.CheckboxGroupContext.Provider, {
     value: id

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-group.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactUid = require("@atlaskit/ds-lib/react-uid");
+var _useId = require("@atlaskit/ds-lib/use-id");
 var _menu = require("@atlaskit/menu");
 var _groupTitle = _interopRequireDefault(require("./internal/components/group-title"));
 var _excluded = ["children", "id", "isList", "isScrollable", "title", "testId", "hasSeparator", "overrides"];
@@ -31,7 +31,7 @@ var DropdownMenuItemGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     hasSeparator = _ref.hasSeparator,
     overrides = _ref.overrides,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var uid = (0, _reactUid.useId)();
+  var uid = (0, _useId.useId)();
   var titleId = "dropdown-menu-item-group-title-".concat(uid);
   return /*#__PURE__*/_react.default.createElement(_menu.Section, (0, _extends2.default)({
     id: id,

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/internal/components/focus-manager.js

@@ -18,7 +18,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  *
  * Context provider which maintains the list of focusable elements and a method to
  * register new menu items.
- * This list drives the keyboard navgation of the menu.
+ * This list drives the keyboard navigation of the menu.
  *
  */
 var FocusManagerContext = exports.FocusManagerContext = /*#__PURE__*/(0, _react.createContext)({
@@ -33,15 +33,16 @@ var FocusManager = function FocusManager(_ref) {
   var children = _ref.children,
     onClose = _ref.onClose;
   var menuItemRefs = (0, _react.useRef)([]);
+  var registerRefCalls = (0, _react.useRef)(0);
   var registerRef = (0, _react.useCallback)(function (ref) {
-    if (ref && !menuItemRefs.current.includes(ref)) {
-      menuItemRefs.current.push(ref);
-    }
+    return upsertRefAtFirstPosition(ref, menuItemRefs, registerRefCalls);
   }, []);
   var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
     isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
-  // Intentionally rebinding on each render
   (0, _react.useEffect)(function () {
+    // Intentionally reset count on each render
+    registerRefCalls.current = 0;
+    // Intentionally rebinding on each render
     return (0, _bindEventListener.bind)(window, {
       type: 'keydown',
       listener: (0, _handleFocus.default)(menuItemRefs.current, isLayerDisabled, onClose)
@@ -55,4 +56,37 @@ var FocusManager = function FocusManager(_ref) {
     value: contextValue
   }, children);
 };
+
+/**
+ * Insert the ref at the call position in the array.
+ * If the ref is already in the array, move it to the call position.
+ * If the call position is after the current position, ignore the call.
+ *
+ * @param ref
+ * @param menuItemRefs
+ * @param registerRefCalls
+ */
+function upsertRefAtFirstPosition(ref, menuItemRefs, registerRefCalls) {
+  var positionOnCall = registerRefCalls.current++;
+
+  // Add the ref to the correct position
+  if (!menuItemRefs.current.includes(ref)) {
+    menuItemRefs.current.splice(positionOnCall, 0, ref);
+    return;
+  }
+  var positionCurrent = menuItemRefs.current.indexOf(ref);
+  if (positionOnCall === positionCurrent) {
+    // No change needed
+    return;
+  }
+  if (positionOnCall > positionCurrent) {
+    // Ignore and so keep the count the same
+    registerRefCalls.current--;
+    return;
+  }
+
+  // Update the position of the ref in the array
+  menuItemRefs.current.splice(positionCurrent, 1);
+  menuItemRefs.current.splice(positionOnCall, 0, ref);
+}
 var _default = exports.default = FocusManager;

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

@@ -12,7 +12,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-var _reactUid = require("@atlaskit/ds-lib/react-uid");
+var _useId = require("@atlaskit/ds-lib/use-id");
 var _menu = require("@atlaskit/menu");
 var _groupTitle = _interopRequireDefault(require("../internal/components/group-title"));
 var _selectionStore = require("../internal/context/selection-store");
@@ -51,7 +51,7 @@ var DropdownItemRadioGroup = function DropdownItemRadioGroup(_ref) {
   var _useContext = (0, _react.useContext)(_selectionStore.SelectionStoreContext),
     setGroupState = _useContext.setGroupState,
     getGroupState = _useContext.getGroupState;
-  var uid = (0, _reactUid.useId)();
+  var uid = (0, _useId.useId)();
   var titleId = "dropdown-menu-item-radio-group-title-".concat(uid);
 
   /**

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-group.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { useId } from '@atlaskit/ds-lib/react-uid';
+import { useId } from '@atlaskit/ds-lib/use-id';
 import Section from '@atlaskit/menu/section';
 import GroupTitle from '../internal/components/group-title';
 import { CheckboxGroupContext } from '../internal/context/checkbox-group-context';

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-group.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
-import { useId } from '@atlaskit/ds-lib/react-uid';
+import { useId } from '@atlaskit/ds-lib/use-id';
 import { Section } from '@atlaskit/menu';
 import GroupTitle from './internal/components/group-title';
 

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/internal/components/focus-manager.js

@@ -9,7 +9,7 @@ import handleFocus from '../utils/handle-focus';
  *
  * Context provider which maintains the list of focusable elements and a method to
  * register new menu items.
- * This list drives the keyboard navgation of the menu.
+ * This list drives the keyboard navigation of the menu.
  *
  */
 export const FocusManagerContext = /*#__PURE__*/createContext({
@@ -25,16 +25,15 @@ const FocusManager = ({
   onClose
 }) => {
   const menuItemRefs = useRef([]);
-  const registerRef = useCallback(ref => {
-    if (ref && !menuItemRefs.current.includes(ref)) {
-      menuItemRefs.current.push(ref);
-    }
-  }, []);
+  const registerRefCalls = useRef(0);
+  const registerRef = useCallback(ref => upsertRefAtFirstPosition(ref, menuItemRefs, registerRefCalls), []);
   const {
     isLayerDisabled
   } = UNSAFE_useLayering();
-  // Intentionally rebinding on each render
   useEffect(() => {
+    // Intentionally reset count on each render
+    registerRefCalls.current = 0;
+    // Intentionally rebinding on each render
     return bind(window, {
       type: 'keydown',
       listener: handleFocus(menuItemRefs.current, isLayerDisabled, onClose)
@@ -48,4 +47,37 @@ const FocusManager = ({
     value: contextValue
   }, children);
 };
+
+/**
+ * Insert the ref at the call position in the array.
+ * If the ref is already in the array, move it to the call position.
+ * If the call position is after the current position, ignore the call.
+ *
+ * @param ref
+ * @param menuItemRefs
+ * @param registerRefCalls
+ */
+function upsertRefAtFirstPosition(ref, menuItemRefs, registerRefCalls) {
+  const positionOnCall = registerRefCalls.current++;
+
+  // Add the ref to the correct position
+  if (!menuItemRefs.current.includes(ref)) {
+    menuItemRefs.current.splice(positionOnCall, 0, ref);
+    return;
+  }
+  const positionCurrent = menuItemRefs.current.indexOf(ref);
+  if (positionOnCall === positionCurrent) {
+    // No change needed
+    return;
+  }
+  if (positionOnCall > positionCurrent) {
+    // Ignore and so keep the count the same
+    registerRefCalls.current--;
+    return;
+  }
+
+  // Update the position of the ref in the array
+  menuItemRefs.current.splice(positionCurrent, 1);
+  menuItemRefs.current.splice(positionOnCall, 0, ref);
+}
 export default FocusManager;

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { createContext, useContext, useState } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
-import { useId } from '@atlaskit/ds-lib/react-uid';
+import { useId } from '@atlaskit/ds-lib/use-id';
 import { Section } from '@atlaskit/menu';
 import GroupTitle from '../internal/components/group-title';
 import { SelectionStoreContext } from '../internal/context/selection-store';

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-group.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "hasSeparator", "id", "isList", "isScrollable", "overrides", "testId", "title"];
 import React from 'react';
-import { useId } from '@atlaskit/ds-lib/react-uid';
+import { useId } from '@atlaskit/ds-lib/use-id';
 import Section from '@atlaskit/menu/section';
 import GroupTitle from '../internal/components/group-title';
 import { CheckboxGroupContext } from '../internal/context/checkbox-group-context';

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-group.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "id", "isList", "isScrollable", "title", "testId", "hasSeparator", "overrides"];
 import React, { forwardRef } from 'react';
-import { useId } from '@atlaskit/ds-lib/react-uid';
+import { useId } from '@atlaskit/ds-lib/use-id';
 import { Section } from '@atlaskit/menu';
 import GroupTitle from './internal/components/group-title';
 

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/internal/components/focus-manager.js

@@ -9,7 +9,7 @@ import handleFocus from '../utils/handle-focus';
  *
  * Context provider which maintains the list of focusable elements and a method to
  * register new menu items.
- * This list drives the keyboard navgation of the menu.
+ * This list drives the keyboard navigation of the menu.
  *
  */
 export var FocusManagerContext = /*#__PURE__*/createContext({
@@ -24,15 +24,16 @@ var FocusManager = function FocusManager(_ref) {
   var children = _ref.children,
     onClose = _ref.onClose;
   var menuItemRefs = useRef([]);
+  var registerRefCalls = useRef(0);
   var registerRef = useCallback(function (ref) {
-    if (ref && !menuItemRefs.current.includes(ref)) {
-      menuItemRefs.current.push(ref);
-    }
+    return upsertRefAtFirstPosition(ref, menuItemRefs, registerRefCalls);
   }, []);
   var _UNSAFE_useLayering = UNSAFE_useLayering(),
     isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
-  // Intentionally rebinding on each render
   useEffect(function () {
+    // Intentionally reset count on each render
+    registerRefCalls.current = 0;
+    // Intentionally rebinding on each render
     return bind(window, {
       type: 'keydown',
       listener: handleFocus(menuItemRefs.current, isLayerDisabled, onClose)
@@ -46,4 +47,37 @@ var FocusManager = function FocusManager(_ref) {
     value: contextValue
   }, children);
 };
+
+/**
+ * Insert the ref at the call position in the array.
+ * If the ref is already in the array, move it to the call position.
+ * If the call position is after the current position, ignore the call.
+ *
+ * @param ref
+ * @param menuItemRefs
+ * @param registerRefCalls
+ */
+function upsertRefAtFirstPosition(ref, menuItemRefs, registerRefCalls) {
+  var positionOnCall = registerRefCalls.current++;
+
+  // Add the ref to the correct position
+  if (!menuItemRefs.current.includes(ref)) {
+    menuItemRefs.current.splice(positionOnCall, 0, ref);
+    return;
+  }
+  var positionCurrent = menuItemRefs.current.indexOf(ref);
+  if (positionOnCall === positionCurrent) {
+    // No change needed
+    return;
+  }
+  if (positionOnCall > positionCurrent) {
+    // Ignore and so keep the count the same
+    registerRefCalls.current--;
+    return;
+  }
+
+  // Update the position of the ref in the array
+  menuItemRefs.current.splice(positionCurrent, 1);
+  menuItemRefs.current.splice(positionOnCall, 0, ref);
+}
 export default FocusManager;

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

@@ -7,7 +7,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { createContext, useContext, useState } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
-import { useId } from '@atlaskit/ds-lib/react-uid';
+import { useId } from '@atlaskit/ds-lib/use-id';
 import { Section } from '@atlaskit/menu';
 import GroupTitle from '../internal/components/group-title';
 import { SelectionStoreContext } from '../internal/context/selection-store';

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/internal/components/focus-manager.d.ts

@@ -5,7 +5,7 @@ import { type FocusableElement } from '../../types';
  *
  * Context provider which maintains the list of focusable elements and a method to
  * register new menu items.
- * This list drives the keyboard navgation of the menu.
+ * This list drives the keyboard navigation of the menu.
  *
  */
 export declare const FocusManagerContext: React.Context<{

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/internal/components/focus-manager.d.ts

@@ -5,7 +5,7 @@ import { type FocusableElement } from '../../types';
  *
  * Context provider which maintains the list of focusable elements and a method to
  * register new menu items.
- * This list drives the keyboard navgation of the menu.
+ * This list drives the keyboard navigation of the menu.
  *
  */
 export declare const FocusManagerContext: React.Context<{

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.6",
 	"description": "A dropdown menu displays a list of actions or options to a user.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -25,7 +25,7 @@
 	"dependencies": {
 		"@atlaskit/button": "^20.2.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
-		"@atlaskit/ds-lib": "^2.6.0",
+		"@atlaskit/ds-lib": "^2.7.0",
 		"@atlaskit/icon": "^22.20.0",
 		"@atlaskit/layering": "^0.5.0",
 		"@atlaskit/menu": "^2.12.0",
@@ -72,6 +72,9 @@
 	"platform-feature-flags": {
 		"platform_dst_popup-disable-focuslock": {
 			"type": "boolean"
+		},
+		"platform_button_item-add-ufo-metrics": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {