@atlaskit/dropdown-menu 12.1.1 → 12.1.2

package/CHANGELOG.md

@@ -1,21 +1,34 @@
 # @atlaskit/dropdown-menu
 
+## 12.1.2
+
+### Patch Changes
+
+- [#41673](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41673) [`e0bc1e5b8bb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e0bc1e5b8bb) - fix: adds spread prop support back to DropdownMenu and sub-components after their removal in version `11.14.5`.
+  These spread props will be removed instead in a future major version.
+
 ## 12.1.1
 
 ### Patch Changes
 
+- Warning: This version is deprecated due to breaking behavioural change from removal of spread props in 11.14.5. Please upgrade to version 12.1.2 or later
+
 - [#41611](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41611) [`876d7943287`](https://bitbucket.org/atlassian/atlassian-frontend/commits/876d7943287) - Fix keyboard arrow controls for dropdown item custom component.
 
 ## 12.1.0
 
 ### Minor Changes
 
+- Warning: This version is deprecated due to breaking behavioural change from removal of spread props in 11.14.5. Please upgrade to version 12.1.2 or later
+
 - [#41586](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41586) [`ef0466f92d9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ef0466f92d9) - We are removing previously added feature flag and unsafe entry point usage of the new Button inside DropdownMenu.
 
 ## 12.0.0
 
 ### Major Changes
 
+- Warning: This version is deprecated due to breaking behavioural change from removal of spread props in 11.14.5. Please upgrade to version 12.1.2 or later
+
 - [#41355](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41355) [`cd1c813da18`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cd1c813da18) - Menu items now have a secondary selected state (border or notch), this was previously feature flagged for Atlassian experiences and is now available for everyone.
 
   This change makes all menu items are now relatively positioned, if you had any child elements that leaned on this behaviour your experiences will now be broken!
@@ -40,6 +53,8 @@
 
 ### Patch Changes
 
+- Warning: This version is deprecated due to breaking behavioural change from the removal of spread props. Please downgrade to 11.14.4, or upgrade to 12.1.2 or later
+
 - [#41067](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41067) [`5a9ed67f8f5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5a9ed67f8f5) - Expand rest props for more explicit function data flow.
 
 ## 11.14.4

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

@@ -5,9 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _section = _interopRequireDefault(require("@atlaskit/menu/section"));
 var _checkboxGroupContext = require("../internal/context/checkbox-group-context");
+var _excluded = ["children", "hasSeparator", "id", "isList", "isScrollable", "overrides", "testId", "title"];
 /**
  * __Dropdown item checkbox group__
  *
@@ -22,10 +25,11 @@ var DropdownItemCheckboxGroup = function DropdownItemCheckboxGroup(_ref) {
     isScrollable = _ref.isScrollable,
     overrides = _ref.overrides,
     testId = _ref.testId,
-    title = _ref.title;
+    title = _ref.title,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_checkboxGroupContext.CheckboxGroupContext.Provider, {
     value: id
-  }, /*#__PURE__*/_react.default.createElement(_section.default, {
+  }, /*#__PURE__*/_react.default.createElement(_section.default, (0, _extends2.default)({
     hasSeparator: hasSeparator,
     id: id,
     isList: isList,
@@ -35,6 +39,7 @@ var DropdownItemCheckboxGroup = function DropdownItemCheckboxGroup(_ref) {
     overrides: overrides,
     testId: testId,
     title: title
-  }, children));
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, rest), children));
 };
 var _default = exports.default = DropdownItemCheckboxGroup;

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

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _menu = require("@atlaskit/menu");
@@ -14,6 +16,7 @@ var _buttonItem = _interopRequireDefault(require("@atlaskit/menu/button-item"));
 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"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
@@ -38,7 +41,8 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(_ref) {
     shouldDescriptionWrap = _ref$shouldDescriptio === void 0 ? true : _ref$shouldDescriptio,
     _ref$shouldTitleWrap = _ref.shouldTitleWrap,
     shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? true : _ref$shouldTitleWrap,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    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
     console.warn("[DropdownItemCheckbox] You've used both `defaultSelected` and `isSelected` props. This is dangerous and can lead to unexpected results. Use one or the other depending if you want to control the components state yourself.");
@@ -60,7 +64,7 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(_ref) {
   var itemRef = (0, _useRegisterItemWithFocusManager.default)();
   return /*#__PURE__*/_react.default.createElement(_menu.SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
     value: "none"
-  }, /*#__PURE__*/_react.default.createElement(_buttonItem.default, {
+  }, /*#__PURE__*/_react.default.createElement(_buttonItem.default, (0, _extends2.default)({
     "aria-checked": selected,
     description: description,
     iconBefore: /*#__PURE__*/_react.default.createElement(_checkboxIcon.default, {
@@ -75,6 +79,7 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(_ref) {
     shouldDescriptionWrap: shouldDescriptionWrap,
     shouldTitleWrap: shouldTitleWrap,
     testId: testId
-  }, children));
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, rest), children));
 };
 var _default = exports.default = DropdownItemCheckbox;

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

@@ -6,12 +6,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _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 _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"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
@@ -39,10 +42,11 @@ var DropdownMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     _ref$shouldTitleWrap = _ref.shouldTitleWrap,
     shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? true : _ref$shouldTitleWrap,
     target = _ref.target,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var itemRef = (0, _useRegisterItemWithFocusManager.default)();
   if (component) {
-    return /*#__PURE__*/_react.default.createElement(_customItem.default, {
+    return /*#__PURE__*/_react.default.createElement(_customItem.default, (0, _extends2.default)({
       component: component,
       description: description,
       iconAfter: elemAfter,
@@ -55,9 +59,16 @@ var DropdownMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
       shouldTitleWrap: shouldTitleWrap,
       testId: testId,
       href: href
-    }, children);
+      // Thanks to spread props, these attributes are passed to CustomItem, even though
+      // it's not in the component's prop types.
+      // @ts-expect-error
+      ,
+      target: target,
+      rel: rel
+      // DSP-13312 TODO: remove spread props in future major release
+    }, rest), children);
   } else if (href) {
-    return /*#__PURE__*/_react.default.createElement(_linkItem.default, {
+    return /*#__PURE__*/_react.default.createElement(_linkItem.default, (0, _extends2.default)({
       description: description,
       href: href,
       iconAfter: elemAfter,
@@ -72,9 +83,10 @@ var DropdownMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
       shouldTitleWrap: shouldTitleWrap,
       target: target,
       testId: testId
-    }, children);
+      // DSP-13312 TODO: remove spread props in future major release
+    }, rest), children);
   } else {
-    return /*#__PURE__*/_react.default.createElement(_buttonItem.default, {
+    return /*#__PURE__*/_react.default.createElement(_buttonItem.default, (0, _extends2.default)({
       description: description,
       iconAfter: elemAfter,
       iconBefore: elemBefore,
@@ -86,7 +98,14 @@ var DropdownMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
       shouldDescriptionWrap: shouldDescriptionWrap,
       shouldTitleWrap: shouldTitleWrap,
       testId: testId
-    }, children);
+      // Thanks to spread props, these attributes are passed to CustomItem, even though
+      // it's not in the component's prop types.
+      // @ts-expect-error
+      ,
+      target: target,
+      rel: rel
+      // DSP-13312 TODO: remove spread props in future major release
+    }, rest), children);
   }
 });
 var _default = exports.default = DropdownMenuItem;

package/dist/cjs/dropdown-menu.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
@@ -25,10 +26,11 @@ var _menuWrapper = _interopRequireDefault(require("./internal/components/menu-wr
 var _selectionStore = _interopRequireDefault(require("./internal/context/selection-store"));
 var _useRegisterItemWithFocusManager = _interopRequireDefault(require("./internal/hooks/use-register-item-with-focus-manager"));
 var _useGeneratedId = _interopRequireWildcard(require("./internal/utils/use-generated-id"));
+var _excluded = ["ref", "aria-controls", "aria-expanded", "aria-haspopup"]; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-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) { (0, _defineProperty2.default)(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; } // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+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) { (0, _defineProperty2.default)(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; }
 var gridSize = (0, _constants.gridSize)();
 var MAX_HEIGHT = "calc(100vh - ".concat(gridSize * 2, "px)");
 var opposites = {
@@ -186,13 +188,14 @@ var DropdownMenu = function DropdownMenu(_ref) {
       var ref = _ref2.ref,
         ariaControls = _ref2['aria-controls'],
         ariaExpanded = _ref2['aria-expanded'],
-        ariaHasPopup = _ref2['aria-haspopup'];
+        ariaHasPopup = _ref2['aria-haspopup'],
+        rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
       if (typeof _trigger === 'function') {
-        return _trigger(_objectSpread(_objectSpread({
+        return _trigger(_objectSpread(_objectSpread(_objectSpread({
           'aria-controls': ariaControls,
           'aria-expanded': ariaExpanded,
           'aria-haspopup': ariaHasPopup
-        }, bindFocus), {}, {
+        }, rest), bindFocus), {}, {
           triggerRef: (0, _mergeRefs.default)([ref, itemRef]),
           isSelected: isLocalOpen,
           onClick: handleTriggerClicked,

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

@@ -6,13 +6,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.RadioGroupContext = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _section = _interopRequireDefault(require("@atlaskit/menu/section"));
 var _selectionStore = require("../internal/context/selection-store");
 var _resetOptionsInGroup = _interopRequireDefault(require("../internal/utils/reset-options-in-group"));
+var _excluded = ["children", "hasSeparator", "id", "isList", "isScrollable", "overrides", "testId", "title"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -41,7 +44,8 @@ var DropdownItemRadioGroup = function DropdownItemRadioGroup(_ref) {
     isScrollable = _ref.isScrollable,
     overrides = _ref.overrides,
     testId = _ref.testId,
-    title = _ref.title;
+    title = _ref.title,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useContext = (0, _react.useContext)(_selectionStore.SelectionStoreContext),
     setGroupState = _useContext.setGroupState,
     getGroupState = _useContext.getGroupState;
@@ -67,7 +71,7 @@ var DropdownItemRadioGroup = function DropdownItemRadioGroup(_ref) {
       radioGroupState: radioGroupState,
       selectRadioItem: selectRadioItem
     }
-  }, /*#__PURE__*/_react.default.createElement(_section.default, {
+  }, /*#__PURE__*/_react.default.createElement(_section.default, (0, _extends2.default)({
     hasSeparator: hasSeparator,
     id: id,
     isList: isList,
@@ -77,6 +81,7 @@ var DropdownItemRadioGroup = function DropdownItemRadioGroup(_ref) {
     overrides: overrides,
     testId: testId,
     title: title
-  }, children));
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, rest), children));
 };
 var _default = exports.default = DropdownItemRadioGroup;

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

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _menu = require("@atlaskit/menu");
@@ -15,6 +17,7 @@ var _radioIcon = _interopRequireDefault(require("../internal/components/radio-ic
 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"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
@@ -40,7 +43,8 @@ var DropdownItemRadio = function DropdownItemRadio(_ref) {
     _ref$shouldDescriptio = _ref.shouldDescriptionWrap,
     shouldDescriptionWrap = _ref$shouldDescriptio === void 0 ? true : _ref$shouldDescriptio,
     _ref$shouldTitleWrap = _ref.shouldTitleWrap,
-    shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? true : _ref$shouldTitleWrap;
+    shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? true : _ref$shouldTitleWrap,
+    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
     console.warn("[DropdownItemRadio] You've used both `defaultSelected` and `isSelected` props. This is dangerous and can lead to unexpected results. Use one or the other depending if you want to control the components state yourself.");
@@ -62,9 +66,8 @@ var DropdownItemRadio = function DropdownItemRadio(_ref) {
   var itemRef = (0, _useRegisterItemWithFocusManager.default)();
   return /*#__PURE__*/_react.default.createElement(_menu.SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
     value: "none"
-  }, /*#__PURE__*/_react.default.createElement(_buttonItem.default, {
+  }, /*#__PURE__*/_react.default.createElement(_buttonItem.default, (0, _extends2.default)({
     "aria-checked": selected,
-    children: children,
     description: description,
     iconBefore: /*#__PURE__*/_react.default.createElement(_radioIcon.default, {
       checked: selected
@@ -78,6 +81,12 @@ var DropdownItemRadio = function DropdownItemRadio(_ref) {
     shouldDescriptionWrap: shouldDescriptionWrap,
     shouldTitleWrap: shouldTitleWrap,
     testId: testId
-  }));
+    // Thanks to spread props, this attribute are passed to ButtonItem, even though
+    // it's not in the component's prop types.
+    // @ts-expect-error
+    ,
+    title: title
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, rest), children));
 };
 var _default = exports.default = DropdownItemRadio;

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Section from '@atlaskit/menu/section';
 import { CheckboxGroupContext } from '../internal/context/checkbox-group-context';
@@ -15,11 +16,13 @@ const DropdownItemCheckboxGroup = ({
   isScrollable,
   overrides,
   testId,
-  title
+  title,
+  // DSP-13312 TODO: remove spread props in future major release
+  ...rest
 }) => {
   return /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
     value: id
-  }, /*#__PURE__*/React.createElement(Section, {
+  }, /*#__PURE__*/React.createElement(Section, _extends({
     hasSeparator: hasSeparator,
     id: id,
     isList: isList,
@@ -29,6 +32,7 @@ const DropdownItemCheckboxGroup = ({
     overrides: overrides,
     testId: testId,
     title: title
-  }, children));
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, rest), children));
 };
 export default DropdownItemCheckboxGroup;

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
@@ -24,7 +25,9 @@ const DropdownItemCheckbox = ({
   onClick: providedOnClick = noop,
   shouldDescriptionWrap = true,
   shouldTitleWrap = true,
-  testId
+  testId,
+  // DSP-13312 TODO: remove spread props in future major release
+  ...rest
 }) => {
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
     // eslint-disable-next-line no-console
@@ -42,7 +45,7 @@ const DropdownItemCheckbox = ({
   const itemRef = useRegisterItemWithFocusManager();
   return /*#__PURE__*/React.createElement(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
     value: "none"
-  }, /*#__PURE__*/React.createElement(ButtonItem, {
+  }, /*#__PURE__*/React.createElement(ButtonItem, _extends({
     "aria-checked": selected,
     description: description,
     iconBefore: /*#__PURE__*/React.createElement(CheckboxIcon, {
@@ -57,6 +60,7 @@ const DropdownItemCheckbox = ({
     shouldDescriptionWrap: shouldDescriptionWrap,
     shouldTitleWrap: shouldTitleWrap,
     testId: testId
-  }, children));
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, rest), children));
 };
 export default DropdownItemCheckbox;

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import ButtonItem from '@atlaskit/menu/button-item';
@@ -27,11 +28,12 @@ const DropdownMenuItem = /*#__PURE__*/forwardRef(({
   shouldDescriptionWrap = true,
   shouldTitleWrap = true,
   target,
-  testId
+  testId,
+  ...rest
 }, ref) => {
   const itemRef = useRegisterItemWithFocusManager();
   if (component) {
-    return /*#__PURE__*/React.createElement(CustomItem, {
+    return /*#__PURE__*/React.createElement(CustomItem, _extends({
       component: component,
       description: description,
       iconAfter: elemAfter,
@@ -44,9 +46,16 @@ const DropdownMenuItem = /*#__PURE__*/forwardRef(({
       shouldTitleWrap: shouldTitleWrap,
       testId: testId,
       href: href
-    }, children);
+      // Thanks to spread props, these attributes are passed to CustomItem, even though
+      // it's not in the component's prop types.
+      // @ts-expect-error
+      ,
+      target: target,
+      rel: rel
+      // DSP-13312 TODO: remove spread props in future major release
+    }, rest), children);
   } else if (href) {
-    return /*#__PURE__*/React.createElement(LinkItem, {
+    return /*#__PURE__*/React.createElement(LinkItem, _extends({
       description: description,
       href: href,
       iconAfter: elemAfter,
@@ -61,9 +70,10 @@ const DropdownMenuItem = /*#__PURE__*/forwardRef(({
       shouldTitleWrap: shouldTitleWrap,
       target: target,
       testId: testId
-    }, children);
+      // DSP-13312 TODO: remove spread props in future major release
+    }, rest), children);
   } else {
-    return /*#__PURE__*/React.createElement(ButtonItem, {
+    return /*#__PURE__*/React.createElement(ButtonItem, _extends({
       description: description,
       iconAfter: elemAfter,
       iconBefore: elemBefore,
@@ -75,7 +85,14 @@ const DropdownMenuItem = /*#__PURE__*/forwardRef(({
       shouldDescriptionWrap: shouldDescriptionWrap,
       shouldTitleWrap: shouldTitleWrap,
       testId: testId
-    }, children);
+      // Thanks to spread props, these attributes are passed to CustomItem, even though
+      // it's not in the component's prop types.
+      // @ts-expect-error
+      ,
+      target: target,
+      rel: rel
+      // DSP-13312 TODO: remove spread props in future major release
+    }, rest), children);
   }
 });
 export default DropdownMenuItem;

package/dist/es2019/dropdown-menu.js

@@ -159,13 +159,16 @@ const DropdownMenu = ({
       ref,
       'aria-controls': ariaControls,
       'aria-expanded': ariaExpanded,
-      'aria-haspopup': ariaHasPopup
+      'aria-haspopup': ariaHasPopup,
+      // DSP-13312 TODO: remove spread props in future major release
+      ...rest
     }) => {
       if (typeof trigger === 'function') {
         return trigger({
           'aria-controls': ariaControls,
           'aria-expanded': ariaExpanded,
           'aria-haspopup': ariaHasPopup,
+          ...rest,
           ...bindFocus,
           triggerRef: mergeRefs([ref, itemRef]),
           isSelected: isLocalOpen,

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { createContext, useContext, useState } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import Section from '@atlaskit/menu/section';
@@ -27,7 +28,9 @@ const DropdownItemRadioGroup = ({
   isScrollable,
   overrides,
   testId,
-  title
+  title,
+  // DSP-13312 TODO: remove spread props in future major release
+  ...rest
 }) => {
   const {
     setGroupState,
@@ -53,7 +56,7 @@ const DropdownItemRadioGroup = ({
       radioGroupState,
       selectRadioItem
     }
-  }, /*#__PURE__*/React.createElement(Section, {
+  }, /*#__PURE__*/React.createElement(Section, _extends({
     hasSeparator: hasSeparator,
     id: id,
     isList: isList,
@@ -63,6 +66,7 @@ const DropdownItemRadioGroup = ({
     overrides: overrides,
     testId: testId,
     title: title
-  }, children));
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, rest), children));
 };
 export default DropdownItemRadioGroup;

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
@@ -26,7 +27,9 @@ const DropdownItemRadio = ({
   isSelected,
   onClick: providedOnClick = noop,
   shouldDescriptionWrap = true,
-  shouldTitleWrap = true
+  shouldTitleWrap = true,
+  // DSP-13312 TODO: remove spread props in future major release
+  ...rest
 }) => {
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
     // eslint-disable-next-line no-console
@@ -44,9 +47,8 @@ const DropdownItemRadio = ({
   const itemRef = useRegisterItemWithFocusManager();
   return /*#__PURE__*/React.createElement(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
     value: "none"
-  }, /*#__PURE__*/React.createElement(ButtonItem, {
+  }, /*#__PURE__*/React.createElement(ButtonItem, _extends({
     "aria-checked": selected,
-    children: children,
     description: description,
     iconBefore: /*#__PURE__*/React.createElement(RadioIcon, {
       checked: selected
@@ -60,6 +62,12 @@ const DropdownItemRadio = ({
     shouldDescriptionWrap: shouldDescriptionWrap,
     shouldTitleWrap: shouldTitleWrap,
     testId: testId
-  }));
+    // Thanks to spread props, this attribute are passed to ButtonItem, even though
+    // it's not in the component's prop types.
+    // @ts-expect-error
+    ,
+    title: title
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, rest), children));
 };
 export default DropdownItemRadio;

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

@@ -1,3 +1,6 @@
+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 Section from '@atlaskit/menu/section';
 import { CheckboxGroupContext } from '../internal/context/checkbox-group-context';
@@ -15,10 +18,11 @@ var DropdownItemCheckboxGroup = function DropdownItemCheckboxGroup(_ref) {
     isScrollable = _ref.isScrollable,
     overrides = _ref.overrides,
     testId = _ref.testId,
-    title = _ref.title;
+    title = _ref.title,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
     value: id
-  }, /*#__PURE__*/React.createElement(Section, {
+  }, /*#__PURE__*/React.createElement(Section, _extends({
     hasSeparator: hasSeparator,
     id: id,
     isList: isList,
@@ -28,6 +32,7 @@ var DropdownItemCheckboxGroup = function DropdownItemCheckboxGroup(_ref) {
     overrides: overrides,
     testId: testId,
     title: title
-  }, children));
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, rest), children));
 };
 export default DropdownItemCheckboxGroup;

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

@@ -1,4 +1,7 @@
+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"];
 import React, { useCallback } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
@@ -28,7 +31,8 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(_ref) {
     shouldDescriptionWrap = _ref$shouldDescriptio === void 0 ? true : _ref$shouldDescriptio,
     _ref$shouldTitleWrap = _ref.shouldTitleWrap,
     shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? true : _ref$shouldTitleWrap,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    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
     console.warn("[DropdownItemCheckbox] You've used both `defaultSelected` and `isSelected` props. This is dangerous and can lead to unexpected results. Use one or the other depending if you want to control the components state yourself.");
@@ -50,7 +54,7 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(_ref) {
   var itemRef = useRegisterItemWithFocusManager();
   return /*#__PURE__*/React.createElement(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
     value: "none"
-  }, /*#__PURE__*/React.createElement(ButtonItem, {
+  }, /*#__PURE__*/React.createElement(ButtonItem, _extends({
     "aria-checked": selected,
     description: description,
     iconBefore: /*#__PURE__*/React.createElement(CheckboxIcon, {
@@ -65,6 +69,7 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(_ref) {
     shouldDescriptionWrap: shouldDescriptionWrap,
     shouldTitleWrap: shouldTitleWrap,
     testId: testId
-  }, children));
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, rest), children));
 };
 export default DropdownItemCheckbox;

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

@@ -1,3 +1,6 @@
+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"];
 import React, { forwardRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import ButtonItem from '@atlaskit/menu/button-item';
@@ -29,10 +32,11 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$shouldTitleWrap = _ref.shouldTitleWrap,
     shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? true : _ref$shouldTitleWrap,
     target = _ref.target,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var itemRef = useRegisterItemWithFocusManager();
   if (component) {
-    return /*#__PURE__*/React.createElement(CustomItem, {
+    return /*#__PURE__*/React.createElement(CustomItem, _extends({
       component: component,
       description: description,
       iconAfter: elemAfter,
@@ -45,9 +49,16 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       shouldTitleWrap: shouldTitleWrap,
       testId: testId,
       href: href
-    }, children);
+      // Thanks to spread props, these attributes are passed to CustomItem, even though
+      // it's not in the component's prop types.
+      // @ts-expect-error
+      ,
+      target: target,
+      rel: rel
+      // DSP-13312 TODO: remove spread props in future major release
+    }, rest), children);
   } else if (href) {
-    return /*#__PURE__*/React.createElement(LinkItem, {
+    return /*#__PURE__*/React.createElement(LinkItem, _extends({
       description: description,
       href: href,
       iconAfter: elemAfter,
@@ -62,9 +73,10 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       shouldTitleWrap: shouldTitleWrap,
       target: target,
       testId: testId
-    }, children);
+      // DSP-13312 TODO: remove spread props in future major release
+    }, rest), children);
   } else {
-    return /*#__PURE__*/React.createElement(ButtonItem, {
+    return /*#__PURE__*/React.createElement(ButtonItem, _extends({
       description: description,
       iconAfter: elemAfter,
       iconBefore: elemBefore,
@@ -76,7 +88,14 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       shouldDescriptionWrap: shouldDescriptionWrap,
       shouldTitleWrap: shouldTitleWrap,
       testId: testId
-    }, children);
+      // Thanks to spread props, these attributes are passed to CustomItem, even though
+      // it's not in the component's prop types.
+      // @ts-expect-error
+      ,
+      target: target,
+      rel: rel
+      // DSP-13312 TODO: remove spread props in future major release
+    }, rest), children);
   }
 });
 export default DropdownMenuItem;

package/dist/esm/dropdown-menu.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["ref", "aria-controls", "aria-expanded", "aria-haspopup"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -177,13 +179,14 @@ var DropdownMenu = function DropdownMenu(_ref) {
       var ref = _ref2.ref,
         ariaControls = _ref2['aria-controls'],
         ariaExpanded = _ref2['aria-expanded'],
-        ariaHasPopup = _ref2['aria-haspopup'];
+        ariaHasPopup = _ref2['aria-haspopup'],
+        rest = _objectWithoutProperties(_ref2, _excluded);
       if (typeof _trigger === 'function') {
-        return _trigger(_objectSpread(_objectSpread({
+        return _trigger(_objectSpread(_objectSpread(_objectSpread({
           'aria-controls': ariaControls,
           'aria-expanded': ariaExpanded,
           'aria-haspopup': ariaHasPopup
-        }, bindFocus), {}, {
+        }, rest), bindFocus), {}, {
           triggerRef: mergeRefs([ref, itemRef]),
           isSelected: isLocalOpen,
           onClick: handleTriggerClicked,

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

@@ -1,5 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "hasSeparator", "id", "isList", "isScrollable", "overrides", "testId", "title"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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';
@@ -31,7 +34,8 @@ var DropdownItemRadioGroup = function DropdownItemRadioGroup(_ref) {
     isScrollable = _ref.isScrollable,
     overrides = _ref.overrides,
     testId = _ref.testId,
-    title = _ref.title;
+    title = _ref.title,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useContext = useContext(SelectionStoreContext),
     setGroupState = _useContext.setGroupState,
     getGroupState = _useContext.getGroupState;
@@ -57,7 +61,7 @@ var DropdownItemRadioGroup = function DropdownItemRadioGroup(_ref) {
       radioGroupState: radioGroupState,
       selectRadioItem: selectRadioItem
     }
-  }, /*#__PURE__*/React.createElement(Section, {
+  }, /*#__PURE__*/React.createElement(Section, _extends({
     hasSeparator: hasSeparator,
     id: id,
     isList: isList,
@@ -67,6 +71,7 @@ var DropdownItemRadioGroup = function DropdownItemRadioGroup(_ref) {
     overrides: overrides,
     testId: testId,
     title: title
-  }, children));
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, rest), children));
 };
 export default DropdownItemRadioGroup;

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

@@ -1,4 +1,7 @@
+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"];
 import React, { useCallback } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
@@ -30,7 +33,8 @@ var DropdownItemRadio = function DropdownItemRadio(_ref) {
     _ref$shouldDescriptio = _ref.shouldDescriptionWrap,
     shouldDescriptionWrap = _ref$shouldDescriptio === void 0 ? true : _ref$shouldDescriptio,
     _ref$shouldTitleWrap = _ref.shouldTitleWrap,
-    shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? true : _ref$shouldTitleWrap;
+    shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? true : _ref$shouldTitleWrap,
+    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
     console.warn("[DropdownItemRadio] You've used both `defaultSelected` and `isSelected` props. This is dangerous and can lead to unexpected results. Use one or the other depending if you want to control the components state yourself.");
@@ -52,9 +56,8 @@ var DropdownItemRadio = function DropdownItemRadio(_ref) {
   var itemRef = useRegisterItemWithFocusManager();
   return /*#__PURE__*/React.createElement(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
     value: "none"
-  }, /*#__PURE__*/React.createElement(ButtonItem, {
+  }, /*#__PURE__*/React.createElement(ButtonItem, _extends({
     "aria-checked": selected,
-    children: children,
     description: description,
     iconBefore: /*#__PURE__*/React.createElement(RadioIcon, {
       checked: selected
@@ -68,6 +71,12 @@ var DropdownItemRadio = function DropdownItemRadio(_ref) {
     shouldDescriptionWrap: shouldDescriptionWrap,
     shouldTitleWrap: shouldTitleWrap,
     testId: testId
-  }));
+    // Thanks to spread props, this attribute are passed to ButtonItem, even though
+    // it's not in the component's prop types.
+    // @ts-expect-error
+    ,
+    title: title
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, rest), children));
 };
 export default DropdownItemRadio;

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

@@ -12,5 +12,5 @@ interface DropdownItemCheckboxGroupProps extends SectionProps {
  * A wrapping element for dropdown menu checkbox items.
  *
  */
-declare const DropdownItemCheckboxGroup: ({ children, hasSeparator, id, isList, isScrollable, overrides, testId, title, }: DropdownItemCheckboxGroupProps) => JSX.Element;
+declare const DropdownItemCheckboxGroup: ({ children, hasSeparator, id, isList, isScrollable, overrides, testId, title, ...rest }: DropdownItemCheckboxGroupProps) => JSX.Element;
 export default DropdownItemCheckboxGroup;

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

@@ -9,5 +9,5 @@ import { 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, }: DropdownItemCheckboxProps) => JSX.Element;
+declare const DropdownItemCheckbox: ({ children, defaultSelected, description, id, isDisabled, isSelected, onClick: providedOnClick, shouldDescriptionWrap, shouldTitleWrap, testId, ...rest }: DropdownItemCheckboxProps) => JSX.Element;
 export default DropdownItemCheckbox;

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

@@ -21,5 +21,5 @@ export declare const RadioGroupContext: React.Context<RadioGroupContextProps>;
  *  across mount and unmounts.
  *
  */
-declare const DropdownItemRadioGroup: ({ children, hasSeparator, id, isList, isScrollable, overrides, testId, title, }: DropdownItemRadioGroupProps) => JSX.Element;
+declare const DropdownItemRadioGroup: ({ children, hasSeparator, id, isList, isScrollable, overrides, testId, title, ...rest }: DropdownItemRadioGroupProps) => JSX.Element;
 export default DropdownItemRadioGroup;

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

@@ -9,5 +9,5 @@ import { 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, }: DropdownItemRadioProps) => JSX.Element;
+declare const DropdownItemRadio: ({ children, defaultSelected, testId, id, title, description, isDisabled, isSelected, onClick: providedOnClick, shouldDescriptionWrap, shouldTitleWrap, ...rest }: DropdownItemRadioProps) => JSX.Element;
 export default DropdownItemRadio;

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

@@ -12,5 +12,5 @@ interface DropdownItemCheckboxGroupProps extends SectionProps {
  * A wrapping element for dropdown menu checkbox items.
  *
  */
-declare const DropdownItemCheckboxGroup: ({ children, hasSeparator, id, isList, isScrollable, overrides, testId, title, }: DropdownItemCheckboxGroupProps) => JSX.Element;
+declare const DropdownItemCheckboxGroup: ({ children, hasSeparator, id, isList, isScrollable, overrides, testId, title, ...rest }: DropdownItemCheckboxGroupProps) => JSX.Element;
 export default DropdownItemCheckboxGroup;

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

@@ -9,5 +9,5 @@ import { 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, }: DropdownItemCheckboxProps) => JSX.Element;
+declare const DropdownItemCheckbox: ({ children, defaultSelected, description, id, isDisabled, isSelected, onClick: providedOnClick, shouldDescriptionWrap, shouldTitleWrap, testId, ...rest }: DropdownItemCheckboxProps) => JSX.Element;
 export default DropdownItemCheckbox;

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

@@ -21,5 +21,5 @@ export declare const RadioGroupContext: React.Context<RadioGroupContextProps>;
  *  across mount and unmounts.
  *
  */
-declare const DropdownItemRadioGroup: ({ children, hasSeparator, id, isList, isScrollable, overrides, testId, title, }: DropdownItemRadioGroupProps) => JSX.Element;
+declare const DropdownItemRadioGroup: ({ children, hasSeparator, id, isList, isScrollable, overrides, testId, title, ...rest }: DropdownItemRadioGroupProps) => JSX.Element;
 export default DropdownItemRadioGroup;

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

@@ -9,5 +9,5 @@ import { 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, }: DropdownItemRadioProps) => JSX.Element;
+declare const DropdownItemRadio: ({ children, defaultSelected, testId, id, title, description, isDisabled, isSelected, onClick: providedOnClick, shouldDescriptionWrap, shouldTitleWrap, ...rest }: DropdownItemRadioProps) => JSX.Element;
 export default DropdownItemRadio;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dropdown-menu",
-  "version": "12.1.1",
+  "version": "12.1.2",
   "description": "A dropdown menu displays a list of actions or options to a user.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/report.api.md

@@ -57,6 +57,7 @@ export const DropdownItemCheckbox: ({
   shouldDescriptionWrap,
   shouldTitleWrap,
   testId,
+  ...rest
 }: DropdownItemCheckboxProps) => JSX.Element;
 
 // @public
@@ -69,6 +70,7 @@ export const DropdownItemCheckboxGroup: ({
   overrides,
   testId,
   title,
+  ...rest
 }: DropdownItemCheckboxGroupProps) => JSX.Element;
 
 // @public (undocumented)
@@ -125,6 +127,7 @@ export const DropdownItemRadio: ({
   onClick: providedOnClick,
   shouldDescriptionWrap,
   shouldTitleWrap,
+  ...rest
 }: DropdownItemRadioProps) => JSX.Element;
 
 // @public
@@ -137,6 +140,7 @@ export const DropdownItemRadioGroup: ({
   overrides,
   testId,
   title,
+  ...rest
 }: DropdownItemRadioGroupProps) => JSX.Element;
 
 // @public (undocumented)

package/tmp/api-report-tmp.d.ts

@@ -31,10 +31,10 @@ export interface CustomTriggerProps<TriggerElement extends HTMLElement = HTMLEle
 export const DropdownItem: React_2.ForwardRefExoticComponent<DropdownItemProps & React_2.RefAttributes<HTMLElement>>;
 
 // @public
-export const DropdownItemCheckbox: ({ children, defaultSelected, description, id, isDisabled, isSelected, onClick: providedOnClick, shouldDescriptionWrap, shouldTitleWrap, testId, }: DropdownItemCheckboxProps) => JSX.Element;
+export const DropdownItemCheckbox: ({ children, defaultSelected, description, id, isDisabled, isSelected, onClick: providedOnClick, shouldDescriptionWrap, shouldTitleWrap, testId, ...rest }: DropdownItemCheckboxProps) => JSX.Element;
 
 // @public
-export const DropdownItemCheckboxGroup: ({ children, hasSeparator, id, isList, isScrollable, overrides, testId, title, }: DropdownItemCheckboxGroupProps) => JSX.Element;
+export const DropdownItemCheckboxGroup: ({ children, hasSeparator, id, isList, isScrollable, overrides, testId, title, ...rest }: DropdownItemCheckboxGroupProps) => JSX.Element;
 
 // @public (undocumented)
 interface DropdownItemCheckboxGroupProps extends SectionProps {
@@ -78,10 +78,10 @@ export interface DropdownItemProps {
 }
 
 // @public
-export const DropdownItemRadio: ({ children, defaultSelected, testId, id, title, description, isDisabled, isSelected, onClick: providedOnClick, shouldDescriptionWrap, shouldTitleWrap, }: DropdownItemRadioProps) => JSX.Element;
+export const DropdownItemRadio: ({ children, defaultSelected, testId, id, title, description, isDisabled, isSelected, onClick: providedOnClick, shouldDescriptionWrap, shouldTitleWrap, ...rest }: DropdownItemRadioProps) => JSX.Element;
 
 // @public
-export const DropdownItemRadioGroup: ({ children, hasSeparator, id, isList, isScrollable, overrides, testId, title, }: DropdownItemRadioGroupProps) => JSX.Element;
+export const DropdownItemRadioGroup: ({ children, hasSeparator, id, isList, isScrollable, overrides, testId, title, ...rest }: DropdownItemRadioGroupProps) => JSX.Element;
 
 // @public (undocumented)
 interface DropdownItemRadioGroupProps extends SectionProps {