@atlaskit/menu 4.0.0 → 5.0.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/menu
 
+## 5.0.1
+
+### Patch Changes
+
+- [#150647](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/150647)
+  [`a0fe499b55985`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a0fe499b55985) -
+  Adds a `:focus` style reset to menu items to prevent :focus styles with lower specificity from
+  leaking through.
+
+## 5.0.0
+
+### Major Changes
+
+- [#146281](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/146281)
+  [`ebb2af6f3c40f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ebb2af6f3c40f) -
+  Removed deprecated `overrides` props from ButtonItem, CustomItem, and LinkItem, and from the
+  BaseItemProps type export. Introduced `isTitleHeading` prop on CustomItem which when true renders
+  its children in a `h2` element rather than the default `span`.
+
 ## 4.0.0
 
 ### Major Changes

package/dist/cjs/internal/components/menu-item-primitive.compiled.css

@@ -56,12 +56,15 @@
 ._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
 ._vchhusvi{box-sizing:border-box}
 ._y3gn1e5h{text-align:left}
-._z5wtze3t:before{inset-inline-start:var(--ds-space-0,0)}._10531r31:visited{color:currentColor}
+._ymio1r31:focus:not(:focus-visible){outline-color:currentColor}
+._ypr0glyw:focus:not(:focus-visible){outline-style:none}
+._z5wtze3t:before{inset-inline-start:var(--ds-space-0,0)}
+._zcxs1o36:focus:not(:focus-visible){outline-width:medium}._10531r31:visited{color:currentColor}
 ._1053hu5v:visited{color:var(--ds-text-selected,currentColor)}
-._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
-._1ah311pw:focus-visible{outline-offset:calc(0px - var(--ds-border-width-outline, 2px))}
-._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
-._ra3xnqa1:focus-visible{outline-style:solid}
+._1bg411pw:focus, ._1ah311pw:focus-visible{outline-offset:calc(0px - var(--ds-border-width-outline, 2px))}
+._1hvw1bk5:focus, ._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
+._49pcnqa1:focus, ._ra3xnqa1:focus-visible{outline-style:solid}
+._nt75194a:focus, ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
 ._1bnxglyw:hover{text-decoration-line:none}
 ._30l316ov:hover{color:var(--ds-text-accent-blue,currentColor)}
 ._30l31r31:hover{color:currentColor}

package/dist/cjs/internal/components/menu-item-primitive.js

@@ -10,13 +10,12 @@ require("./menu-item-primitive.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
-var _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _menuContext = require("./menu-context");
 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; }
-var defaultRender = function defaultRender(Component, props) {
+var renderTitle = function renderTitle(Component, props) {
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -24,7 +23,7 @@ var defaultRender = function defaultRender(Component, props) {
   );
 };
 var styles = {
-  root: "_19itidpf _12ji1r31 _1qu2glyw _12y3idpf _4bfu1r31 _1hmsglyw _ajmmnqa1 _kqswh2mm _1e0c1txw _vchhusvi _1bsb1osq _1tke1ylp _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _4cvr1h6o _uiztglyw _80omtlke _mizu194a _1ah311pw _ra3xnqa1 _128m1bk5 _9oik1r31 _1bnxglyw _jf4cnqa1 _1cvmnqa1 _4davt94y",
+  root: "_19itidpf _12ji1r31 _1qu2glyw _12y3idpf _4bfu1r31 _1hmsglyw _ajmmnqa1 _kqswh2mm _1e0c1txw _vchhusvi _1bsb1osq _1tke1ylp _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _4cvr1h6o _uiztglyw _80omtlke _ymio1r31 _ypr0glyw _zcxs1o36 _nt75194a _mizu194a _1bg411pw _1ah311pw _49pcnqa1 _ra3xnqa1 _1hvw1bk5 _128m1bk5 _9oik1r31 _1bnxglyw _jf4cnqa1 _1cvmnqa1 _4davt94y",
   beforeAfterElementOld: "_1e0c1txw _4cvr1h6o _1bah1h6o _1o9zidpf",
   beforeAfterElement: "_1e0c1txw _1ul91tcg _1tke1tcg _4cvr1h6o _1bah1h6o _1o9zidpf",
   content: "_12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1h6o _16jlkb7n _y3gn1e5h",
@@ -69,7 +68,6 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     description = _ref.description,
     iconAfter = _ref.iconAfter,
     iconBefore = _ref.iconBefore,
-    overrides = _ref.overrides,
     UNSAFE_externalClassName = _ref.className,
     _ref$shouldTitleWrap = _ref.shouldTitleWrap,
     shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? false : _ref$shouldTitleWrap,
@@ -79,12 +77,11 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    _ref$isTitleHeading = _ref.isTitleHeading,
+    isTitleHeading = _ref$isTitleHeading === void 0 ? false : _ref$isTitleHeading,
     testId = _ref.testId;
-  (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu" || '', 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
-  );
   var spacing = (0, _react.useContext)(_menuContext.SpacingContext);
   var selectionStyle = (0, _react.useContext)(_menuContext.SELECTION_STYLE_CONTEXT_DO_NOT_USE);
-  var renderTitle = overrides && overrides.Title && overrides.Title.render || defaultRender;
   var UNSAFE_className = UNSAFE_externalClassName;
   return function () {
     return children({
@@ -102,7 +99,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
         className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElement, !(0, _platformFeatureFlags.fg)('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElementOld])
       }, iconBefore), title && /*#__PURE__*/React.createElement("div", {
         className: (0, _runtime.ax)([styles.content])
-      }, renderTitle('span', {
+      }, renderTitle(isTitleHeading ? 'h2' : 'span', {
         children: title,
         className: (0, _runtime.ax)([styles.title, shouldTitleWrap ? styles.wordBreak : styles.truncate]),
         'data-item-title': true

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

@@ -15,7 +15,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _menuItemPrimitive = _interopRequireDefault(require("../internal/components/menu-item-primitive"));
-var _excluded = ["children", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "interactionName"];
+var _excluded = ["children", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "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; }
 /**
@@ -39,7 +39,6 @@ function (props, ref) {
     isSelected = _props$isSelected === void 0 ? false : _props$isSelected,
     onClick = props.onClick,
     testId = props.testId,
-    overrides = props.overrides,
     onMouseDown = props.onMouseDown,
     shouldTitleWrap = props.shouldTitleWrap,
     shouldDescriptionWrap = props.shouldDescriptionWrap,
@@ -60,12 +59,11 @@ function (props, ref) {
   , (0, _extends2.default)({
     className: UNSAFE_className
   }, rest, {
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-    overrides: overrides,
     iconBefore: iconBefore,
     iconAfter: iconAfter,
     isDisabled: isDisabled,
     isSelected: isSelected,
+    isTitleHeading: false,
     description: description,
     title: children,
     shouldTitleWrap: shouldTitleWrap,

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

@@ -15,7 +15,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _menuItemPrimitive = _interopRequireDefault(require("../internal/components/menu-item-primitive"));
-var _excluded = ["component", "isDisabled", "isSelected", "onClick", "testId", "children", "description", "iconAfter", "iconBefore", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "UNSAFE_isDraggable", "interactionName"];
+var _excluded = ["component", "isDisabled", "isSelected", "isTitleHeading", "onClick", "testId", "children", "description", "iconAfter", "iconBefore", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "UNSAFE_isDraggable", "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; }
 var preventEvent = function preventEvent(e) {
@@ -38,13 +38,14 @@ var CustomItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardR
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    _ref$isTitleHeading = _ref.isTitleHeading,
+    isTitleHeading = _ref$isTitleHeading === void 0 ? false : _ref$isTitleHeading,
     onClick = _ref.onClick,
     testId = _ref.testId,
     children = _ref.children,
     description = _ref.description,
     iconAfter = _ref.iconAfter,
     iconBefore = _ref.iconBefore,
-    overrides = _ref.overrides,
     onMouseDown = _ref.onMouseDown,
     shouldTitleWrap = _ref.shouldTitleWrap,
     shouldDescriptionWrap = _ref.shouldDescriptionWrap,
@@ -66,14 +67,13 @@ var CustomItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardR
   , (0, _extends2.default)({
     className: UNSAFE_className
   }, rest, {
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-    overrides: overrides,
     description: description,
     iconAfter: iconAfter,
     title: children,
     iconBefore: iconBefore,
     isSelected: isSelected,
     isDisabled: isDisabled,
+    isTitleHeading: isTitleHeading,
     shouldTitleWrap: shouldTitleWrap,
     shouldDescriptionWrap: shouldDescriptionWrap,
     testId: testId && "".concat(testId, "--primitive")

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

@@ -16,7 +16,7 @@ var _appProvider = require("@atlaskit/app-provider");
 var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _menuItemPrimitive = _interopRequireDefault(require("../internal/components/menu-item-primitive"));
-var _excluded = ["children", "href", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "UNSAFE_shouldDisableRouterLink", "UNSAFE_isDraggable", "interactionName"];
+var _excluded = ["children", "href", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "UNSAFE_shouldDisableRouterLink", "UNSAFE_isDraggable", "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; }
 var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
@@ -47,7 +47,6 @@ function (props, ref) {
     isSelected = _props$isSelected === void 0 ? false : _props$isSelected,
     onClick = props.onClick,
     testId = props.testId,
-    overrides = props.overrides,
     onMouseDown = props.onMouseDown,
     shouldTitleWrap = props.shouldTitleWrap,
     shouldDescriptionWrap = props.shouldDescriptionWrap,
@@ -82,14 +81,12 @@ function (props, ref) {
   var Component = isRouterLink ? RouterLink : 'a';
   return /*#__PURE__*/React.createElement(_menuItemPrimitive.default, (0, _extends2.default)({}, rest, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: UNSAFE_className
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-    ,
-    overrides: overrides,
+    className: UNSAFE_className,
     iconBefore: iconBefore,
     iconAfter: iconAfter,
     isSelected: isSelected,
     isDisabled: isDisabled,
+    isTitleHeading: false,
     description: description,
     shouldTitleWrap: shouldTitleWrap,
     shouldDescriptionWrap: shouldDescriptionWrap,

package/dist/es2019/internal/components/menu-item-primitive.compiled.css

@@ -56,12 +56,15 @@
 ._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
 ._vchhusvi{box-sizing:border-box}
 ._y3gn1e5h{text-align:left}
-._z5wtze3t:before{inset-inline-start:var(--ds-space-0,0)}._10531r31:visited{color:currentColor}
+._ymio1r31:focus:not(:focus-visible){outline-color:currentColor}
+._ypr0glyw:focus:not(:focus-visible){outline-style:none}
+._z5wtze3t:before{inset-inline-start:var(--ds-space-0,0)}
+._zcxs1o36:focus:not(:focus-visible){outline-width:medium}._10531r31:visited{color:currentColor}
 ._1053hu5v:visited{color:var(--ds-text-selected,currentColor)}
-._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
-._1ah311pw:focus-visible{outline-offset:calc(0px - var(--ds-border-width-outline, 2px))}
-._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
-._ra3xnqa1:focus-visible{outline-style:solid}
+._1bg411pw:focus, ._1ah311pw:focus-visible{outline-offset:calc(0px - var(--ds-border-width-outline, 2px))}
+._1hvw1bk5:focus, ._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
+._49pcnqa1:focus, ._ra3xnqa1:focus-visible{outline-style:solid}
+._nt75194a:focus, ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
 ._1bnxglyw:hover{text-decoration-line:none}
 ._30l316ov:hover{color:var(--ds-text-accent-blue,currentColor)}
 ._30l31r31:hover{color:currentColor}

package/dist/es2019/internal/components/menu-item-primitive.js

@@ -3,16 +3,15 @@ import "./menu-item-primitive.compiled.css";
 import * as React from 'react';
 import { useContext } from 'react';
 import { ax, ix } from '@compiled/react/runtime';
-import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Inline } from '@atlaskit/primitives/compiled';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from './menu-context';
-const defaultRender = (Component, props) =>
+const renderTitle = (Component, props) =>
 /*#__PURE__*/
 // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 React.createElement(Component, props);
 const styles = {
-  root: "_19itidpf _12ji1r31 _1qu2glyw _12y3idpf _4bfu1r31 _1hmsglyw _ajmmnqa1 _kqswh2mm _1e0c1txw _vchhusvi _1bsb1osq _1tke1ylp _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _4cvr1h6o _uiztglyw _80omtlke _mizu194a _1ah311pw _ra3xnqa1 _128m1bk5 _9oik1r31 _1bnxglyw _jf4cnqa1 _1cvmnqa1 _4davt94y",
+  root: "_19itidpf _12ji1r31 _1qu2glyw _12y3idpf _4bfu1r31 _1hmsglyw _ajmmnqa1 _kqswh2mm _1e0c1txw _vchhusvi _1bsb1osq _1tke1ylp _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _4cvr1h6o _uiztglyw _80omtlke _ymio1r31 _ypr0glyw _zcxs1o36 _nt75194a _mizu194a _1bg411pw _1ah311pw _49pcnqa1 _ra3xnqa1 _1hvw1bk5 _128m1bk5 _9oik1r31 _1bnxglyw _jf4cnqa1 _1cvmnqa1 _4davt94y",
   beforeAfterElementOld: "_1e0c1txw _4cvr1h6o _1bah1h6o _1o9zidpf",
   beforeAfterElement: "_1e0c1txw _1ul91tcg _1tke1tcg _4cvr1h6o _1bah1h6o _1o9zidpf",
   content: "_12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1h6o _16jlkb7n _y3gn1e5h",
@@ -57,19 +56,16 @@ const MenuItemPrimitive = ({
   description,
   iconAfter,
   iconBefore,
-  overrides,
   className: UNSAFE_externalClassName,
   shouldTitleWrap = false,
   shouldDescriptionWrap = false,
   isDisabled = false,
   isSelected = false,
+  isTitleHeading = false,
   testId
 }) => {
-  propDeprecationWarning("@atlaskit/menu" || '', 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
-  );
   const spacing = useContext(SpacingContext);
   const selectionStyle = useContext(SELECTION_STYLE_CONTEXT_DO_NOT_USE);
-  const renderTitle = overrides && overrides.Title && overrides.Title.render || defaultRender;
   const UNSAFE_className = UNSAFE_externalClassName;
   return (() => {
     return children({
@@ -87,7 +83,7 @@ const MenuItemPrimitive = ({
         className: ax([fg('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElement, !fg('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElementOld])
       }, iconBefore), title && /*#__PURE__*/React.createElement("div", {
         className: ax([styles.content])
-      }, renderTitle('span', {
+      }, renderTitle(isTitleHeading ? 'h2' : 'span', {
         children: title,
         className: ax([styles.title, shouldTitleWrap ? styles.wordBreak : styles.truncate]),
         'data-item-title': true

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

@@ -26,7 +26,6 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
     isSelected = false,
     onClick,
     testId,
-    overrides,
     onMouseDown,
     shouldTitleWrap,
     shouldDescriptionWrap,
@@ -48,12 +47,11 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
   , _extends({
     className: UNSAFE_className
   }, rest, {
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-    overrides: overrides,
     iconBefore: iconBefore,
     iconAfter: iconAfter,
     isDisabled: isDisabled,
     isSelected: isSelected,
+    isTitleHeading: false,
     description: description,
     title: children,
     shouldTitleWrap: shouldTitleWrap,

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

@@ -24,13 +24,13 @@ const CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   component: Component,
   isDisabled = false,
   isSelected = false,
+  isTitleHeading = false,
   onClick,
   testId,
   children,
   description,
   iconAfter,
   iconBefore,
-  overrides,
   onMouseDown,
   shouldTitleWrap,
   shouldDescriptionWrap,
@@ -53,14 +53,13 @@ const CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   , _extends({
     className: UNSAFE_className
   }, rest, {
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-    overrides: overrides,
     description: description,
     iconAfter: iconAfter,
     title: children,
     iconBefore: iconBefore,
     isSelected: isSelected,
     isDisabled: isDisabled,
+    isTitleHeading: isTitleHeading,
     shouldTitleWrap: shouldTitleWrap,
     shouldDescriptionWrap: shouldDescriptionWrap,
     testId: testId && `${testId}--primitive`

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

@@ -34,7 +34,6 @@ const LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
     isSelected = false,
     onClick,
     testId,
-    overrides,
     onMouseDown,
     shouldTitleWrap,
     shouldDescriptionWrap,
@@ -70,14 +69,12 @@ const LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
   const Component = isRouterLink ? RouterLink : 'a';
   return /*#__PURE__*/React.createElement(MenuItemPrimitive, _extends({}, rest, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: UNSAFE_className
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-    ,
-    overrides: overrides,
+    className: UNSAFE_className,
     iconBefore: iconBefore,
     iconAfter: iconAfter,
     isSelected: isSelected,
     isDisabled: isDisabled,
+    isTitleHeading: false,
     description: description,
     shouldTitleWrap: shouldTitleWrap,
     shouldDescriptionWrap: shouldDescriptionWrap,

package/dist/esm/internal/components/menu-item-primitive.compiled.css

@@ -56,12 +56,15 @@
 ._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
 ._vchhusvi{box-sizing:border-box}
 ._y3gn1e5h{text-align:left}
-._z5wtze3t:before{inset-inline-start:var(--ds-space-0,0)}._10531r31:visited{color:currentColor}
+._ymio1r31:focus:not(:focus-visible){outline-color:currentColor}
+._ypr0glyw:focus:not(:focus-visible){outline-style:none}
+._z5wtze3t:before{inset-inline-start:var(--ds-space-0,0)}
+._zcxs1o36:focus:not(:focus-visible){outline-width:medium}._10531r31:visited{color:currentColor}
 ._1053hu5v:visited{color:var(--ds-text-selected,currentColor)}
-._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
-._1ah311pw:focus-visible{outline-offset:calc(0px - var(--ds-border-width-outline, 2px))}
-._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
-._ra3xnqa1:focus-visible{outline-style:solid}
+._1bg411pw:focus, ._1ah311pw:focus-visible{outline-offset:calc(0px - var(--ds-border-width-outline, 2px))}
+._1hvw1bk5:focus, ._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
+._49pcnqa1:focus, ._ra3xnqa1:focus-visible{outline-style:solid}
+._nt75194a:focus, ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
 ._1bnxglyw:hover{text-decoration-line:none}
 ._30l316ov:hover{color:var(--ds-text-accent-blue,currentColor)}
 ._30l31r31:hover{color:currentColor}

package/dist/esm/internal/components/menu-item-primitive.js

@@ -3,11 +3,10 @@ import "./menu-item-primitive.compiled.css";
 import * as React from 'react';
 import { useContext } from 'react';
 import { ax, ix } from '@compiled/react/runtime';
-import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Inline } from '@atlaskit/primitives/compiled';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from './menu-context';
-var defaultRender = function defaultRender(Component, props) {
+var renderTitle = function renderTitle(Component, props) {
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -15,7 +14,7 @@ var defaultRender = function defaultRender(Component, props) {
   );
 };
 var styles = {
-  root: "_19itidpf _12ji1r31 _1qu2glyw _12y3idpf _4bfu1r31 _1hmsglyw _ajmmnqa1 _kqswh2mm _1e0c1txw _vchhusvi _1bsb1osq _1tke1ylp _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _4cvr1h6o _uiztglyw _80omtlke _mizu194a _1ah311pw _ra3xnqa1 _128m1bk5 _9oik1r31 _1bnxglyw _jf4cnqa1 _1cvmnqa1 _4davt94y",
+  root: "_19itidpf _12ji1r31 _1qu2glyw _12y3idpf _4bfu1r31 _1hmsglyw _ajmmnqa1 _kqswh2mm _1e0c1txw _vchhusvi _1bsb1osq _1tke1ylp _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _4cvr1h6o _uiztglyw _80omtlke _ymio1r31 _ypr0glyw _zcxs1o36 _nt75194a _mizu194a _1bg411pw _1ah311pw _49pcnqa1 _ra3xnqa1 _1hvw1bk5 _128m1bk5 _9oik1r31 _1bnxglyw _jf4cnqa1 _1cvmnqa1 _4davt94y",
   beforeAfterElementOld: "_1e0c1txw _4cvr1h6o _1bah1h6o _1o9zidpf",
   beforeAfterElement: "_1e0c1txw _1ul91tcg _1tke1tcg _4cvr1h6o _1bah1h6o _1o9zidpf",
   content: "_12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1h6o _16jlkb7n _y3gn1e5h",
@@ -60,7 +59,6 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     description = _ref.description,
     iconAfter = _ref.iconAfter,
     iconBefore = _ref.iconBefore,
-    overrides = _ref.overrides,
     UNSAFE_externalClassName = _ref.className,
     _ref$shouldTitleWrap = _ref.shouldTitleWrap,
     shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? false : _ref$shouldTitleWrap,
@@ -70,12 +68,11 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    _ref$isTitleHeading = _ref.isTitleHeading,
+    isTitleHeading = _ref$isTitleHeading === void 0 ? false : _ref$isTitleHeading,
     testId = _ref.testId;
-  propDeprecationWarning("@atlaskit/menu" || '', 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
-  );
   var spacing = useContext(SpacingContext);
   var selectionStyle = useContext(SELECTION_STYLE_CONTEXT_DO_NOT_USE);
-  var renderTitle = overrides && overrides.Title && overrides.Title.render || defaultRender;
   var UNSAFE_className = UNSAFE_externalClassName;
   return function () {
     return children({
@@ -93,7 +90,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
         className: ax([fg('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElement, !fg('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElementOld])
       }, iconBefore), title && /*#__PURE__*/React.createElement("div", {
         className: ax([styles.content])
-      }, renderTitle('span', {
+      }, renderTitle(isTitleHeading ? 'h2' : 'span', {
         children: title,
         className: ax([styles.title, shouldTitleWrap ? styles.wordBreak : styles.truncate]),
         'data-item-title': true

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

@@ -1,7 +1,7 @@
 /* button-item.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "interactionName"];
+var _excluded = ["children", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "interactionName"];
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, memo, useCallback, useContext } from 'react';
@@ -29,7 +29,6 @@ function (props, ref) {
     isSelected = _props$isSelected === void 0 ? false : _props$isSelected,
     onClick = props.onClick,
     testId = props.testId,
-    overrides = props.overrides,
     onMouseDown = props.onMouseDown,
     shouldTitleWrap = props.shouldTitleWrap,
     shouldDescriptionWrap = props.shouldDescriptionWrap,
@@ -50,12 +49,11 @@ function (props, ref) {
   , _extends({
     className: UNSAFE_className
   }, rest, {
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-    overrides: overrides,
     iconBefore: iconBefore,
     iconAfter: iconAfter,
     isDisabled: isDisabled,
     isSelected: isSelected,
+    isTitleHeading: false,
     description: description,
     title: children,
     shouldTitleWrap: shouldTitleWrap,

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

@@ -1,7 +1,7 @@
 /* custom-item.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["component", "isDisabled", "isSelected", "onClick", "testId", "children", "description", "iconAfter", "iconBefore", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "UNSAFE_isDraggable", "interactionName"];
+var _excluded = ["component", "isDisabled", "isSelected", "isTitleHeading", "onClick", "testId", "children", "description", "iconAfter", "iconBefore", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "UNSAFE_isDraggable", "interactionName"];
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, memo, useCallback, useContext } from 'react';
@@ -28,13 +28,14 @@ var CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref)
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    _ref$isTitleHeading = _ref.isTitleHeading,
+    isTitleHeading = _ref$isTitleHeading === void 0 ? false : _ref$isTitleHeading,
     onClick = _ref.onClick,
     testId = _ref.testId,
     children = _ref.children,
     description = _ref.description,
     iconAfter = _ref.iconAfter,
     iconBefore = _ref.iconBefore,
-    overrides = _ref.overrides,
     onMouseDown = _ref.onMouseDown,
     shouldTitleWrap = _ref.shouldTitleWrap,
     shouldDescriptionWrap = _ref.shouldDescriptionWrap,
@@ -56,14 +57,13 @@ var CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref)
   , _extends({
     className: UNSAFE_className
   }, rest, {
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-    overrides: overrides,
     description: description,
     iconAfter: iconAfter,
     title: children,
     iconBefore: iconBefore,
     isSelected: isSelected,
     isDisabled: isDisabled,
+    isTitleHeading: isTitleHeading,
     shouldTitleWrap: shouldTitleWrap,
     shouldDescriptionWrap: shouldDescriptionWrap,
     testId: testId && "".concat(testId, "--primitive")

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

@@ -1,7 +1,7 @@
 /* link-item.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "href", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "UNSAFE_shouldDisableRouterLink", "UNSAFE_isDraggable", "interactionName"];
+var _excluded = ["children", "href", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "UNSAFE_shouldDisableRouterLink", "UNSAFE_isDraggable", "interactionName"];
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, memo, useCallback, useContext } from 'react';
@@ -37,7 +37,6 @@ function (props, ref) {
     isSelected = _props$isSelected === void 0 ? false : _props$isSelected,
     onClick = props.onClick,
     testId = props.testId,
-    overrides = props.overrides,
     onMouseDown = props.onMouseDown,
     shouldTitleWrap = props.shouldTitleWrap,
     shouldDescriptionWrap = props.shouldDescriptionWrap,
@@ -72,14 +71,12 @@ function (props, ref) {
   var Component = isRouterLink ? RouterLink : 'a';
   return /*#__PURE__*/React.createElement(MenuItemPrimitive, _extends({}, rest, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: UNSAFE_className
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-    ,
-    overrides: overrides,
+    className: UNSAFE_className,
     iconBefore: iconBefore,
     iconAfter: iconAfter,
     isSelected: isSelected,
     isDisabled: isDisabled,
+    isTitleHeading: false,
     description: description,
     shouldTitleWrap: shouldTitleWrap,
     shouldDescriptionWrap: shouldDescriptionWrap,

package/dist/types/internal/components/menu-item-primitive.d.ts

@@ -14,5 +14,5 @@ import type { MenuItemPrimitiveProps } from '../../types';
  * </MenuItemPrimitive>
  * ```
  */
-declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className: UNSAFE_externalClassName, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, testId, }: MenuItemPrimitiveProps) => JSX.Element;
+declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, className: UNSAFE_externalClassName, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, isTitleHeading, testId, }: MenuItemPrimitiveProps) => JSX.Element;
 export default MenuItemPrimitive;

package/dist/types/types.d.ts

@@ -133,14 +133,14 @@ export interface MenuItemPrimitiveProps {
     description: React.ReactNode | undefined;
     iconAfter: React.ReactNode | undefined;
     iconBefore: React.ReactNode | undefined;
-    /**
-     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
-     */
-    overrides: Overrides | undefined;
     shouldTitleWrap: boolean | undefined;
     shouldDescriptionWrap: boolean | undefined;
     isDisabled: boolean | undefined;
     isSelected: boolean | undefined;
+    /**
+     * @deprecated This API exists to support functionality in `@atlaskit/side-navigation` and should not be used. Once the new navigation is fully rolled out, this prop will be removed.
+     */
+    isTitleHeading: boolean | undefined;
     className?: string;
     testId?: string;
 }
@@ -190,12 +190,6 @@ export interface MenuItemProps {
      * serving as a hook for automated tests.
      */
     testId?: string;
-    /**
-     * Custom overrides for the composed components.
-     *
-     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
-     */
-    overrides?: Overrides;
     /**
      * When `true`, the title of the item will wrap multiple lines if it's long enough.
      */
@@ -204,6 +198,11 @@ export interface MenuItemProps {
      * When `true`, the description of the item will wrap multiple lines if it's long enough.
      */
     shouldDescriptionWrap?: boolean;
+    /**
+     * When `true`, the title of the item will render as a `h2` rather than a `span`
+     * @deprecated This API exists to support functionality in `@atlaskit/side-navigation` and should not be used. Once the new navigation is fully rolled out, this prop will be removed.
+     */
+    isTitleHeading?: boolean;
     /**
      * 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).
      */

package/dist/types-ts4.5/internal/components/menu-item-primitive.d.ts

@@ -14,5 +14,5 @@ import type { MenuItemPrimitiveProps } from '../../types';
  * </MenuItemPrimitive>
  * ```
  */
-declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className: UNSAFE_externalClassName, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, testId, }: MenuItemPrimitiveProps) => JSX.Element;
+declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, className: UNSAFE_externalClassName, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, isTitleHeading, testId, }: MenuItemPrimitiveProps) => JSX.Element;
 export default MenuItemPrimitive;

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

@@ -133,14 +133,14 @@ export interface MenuItemPrimitiveProps {
     description: React.ReactNode | undefined;
     iconAfter: React.ReactNode | undefined;
     iconBefore: React.ReactNode | undefined;
-    /**
-     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
-     */
-    overrides: Overrides | undefined;
     shouldTitleWrap: boolean | undefined;
     shouldDescriptionWrap: boolean | undefined;
     isDisabled: boolean | undefined;
     isSelected: boolean | undefined;
+    /**
+     * @deprecated This API exists to support functionality in `@atlaskit/side-navigation` and should not be used. Once the new navigation is fully rolled out, this prop will be removed.
+     */
+    isTitleHeading: boolean | undefined;
     className?: string;
     testId?: string;
 }
@@ -190,12 +190,6 @@ export interface MenuItemProps {
      * serving as a hook for automated tests.
      */
     testId?: string;
-    /**
-     * Custom overrides for the composed components.
-     *
-     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
-     */
-    overrides?: Overrides;
     /**
      * When `true`, the title of the item will wrap multiple lines if it's long enough.
      */
@@ -204,6 +198,11 @@ export interface MenuItemProps {
      * When `true`, the description of the item will wrap multiple lines if it's long enough.
      */
     shouldDescriptionWrap?: boolean;
+    /**
+     * When `true`, the title of the item will render as a `h2` rather than a `span`
+     * @deprecated This API exists to support functionality in `@atlaskit/side-navigation` and should not be used. Once the new navigation is fully rolled out, this prop will be removed.
+     */
+    isTitleHeading?: boolean;
     /**
      * 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).
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "4.0.0",
+	"version": "5.0.1",
 	"description": "A list of options to help users navigate, or perform actions.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -46,7 +46,7 @@
 		"@atlaskit/focus-ring": "^3.0.0",
 		"@atlaskit/interaction-context": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.4.0",
+		"@atlaskit/primitives": "^14.7.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tokens": "^4.8.0",
 		"@babel/runtime": "^7.0.0",