@atlaskit/menu 3.2.0 → 5.0.0

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

@@ -1,26 +1,24 @@
+/* link-item.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _appProvider = require("@atlaskit/app-provider");
-var _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
-var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 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", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "UNSAFE_shouldDisableRouterLink", "UNSAFE_isDraggable", "interactionName"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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):\/\/)/;
 var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
 var preventEvent = function preventEvent(e) {
@@ -40,8 +38,6 @@ var LinkItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
 function (props, ref) {
   var children = props.children,
     href = props.href,
-    _props$cssFn = props.cssFn,
-    cssFn = _props$cssFn === void 0 ? _noop.default : _props$cssFn,
     description = props.description,
     iconAfter = props.iconAfter,
     iconBefore = props.iconBefore,
@@ -51,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,
@@ -84,33 +79,23 @@ function (props, ref) {
    */
   var isRouterLink = !UNSAFE_shouldDisableRouterLink && RouterLink && !isExternal && !isNonHttpBased && !isEmptyHref;
   var Component = isRouterLink ? RouterLink : 'a';
-  (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu" || '', 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
-  );
-  return (0, _react2.jsx)(_menuItemPrimitive.default, (0, _extends2.default)({}, rest, {
+  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,
-    css:
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    cssFn({
-      isSelected: isSelected,
-      isDisabled: isDisabled
-    }),
     title: children,
     testId: testId && "".concat(testId, "--primitive")
   }), function (_ref) {
     var children = _ref.children,
       className = _ref.className;
-    return (0, _react2.jsx)(Component, (0, _extends2.default)({
+    return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({
       "data-testid": testId,
       "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined,
       "data-vc": "link-item"

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

@@ -69,12 +69,9 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
     var className = _ref2.className;
     return (0, _react.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/cjs/menu-item/skeleton-item.js

@@ -136,12 +136,9 @@ var SkeletonItem = function SkeletonItem(_ref) {
     var className = _ref2.className;
     return (0, _react.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/cjs/menu-section/section.js

@@ -13,7 +13,6 @@ var _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
 var _colors = require("@atlaskit/theme/colors");
 var _headingItem = _interopRequireDefault(require("../menu-item/heading-item"));
 var _excluded = ["children", "overrides", "title", "titleId", "testId", "isScrollable", "hasSeparator", "id", "isList", "className"];
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview */
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -146,9 +145,7 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     // 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/es2019/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/es2019/internal/components/menu-item-primitive.js

@@ -1,159 +1,36 @@
-/**
- * @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';
-const defaultRender = (Component, props) =>
+const renderTitle = (Component, props) =>
+/*#__PURE__*/
 // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-jsx(Component, props);
-const beforeAfterElementStylesOld = css({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexShrink: 0
-});
-const beforeAfterElementStyles = css({
-  display: 'flex',
-  minWidth: 24,
-  minHeight: 24,
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexShrink: 0
-});
-const contentStyles = xcss({
-  outline: 'none',
-  overflow: 'hidden',
-  textAlign: 'left'
-});
-const truncateStyles = css({
-  display: 'block',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-const titleStyles = css({
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
-});
-const wordBreakStyles = css({
-  wordBreak: 'break-word'
-});
-const descriptionStyles = css({
-  color: `var(--ds-text-subtlest, ${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)"
-});
-const disabledDescriptionStyles = css({
-  color: `var(--ds-text-disabled, ${N200})`
-});
-const positionRelativeStyles = css({
-  position: 'relative'
-});
-const 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'
-  }
-});
+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",
+  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"
+};
 const 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"
 };
-const interactiveStyles = css({
-  cursor: 'pointer'
-});
-const unselectedStyles = css({
-  backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-  color: 'currentColor',
-  '&:visited': {
-    color: 'currentColor'
-  },
-  '&:hover': {
-    backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N20})`,
-    color: 'currentColor'
-  },
-  '&:active': {
-    backgroundColor: `var(--ds-background-neutral-subtle-pressed, ${N30})`,
-    boxShadow: 'none',
-    color: 'currentColor'
-  }
-});
-const 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, ${N200})`
-  }
-});
-const selectedBorderStyles = css({
-  '&::before': {
-    width: 2,
-    position: 'absolute',
-    background: "var(--ds-border-selected, transparent)",
-    content: '""',
-    insetBlockEnd: 0,
-    insetBlockStart: 0,
-    insetInlineStart: 0
-  }
-});
-const selectedNotchStyles = css({
-  '&::before': {
-    width: 4,
-    position: 'absolute',
-    background: "var(--ds-border-selected, transparent)",
-    borderRadius: `0 ${"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
-  }
-});
-const selectedStyles = css({
-  backgroundColor: `var(--ds-background-selected, ${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, ${N20})`,
-    color: "var(--ds-text-selected, currentColor)"
-  },
-  '&:active': {
-    backgroundColor: `var(--ds-background-selected-pressed, ${N30})`,
-    color: "var(--ds-text-selected, currentColor)"
-  }
-});
 const gapMap = {
   compact: 'space.100',
   cozy: 'space.150'
@@ -179,56 +56,46 @@ 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 jsx(ClassNames, null, ({
-    css: cn,
-    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 (() => {
+    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 && `${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 && `${testId}--icon-before`
-      }, iconBefore), title && jsx(Stack, {
-        alignBlock: "center",
-        grow: "fill",
-        xcss: contentStyles
-      }, renderTitle('span', {
+        "data-testid": testId && `${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 && `${testId}--icon-after`
+        "data-testid": testId && `${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/es2019/menu-item/button-item.js

@@ -1,14 +1,8 @@
+/* button-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 { 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';
@@ -25,7 +19,6 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
 (props, ref) => {
   const {
     children,
-    cssFn = noop,
     description,
     iconAfter,
     iconBefore,
@@ -33,7 +26,6 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
     isSelected = false,
     onClick,
     testId,
-    overrides,
     onMouseDown,
     shouldTitleWrap,
     shouldDescriptionWrap,
@@ -50,34 +42,25 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
   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,
-      isDisabled
-    }),
     testId: testId && `${testId}--primitive`
   }), ({
     children,
     className
-  }) => jsx("button", _extends({
+  }) => /*#__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/es2019/menu-item/custom-item.js

@@ -1,15 +1,8 @@
+/* custom-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 { 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';
@@ -29,16 +22,15 @@ const preventEvent = e => {
  */
 const CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   component: Component,
-  cssFn = noop,
   isDisabled = false,
   isSelected = false,
+  isTitleHeading = false,
   onClick,
   testId,
   children,
   description,
   iconAfter,
   iconBefore,
-  overrides,
   onMouseDown,
   shouldTitleWrap,
   shouldDescriptionWrap,
@@ -56,36 +48,25 @@ const CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   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,
-      isSelected
-    })),
+    shouldDescriptionWrap: shouldDescriptionWrap,
     testId: testId && `${testId}--primitive`
   }), ({
     children,
     className
-  }) => jsx(Component, _extends({
+  }) => /*#__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