@atlaskit/menu 3.2.0 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @atlaskit/menu
 
+## 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
+
+- [#141631](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/141631)
+  [`064a20b174719`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/064a20b174719) - -
+  Migrated `ButtonItem`, `LinkItem` and `CustomItem` components from `@emotion/react` to
+  `@compiled/react` in order to improve performance, align with the rest of the Atlaskit techstack,
+  and support React 18 Streaming SSR.
+
+  - Removed the deprecated `cssFn` prop from `ButtonItem`, `LinkItem` and `CustomItem` components.
+
+  Please note, in order to use this version of `@atlaskit/menu`, you will need to ensure that your
+  bundler is configured to handle `.css` imports correctly.
+
+  Most bundlers come with built-in support for `.css` imports, so you may not need to do anything.
+  If you are using a different bundler, please refer to the documentation for that bundler to
+  understand how to handle `.css` imports. For more information on the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
 ## 3.2.0
 
 ### Minor Changes

package/dist/cjs/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/cjs/internal/components/menu-item-primitive.js

@@ -1,170 +1,48 @@
+/* menu-item-primitive.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 = require("react");
-var _react2 = require("@emotion/react");
-var _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
-var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
+require("./menu-item-primitive.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _primitives = require("@atlaskit/primitives");
-var _colors = require("@atlaskit/theme/colors");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _menuContext = require("./menu-context");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var defaultRender = function defaultRender(Component, props) {
+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 renderTitle = function renderTitle(Component, props) {
   return (
+    /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _react2.jsx)(Component, props)
+    React.createElement(Component, props)
   );
 };
-var beforeAfterElementStylesOld = (0, _react2.css)({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexShrink: 0
-});
-var beforeAfterElementStyles = (0, _react2.css)({
-  display: 'flex',
-  minWidth: 24,
-  minHeight: 24,
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexShrink: 0
-});
-var contentStyles = (0, _primitives.xcss)({
-  outline: 'none',
-  overflow: 'hidden',
-  textAlign: 'left'
-});
-var truncateStyles = (0, _react2.css)({
-  display: 'block',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-var titleStyles = (0, _react2.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 = (0, _react2.css)({
-  wordBreak: 'break-word'
-});
-var descriptionStyles = (0, _react2.css)({
-  color: "var(--ds-text-subtlest, ".concat(_colors.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 = (0, _react2.css)({
-  color: "var(--ds-text-disabled, ".concat(_colors.N200, ")")
-});
-var positionRelativeStyles = (0, _react2.css)({
-  position: 'relative'
-});
-var primitiveStyles = (0, _react2.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: (0, _react2.css)({
-    // 8 * 2 (16) + icon (24) === 40
-    paddingBlock: "var(--ds-space-100, 8px)",
-    paddingInline: "var(--ds-space-200, 16px)"
-  }),
-  compact: (0, _react2.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 = (0, _react2.css)({
-  cursor: 'pointer'
-});
-var unselectedStyles = (0, _react2.css)({
-  backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-  color: 'currentColor',
-  '&:visited': {
-    color: 'currentColor'
-  },
-  '&:hover': {
-    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"),
-    color: 'currentColor'
-  },
-  '&:active': {
-    backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.N30, ")"),
-    boxShadow: 'none',
-    color: 'currentColor'
-  }
-});
-var disabledStyles = (0, _react2.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(_colors.N200, ")")
-  }
-});
-var selectedBorderStyles = (0, _react2.css)({
-  '&::before': {
-    width: 2,
-    position: 'absolute',
-    background: "var(--ds-border-selected, transparent)",
-    content: '""',
-    insetBlockEnd: 0,
-    insetBlockStart: 0,
-    insetInlineStart: 0
-  }
-});
-var selectedNotchStyles = (0, _react2.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 = (0, _react2.css)({
-  backgroundColor: "var(--ds-background-selected, ".concat(_colors.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(_colors.N20, ")"),
-    color: "var(--ds-text-selected, currentColor)"
-  },
-  '&:active': {
-    backgroundColor: "var(--ds-background-selected-pressed, ".concat(_colors.N30, ")"),
-    color: "var(--ds-text-selected, currentColor)"
-  }
-});
 var gapMap = {
   compact: 'space.100',
   cozy: 'space.150'
@@ -190,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,
@@ -200,48 +77,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;
-  (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 (0, _react2.jsx)(_react2.ClassNames, null, function (_ref2) {
-    var cn = _ref2.css,
-      cx = _ref2.cx;
-    return (0, _react2.jsx)(_focusRing.default, {
-      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: (0, _react2.jsx)(_primitives.Inline, {
+  return function () {
+    return children({
+      className: (0, _runtime.ax)([(0, _runtime.ax)([styles.root, spacingMapStyles[spacing], !isDisabled && !isSelected && styles.unselected, !isDisabled && isSelected && styles.selected, !(0, _platformFeatureFlags.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(_compiled.Inline, {
         as: "span",
         spread: "space-between",
         alignBlock: "center",
         space: gapMap[spacing],
         grow: "fill",
         testId: testId && "".concat(testId, "--container")
-      }, iconBefore && (0, _react2.jsx)("span", {
+      }, iconBefore && /*#__PURE__*/React.createElement("span", {
         "data-item-elem-before": true,
-        css: (0, _platformFeatureFlags.fg)('platform_ads_component_no_icon_spacing_support') ? beforeAfterElementStyles : beforeAfterElementStylesOld,
-        "data-testid": testId && "".concat(testId, "--icon-before")
-      }, iconBefore), title && (0, _react2.jsx)(_primitives.Stack, {
-        alignBlock: "center",
-        grow: "fill",
-        xcss: contentStyles
-      }, renderTitle('span', {
+        "data-testid": testId && "".concat(testId, "--icon-before"),
+        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(isTitleHeading ? 'h2' : 'span', {
         children: title,
-        className: cn(titleStyles, shouldTitleWrap ? wordBreakStyles : truncateStyles),
+        className: (0, _runtime.ax)([styles.title, shouldTitleWrap ? styles.wordBreak : styles.truncate]),
         'data-item-title': true
-      }), description && (0, _react2.jsx)("span", {
+      }), description && /*#__PURE__*/React.createElement("span", {
         "data-item-description": true,
-        css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
-      }, description)), iconAfter && (0, _react2.jsx)("span", {
+        className: (0, _runtime.ax)([styles.description, isDisabled && styles.disabledDescription, shouldDescriptionWrap && styles.wordBreak, !shouldDescriptionWrap && styles.truncate])
+      }, description)), iconAfter && /*#__PURE__*/React.createElement("span", {
         "data-item-elem-after": true,
-        css: (0, _platformFeatureFlags.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: (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])
       }, iconAfter))
-    }));
-  });
+    });
+  }();
 };
 var _default = exports.default = MenuItemPrimitive;

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

@@ -1,25 +1,23 @@
+/* button-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 _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", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "interactionName"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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; }
 /**
  * __Button item__
  *
@@ -32,8 +30,6 @@ var ButtonItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardR
 // 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.default : _props$cssFn,
     description = props.description,
     iconAfter = props.iconAfter,
     iconBefore = props.iconBefore,
@@ -43,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,
@@ -59,34 +54,25 @@ function (props, ref) {
   if (!children) {
     return null;
   }
-  (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
+  return /*#__PURE__*/React.createElement(_menuItemPrimitive.default
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , (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,
     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 (0, _react2.jsx)("button", (0, _extends2.default)({
+    return /*#__PURE__*/React.createElement("button", (0, _extends2.default)({
       "data-testid": testId
     }, rest, {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

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

@@ -1,25 +1,23 @@
+/* custom-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 _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 = ["component", "cssFn", "isDisabled", "isSelected", "onClick", "testId", "children", "description", "iconAfter", "iconBefore", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "UNSAFE_isDraggable", "interactionName"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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) {
   e.preventDefault();
 };
@@ -36,19 +34,18 @@ var preventEvent = function preventEvent(e) {
  */
 var CustomItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var Component = _ref.component,
-    _ref$cssFn = _ref.cssFn,
-    cssFn = _ref$cssFn === void 0 ? _noop.default : _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,
@@ -65,36 +62,25 @@ var CustomItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardR
   if (!Component) {
     return null;
   }
-  (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
+  return /*#__PURE__*/React.createElement(_menuItemPrimitive.default
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , (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
-    // 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: (0, _react2.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 (0, _react2.jsx)(Component, (0, _extends2.default)({
+    return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({
       "data-testid": testId
     }, rest, {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766