@atlaskit/menu 3.2.0 → 5.0.0

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

@@ -1,15 +1,9 @@
+/* link-item.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, memo, useCallback, useContext } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 import { useRouterLink } from '@atlaskit/app-provider';
-import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
-import noop from '@atlaskit/ds-lib/noop';
 import InteractionContext from '@atlaskit/interaction-context';
 import { fg } from '@atlaskit/platform-feature-flags';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
@@ -33,7 +27,6 @@ const LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
   const {
     children,
     href,
-    cssFn = noop,
     description,
     iconAfter,
     iconBefore,
@@ -41,7 +34,6 @@ const LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
     isSelected = false,
     onClick,
     testId,
-    overrides,
     onMouseDown,
     shouldTitleWrap,
     shouldDescriptionWrap,
@@ -75,33 +67,23 @@ const LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
    */
   const isRouterLink = !UNSAFE_shouldDisableRouterLink && RouterLink && !isExternal && !isNonHttpBased && !isEmptyHref;
   const Component = isRouterLink ? RouterLink : 'a';
-  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
-  );
-  return jsx(MenuItemPrimitive, _extends({}, rest, {
+  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,
-    css:
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    cssFn({
-      isSelected,
-      isDisabled
-    }),
     title: children,
     testId: testId && `${testId}--primitive`
   }), ({
     children,
     className
-  }) => jsx(Component, _extends({
+  }) => /*#__PURE__*/React.createElement(Component, _extends({
     "data-testid": testId,
     "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined,
     "data-vc": "link-item"

package/dist/es2019/menu-item/skeleton-heading-item.js

@@ -60,12 +60,9 @@ const SkeletonHeadingItem = ({
     className
   }) => jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: className
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
+    className: className,
     style: {
       '--width': width
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     },
     css: [skeletonStyles, width ? customWidthStyles : defaultWidthStyles,
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage

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

@@ -129,12 +129,9 @@ const SkeletonItem = ({
     className
   }) => jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: className
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
+    className: className,
     style: {
       '--width': width
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     },
     css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles,
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage

package/dist/es2019/menu-section/section.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview */
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -140,9 +139,7 @@ const Section = /*#__PURE__*/forwardRef(({
     // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
     // We have made a deliberate choice to leave this behaviour as is.
     ,
-    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ?
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    thinSeparatorStyles : noSeparatorStyles],
+    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? thinSeparatorStyles : noSeparatorStyles],
     "aria-label": title,
     "aria-labelledby": titleId,
     "data-testid": testId,

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

@@ -0,0 +1,81 @@
+
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._19itidpf{border:0}
+._rfx315o9:before{border-radius:0 var(--ds-border-radius,4px) var(--ds-border-radius,4px) 0}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
+._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._12y3idpf{outline-width:0}
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._18u0ze3t{margin-left:var(--ds-space-0,0)}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1bto1l2s{text-overflow:ellipsis}
+._1cs8stnw:before{position:absolute}
+._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
+._1fkrutpp:before{inset-block-end:var(--ds-space-150,9pt)}
+._1fkrze3t:before{inset-block-end:var(--ds-space-0,0)}
+._1hmsglyw{text-decoration-line:none}
+._1kt9b3bt:before{content:""}
+._1mp41y44:before{width:4px}
+._1mp4yh40:before{width:2px}
+._1nmz1hna{word-break:break-word}
+._1o9zidpf{flex-shrink:0}
+._1qu2glyw{outline-style:none}
+._1reo15vq{overflow-x:hidden}
+._1rus67is:before{background-color:var(--ds-border-selected,transparent)}
+._1tke1tcg{min-height:24px}
+._1tke1ylp{min-height:40px}
+._1tkezwfg{min-height:2pc}
+._1ul91tcg{min-width:24px}
+._2hwxze3t{margin-right:var(--ds-space-0,0)}
+._2lx21bp4{flex-direction:column}
+._4bfu1r31{text-decoration-color:currentColor}
+._4cvr1h6o{align-items:center}
+._80om13gf{cursor:not-allowed}
+._80omtlke{cursor:pointer}
+._ajmmnqa1{text-decoration-style:solid}
+._bfhk1q4k{background-color:var(--ds-background-selected,#f4f5f7)}
+._bfhkqtfy{background-color:var(--ds-background-neutral-subtle,transparent)}
+._iajmutpp:before{inset-block-start:var(--ds-space-150,9pt)}
+._iajmze3t:before{inset-block-start:var(--ds-space-0,0)}
+._kqswh2mm{position:relative}
+._o5721q9c{white-space:nowrap}
+._otyrze3t{margin-bottom:var(--ds-space-0,0)}
+._syaz1r31{color:currentColor}
+._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
+._syaz2oi6{color:var(--ds-text-disabled,#6b778c)}
+._syazhu5v{color:var(--ds-text-selected,currentColor)}
+._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}
+._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}
+._1bnxglyw:hover{text-decoration-line:none}
+._30l316ov:hover{color:var(--ds-text-accent-blue,currentColor)}
+._30l31r31:hover{color:currentColor}
+._30l32oi6:hover{color:var(--ds-text-disabled,#6b778c)}
+._30l3hu5v:hover{color:var(--ds-text-selected,currentColor)}
+._9oik1r31:hover{text-decoration-color:currentColor}
+._irr31dko:hover{background-color:var(--ds-background-neutral-subtle-hovered,#f4f5f7)}
+._irr32seo:hover{background-color:var(--ds-background-selected-hovered,#f4f5f7)}
+._irr3qtfy:hover{background-color:var(--ds-background-neutral-subtle,transparent)}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._1di61dko:active{background-color:var(--ds-background-neutral-subtle-hovered,#f4f5f7)}
+._1di6guph:active{background-color:var(--ds-background-selected-pressed,#ebecf0)}
+._1di6qtfy:active{background-color:var(--ds-background-neutral-subtle,transparent)}
+._9h8h1r31:active{color:currentColor}
+._9h8h2oi6:active{color:var(--ds-text-disabled,#6b778c)}
+._9h8hhu5v:active{color:var(--ds-text-selected,currentColor)}
+@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}

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

@@ -1,162 +1,39 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* menu-item-primitive.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./menu-item-primitive.compiled.css";
+import * as React from 'react';
 import { useContext } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { ClassNames, css, jsx } from '@emotion/react';
-import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
-import FocusRing from '@atlaskit/focus-ring';
+import { ax, ix } from '@compiled/react/runtime';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Inline, Stack, xcss } from '@atlaskit/primitives';
-import { N20, N200, N30 } from '@atlaskit/theme/colors';
+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
-    jsx(Component, props)
+    React.createElement(Component, props)
   );
 };
-var beforeAfterElementStylesOld = css({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexShrink: 0
-});
-var beforeAfterElementStyles = css({
-  display: 'flex',
-  minWidth: 24,
-  minHeight: 24,
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexShrink: 0
-});
-var contentStyles = xcss({
-  outline: 'none',
-  overflow: 'hidden',
-  textAlign: 'left'
-});
-var truncateStyles = css({
-  display: 'block',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-var titleStyles = css({
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
-});
-var wordBreakStyles = css({
-  wordBreak: 'break-word'
-});
-var descriptionStyles = css({
-  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
-});
-var disabledDescriptionStyles = css({
-  color: "var(--ds-text-disabled, ".concat(N200, ")")
-});
-var positionRelativeStyles = css({
-  position: 'relative'
-});
-var primitiveStyles = css({
-  display: 'flex',
-  boxSizing: 'border-box',
-  width: '100%',
-  minHeight: 40,
-  margin: "var(--ds-space-0, 0px)",
-  alignItems: 'center',
-  border: 0,
-  outline: 0,
-  textDecoration: 'none',
-  userSelect: 'none',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '&::-moz-focus-inner': {
-    border: 0
-  },
-  '&:hover': {
-    textDecoration: 'none'
-  }
-});
+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",
+  beforeAfterElementOld: "_1e0c1txw _4cvr1h6o _1bah1h6o _1o9zidpf",
+  beforeAfterElement: "_1e0c1txw _1ul91tcg _1tke1tcg _4cvr1h6o _1bah1h6o _1o9zidpf",
+  content: "_12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1h6o _16jlkb7n _y3gn1e5h",
+  truncate: "_1reo15vq _18m915vq _1e0c1ule _1bto1l2s _o5721q9c",
+  title: "_11c82smr",
+  wordBreak: "_1nmz1hna",
+  description: "_11c8dcr7 _syaz1wmz",
+  disabledDescription: "_syaz2oi6",
+  unselected: "_bfhkqtfy _syaz1r31 _10531r31 _irr31dko _30l31r31 _1di61dko _9h8h1r31",
+  disabled: "_80om13gf _bfhkqtfy _syaz2oi6 _irr3qtfy _30l32oi6 _1di6qtfy _9h8h2oi6",
+  selectedBorder: "_1mp4yh40 _1cs8stnw _1rus67is _1kt9b3bt _1fkrze3t _iajmze3t _z5wtze3t",
+  selectedNotch: "_rfx315o9 _1mp41y44 _1cs8stnw _1rus67is _1kt9b3bt _1fkrutpp _iajmutpp _z5wtze3t",
+  selected: "_bfhk1q4k _syazhu5v _1053hu5v _irr32seo _30l316ov _1di6guph _9h8hhu5v",
+  selectedOld: "_30l3hu5v"
+};
 var spacingMapStyles = {
-  cozy: css({
-    // 8 * 2 (16) + icon (24) === 40
-    paddingBlock: "var(--ds-space-100, 8px)",
-    paddingInline: "var(--ds-space-200, 16px)"
-  }),
-  compact: css({
-    minHeight: 32,
-    // 4 * 2 (8) + icon (24) === 32
-    paddingBlock: "var(--ds-space-050, 4px)",
-    paddingInline: "var(--ds-space-150, 12px)"
-  })
+  cozy: "_1rjcu2gc _18zrpxbi",
+  compact: "_1rjc1b66 _18zrutpp _1tkezwfg"
 };
-var interactiveStyles = css({
-  cursor: 'pointer'
-});
-var unselectedStyles = css({
-  backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-  color: 'currentColor',
-  '&:visited': {
-    color: 'currentColor'
-  },
-  '&:hover': {
-    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"),
-    color: 'currentColor'
-  },
-  '&:active': {
-    backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(N30, ")"),
-    boxShadow: 'none',
-    color: 'currentColor'
-  }
-});
-var disabledStyles = css({
-  cursor: 'not-allowed',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '&, :hover, :active': {
-    backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-    color: "var(--ds-text-disabled, ".concat(N200, ")")
-  }
-});
-var selectedBorderStyles = css({
-  '&::before': {
-    width: 2,
-    position: 'absolute',
-    background: "var(--ds-border-selected, transparent)",
-    content: '""',
-    insetBlockEnd: 0,
-    insetBlockStart: 0,
-    insetInlineStart: 0
-  }
-});
-var selectedNotchStyles = css({
-  '&::before': {
-    width: 4,
-    position: 'absolute',
-    background: "var(--ds-border-selected, transparent)",
-    borderRadius: "0 ".concat("var(--ds-border-radius, 4px)", " ", "var(--ds-border-radius, 4px)", " 0"),
-    content: '""',
-    insetBlockEnd: "var(--ds-space-150, 12px)",
-    insetBlockStart: "var(--ds-space-150, 12px)",
-    insetInlineStart: 0
-  }
-});
-var selectedStyles = css({
-  backgroundColor: "var(--ds-background-selected, ".concat(N20, ")"),
-  // Fallback set as babel plugin inserts one otherwise
-  color: "var(--ds-text-selected, currentColor)",
-  '&:visited': {
-    color: "var(--ds-text-selected, currentColor)"
-  },
-  '&:hover': {
-    backgroundColor: "var(--ds-background-selected-hovered, ".concat(N20, ")"),
-    color: "var(--ds-text-selected, currentColor)"
-  },
-  '&:active': {
-    backgroundColor: "var(--ds-background-selected-pressed, ".concat(N30, ")"),
-    color: "var(--ds-text-selected, currentColor)"
-  }
-});
 var gapMap = {
   compact: 'space.100',
   cozy: 'space.150'
@@ -182,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,
@@ -192,48 +68,41 @@ 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 jsx(ClassNames, null, function (_ref2) {
-    var cn = _ref2.css,
-      cx = _ref2.cx;
-    return jsx(FocusRing, {
-      isInset: true
-    }, children({
-      className: cx([cn([positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
-      children: jsx(Inline, {
+  return function () {
+    return children({
+      className: ax([ax([styles.root, spacingMapStyles[spacing], !isDisabled && !isSelected && styles.unselected, !isDisabled && isSelected && styles.selected, !fg('platform_fix_a11y_selected_and_hovered_state_color') && !isDisabled && isSelected && styles.selectedOld, !isDisabled && isSelected && selectionStyle === 'border' && styles.selectedBorder, !isDisabled && isSelected && selectionStyle === 'notch' && styles.selectedNotch, isDisabled && styles.disabled]), UNSAFE_className]),
+      children: /*#__PURE__*/React.createElement(Inline, {
         as: "span",
         spread: "space-between",
         alignBlock: "center",
         space: gapMap[spacing],
         grow: "fill",
         testId: testId && "".concat(testId, "--container")
-      }, iconBefore && jsx("span", {
+      }, iconBefore && /*#__PURE__*/React.createElement("span", {
         "data-item-elem-before": true,
-        css: fg('platform_ads_component_no_icon_spacing_support') ? beforeAfterElementStyles : beforeAfterElementStylesOld,
-        "data-testid": testId && "".concat(testId, "--icon-before")
-      }, iconBefore), title && jsx(Stack, {
-        alignBlock: "center",
-        grow: "fill",
-        xcss: contentStyles
-      }, renderTitle('span', {
+        "data-testid": testId && "".concat(testId, "--icon-before"),
+        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(isTitleHeading ? 'h2' : 'span', {
         children: title,
-        className: cn(titleStyles, shouldTitleWrap ? wordBreakStyles : truncateStyles),
+        className: ax([styles.title, shouldTitleWrap ? styles.wordBreak : styles.truncate]),
         'data-item-title': true
-      }), description && jsx("span", {
+      }), description && /*#__PURE__*/React.createElement("span", {
         "data-item-description": true,
-        css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
-      }, description)), iconAfter && jsx("span", {
+        className: ax([styles.description, isDisabled && styles.disabledDescription, shouldDescriptionWrap && styles.wordBreak, !shouldDescriptionWrap && styles.truncate])
+      }, description)), iconAfter && /*#__PURE__*/React.createElement("span", {
         "data-item-elem-after": true,
-        css: fg('platform_ads_component_no_icon_spacing_support') ? beforeAfterElementStyles : beforeAfterElementStylesOld,
-        "data-testid": testId && "".concat(testId, "--icon-after")
+        "data-testid": testId && "".concat(testId, "--icon-after"),
+        className: ax([fg('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElement, !fg('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElementOld])
       }, iconAfter))
-    }));
-  });
+    });
+  }();
 };
 export default MenuItemPrimitive;

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

@@ -1,16 +1,10 @@
+/* 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", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "interactionName"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+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';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
-import noop from '@atlaskit/ds-lib/noop';
 import InteractionContext from '@atlaskit/interaction-context';
 import { fg } from '@atlaskit/platform-feature-flags';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
@@ -26,8 +20,6 @@ var ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
 // Type needed on props to extract types with extract react types.
 function (props, ref) {
   var children = props.children,
-    _props$cssFn = props.cssFn,
-    cssFn = _props$cssFn === void 0 ? noop : _props$cssFn,
     description = props.description,
     iconAfter = props.iconAfter,
     iconBefore = props.iconBefore,
@@ -37,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,
@@ -53,34 +44,25 @@ function (props, ref) {
   if (!children) {
     return null;
   }
-  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
-  );
-  return jsx(MenuItemPrimitive
+  return /*#__PURE__*/React.createElement(MenuItemPrimitive
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , _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,
     shouldDescriptionWrap: shouldDescriptionWrap,
-    css:
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    cssFn({
-      isSelected: isSelected,
-      isDisabled: isDisabled
-    }),
     testId: testId && "".concat(testId, "--primitive")
   }), function (_ref) {
     var children = _ref.children,
       className = _ref.className;
-    return jsx("button", _extends({
+    return /*#__PURE__*/React.createElement("button", _extends({
       "data-testid": testId
     }, rest, {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

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

@@ -1,17 +1,10 @@
+/* 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", "cssFn", "isDisabled", "isSelected", "onClick", "testId", "children", "description", "iconAfter", "iconBefore", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "UNSAFE_isDraggable", "interactionName"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
+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';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
-import noop from '@atlaskit/ds-lib/noop';
 import InteractionContext from '@atlaskit/interaction-context';
 import { fg } from '@atlaskit/platform-feature-flags';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
@@ -31,19 +24,18 @@ var preventEvent = function preventEvent(e) {
  */
 var CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
   var Component = _ref.component,
-    _ref$cssFn = _ref.cssFn,
-    cssFn = _ref$cssFn === void 0 ? noop : _ref$cssFn,
     _ref$isDisabled = _ref.isDisabled,
     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,
@@ -60,36 +52,25 @@ var CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref)
   if (!Component) {
     return null;
   }
-  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
-  );
-  return jsx(MenuItemPrimitive
+  return /*#__PURE__*/React.createElement(MenuItemPrimitive
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , _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
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: css(
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    cssFn({
-      isDisabled: isDisabled,
-      isSelected: isSelected
-    })),
+    shouldDescriptionWrap: shouldDescriptionWrap,
     testId: testId && "".concat(testId, "--primitive")
   }), function (_ref2) {
     var children = _ref2.children,
       className = _ref2.className;
-    return jsx(Component, _extends({
+    return /*#__PURE__*/React.createElement(Component, _extends({
       "data-testid": testId
     }, rest, {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766