@atlaskit/menu 1.1.3 → 1.2.2

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

@@ -1,18 +1,44 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _react = require("react");
-
 var _core = require("@emotion/core");
 
-var _skeletonHeadingItem = require("../internal/styles/menu-item/skeleton-heading-item");
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 
-/** @jsx jsx */
+var _colors = require("@atlaskit/theme/colors");
 
+var _constants = require("@atlaskit/theme/constants");
+
+var _tokens = require("@atlaskit/tokens");
+
+/** @jsx jsx */
+var skeletonStyles = (0, _core.css)({
+  padding: "0 ".concat((0, _constants.gridSize)() * 2.5, "px"),
+  '::after': {
+    display: 'block',
+    width: '30%',
+    height: (0, _constants.gridSize)(),
+    backgroundColor: (0, _tokens.token)('color.background.subtleNeutral.resting', (0, _colors.skeleton)()),
+    borderRadius: 100,
+    content: '""'
+  }
+});
+var defaultWidthStyles = (0, _core.css)({
+  '::after': {
+    width: '30%'
+  }
+});
+var customWidthStyles = (0, _core.css)({
+  '::after': {
+    width: 'var(--width)'
+  }
+});
 /**
  * __Skeleton heading item__
  *
@@ -21,20 +47,22 @@ var _skeletonHeadingItem = require("../internal/styles/menu-item/skeleton-headin
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-heading-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-var SkeletonHeadingItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var width = _ref.width,
-      testId = _ref.testId,
-      isShimmering = _ref.isShimmering,
+
+var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
+  var testId = _ref.testId,
+      width = _ref.width,
       _ref$cssFn = _ref.cssFn,
-      cssFn = _ref$cssFn === void 0 ? function () {
-    return {};
-  } : _ref$cssFn;
+      cssFn = _ref$cssFn === void 0 ? _noop.default : _ref$cssFn;
   return (0, _core.jsx)("div", {
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    css: [(0, _skeletonHeadingItem.skeletonHeadingItemCSS)(width, isShimmering), cssFn(undefined)],
+    style: {
+      '--width': width
+    },
+    css: [skeletonStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    cssFn(undefined)],
     "data-ds--menu--skeleton-heading-item": true,
     "data-testid": testId
   });
-});
+};
+
 var _default = SkeletonHeadingItem;
 exports.default = _default;

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

@@ -1,18 +1,97 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _react = require("react");
-
 var _core = require("@emotion/core");
 
-var _skeletonItem = require("../internal/styles/menu-item/skeleton-item");
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 
-/** @jsx jsx */
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _tokens = require("@atlaskit/tokens");
 
+/** @jsx jsx */
+var gridSize = (0, _constants.gridSize)();
+var borderRadius = (0, _constants.borderRadius)();
+var itemElemSpacing = gridSize * 1.5;
+var itemExpectedElemSize = gridSize * 3;
+var itemMinHeight = gridSize * 5;
+var itemPadding = gridSize * 2.5;
+var skeletonItemElemSize = gridSize * 2.5;
+var itemElemSkeletonOffset = (itemExpectedElemSize - skeletonItemElemSize) / 2;
+var skeletonTextBorderRadius = 100;
+var skeletonContentHeight = 9;
+var skeletonColor = (0, _tokens.token)('color.background.subtleNeutral.resting', (0, _colors.skeleton)());
+var skeletonStyles = (0, _core.css)({
+  display: 'flex',
+  minHeight: itemMinHeight,
+  padding: "0 ".concat(itemPadding, "px"),
+  alignItems: 'center',
+  pointerEvents: 'none',
+  '::after': {
+    height: skeletonContentHeight,
+    // This is a little bespoke but we need to push everything down 1px
+    // because the skeleton content should align to the bottom of the text.
+    // Confirm VR test failures before accepting a change.
+    marginTop: 1,
+    backgroundColor: skeletonColor,
+    borderRadius: skeletonTextBorderRadius,
+    content: '""'
+  }
+});
+var defaultWidthStyles = (0, _core.css)({
+  ':nth-of-type(1n)::after': {
+    flexBasis: '70%'
+  },
+  ':nth-of-type(2n)::after': {
+    flexBasis: '50%'
+  },
+  ':nth-of-type(3n)::after': {
+    flexBasis: '60%'
+  },
+  ':nth-of-type(4n)::after': {
+    flexBasis: '90%'
+  },
+  ':nth-of-type(5n)::after': {
+    flexBasis: '35%'
+  },
+  ':nth-of-type(6n)::after': {
+    flexBasis: '77%'
+  }
+});
+var customWidthStyles = (0, _core.css)({
+  '::after': {
+    flexBasis: 'var(--width)'
+  }
+});
+var beforeElementStyles = (0, _core.css)({
+  '::before': {
+    width: skeletonItemElemSize,
+    height: skeletonItemElemSize,
+    marginRight: itemElemSpacing + itemElemSkeletonOffset,
+    marginLeft: itemElemSkeletonOffset,
+    flexShrink: 0,
+    backgroundColor: skeletonColor,
+    content: '""'
+  }
+});
+var avatarStyles = (0, _core.css)({
+  '::before': {
+    borderRadius: '100%'
+  }
+});
+var iconStyles = (0, _core.css)({
+  '::before': {
+    borderRadius: borderRadius
+  }
+});
 /**
  * __Skeleton item__
  *
@@ -21,22 +100,23 @@ var _skeletonItem = require("../internal/styles/menu-item/skeleton-item");
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-var SkeletonItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+
+var SkeletonItem = function SkeletonItem(_ref) {
   var hasAvatar = _ref.hasAvatar,
       hasIcon = _ref.hasIcon,
-      width = _ref.width,
       testId = _ref.testId,
-      isShimmering = _ref.isShimmering,
+      width = _ref.width,
       _ref$cssFn = _ref.cssFn,
-      cssFn = _ref$cssFn === void 0 ? function () {
-    return {};
-  } : _ref$cssFn;
+      cssFn = _ref$cssFn === void 0 ? _noop.default : _ref$cssFn;
   return (0, _core.jsx)("div", {
-    css: [// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    (0, _skeletonItem.skeletonItemCSS)(hasAvatar, hasIcon, width, isShimmering), // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    style: {
+      '--width': width
+    },
+    css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
     cssFn(undefined)],
     "data-testid": testId
   });
-});
+};
+
 var _default = SkeletonItem;
 exports.default = _default;

package/dist/cjs/menu-section/menu-group.js

@@ -13,10 +13,12 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _core = require("@emotion/core");
 
-var _menuGroup = require("../internal/styles/menu-section/menu-group");
-
 /** @jsx jsx */
-
+var groupStyles = (0, _core.css)({
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'auto'
+});
 /**
  * __Menu group__
  *
@@ -25,6 +27,7 @@ var _menuGroup = require("../internal/styles/menu-section/menu-group");
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/menu-group)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
+
 var MenuGroup = function MenuGroup(_ref) {
   var maxWidth = _ref.maxWidth,
       minWidth = _ref.minWidth,
@@ -33,13 +36,13 @@ var MenuGroup = function MenuGroup(_ref) {
       testId = _ref.testId,
       rest = (0, _objectWithoutProperties2.default)(_ref, ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId"]);
   return (0, _core.jsx)("div", (0, _extends2.default)({
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    css: (0, _menuGroup.menuGroupCSS)({
-      maxHeight: maxHeight,
+    style: {
+      minWidth: minWidth,
       maxWidth: maxWidth,
       minHeight: minHeight,
-      minWidth: minWidth
-    }),
+      maxHeight: maxHeight
+    },
+    css: groupStyles,
     "data-testid": testId
   }, rest));
 };

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

@@ -15,12 +15,78 @@ var _react = require("react");
 
 var _core = require("@emotion/core");
 
-var _section = require("../internal/styles/menu-section/section");
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _typography = require("@atlaskit/theme/typography");
+
+var _tokens = require("@atlaskit/tokens");
 
 var _headingItem = _interopRequireDefault(require("../menu-item/heading-item"));
 
 /** @jsx jsx */
+var gridSize = (0, _constants.gridSize)();
+var itemHeadingTopMargin = gridSize * 2.5;
+var itemHeadingBottomMargin = gridSize * 0.75; // Skeleton content is slightly shorter than the real content.
+// Because of that we slightly increase the top margin to offset this so the
+// containing size both real and skeleton always equal approx 30px.
 
+var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
+var skeletonHeadingHeight = gridSize;
+var skeletonHeadingMarginOffset = 3;
+var skeletonHeadingTopMargin = itemHeadingTopMargin + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset; // We want to move the entire body up by 3px without affecting the height of the skeleton container.
+
+var skeletonHeadingBottomMargin = itemHeadingBottomMargin + skeletonHeadingMarginOffset;
+var sectionPaddingTopBottom = gridSize * 0.75;
+var VAR_SEPARATOR_COLOR = '--ds-menu-seperator-color';
+var sectionStyles = (0, _core.css)({
+  '&::before, &::after': {
+    display: 'block',
+    height: sectionPaddingTopBottom,
+    content: '""'
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& [data-ds--menu--heading-item]': {
+    marginTop: itemHeadingTopMargin,
+    marginBottom: itemHeadingBottomMargin,
+    '&:first-of-type': {
+      marginTop: itemHeadingTopMargin - sectionPaddingTopBottom
+    }
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& [data-ds--menu--skeleton-heading-item]': {
+    marginTop: skeletonHeadingTopMargin,
+    marginBottom: skeletonHeadingBottomMargin,
+    '&:first-of-type': {
+      marginTop: skeletonHeadingTopMargin - sectionPaddingTopBottom
+    }
+  },
+  '&:focus': {
+    // 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.
+    // This makes the outline go inside by 1px so it can actually be displayed
+    // else it gets cut off from the overflow: scroll from the parent menu group.
+    outlineOffset: -1
+  }
+});
+var scrollableStyles = (0, _core.css)({
+  flexShrink: 1,
+  overflow: 'auto'
+});
+var unscrollableStyles = (0, _core.css)({
+  flexShrink: 0
+});
+var separatorStyles = (0, _core.css)({
+  borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ").concat((0, _tokens.token)('color.border.neutral', _colors.N30A), ")")
+});
+var noSeparatorStyles = (0, _core.css)({
+  // this is to ensure that adjacent sections without separators don't get additional margins.
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '[data-section] + &': {
+    marginTop: -6
+  }
+});
 /**
  * __Section__
  *
@@ -29,45 +95,33 @@ var _headingItem = _interopRequireDefault(require("../menu-item/heading-item"));
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/section)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-var Section = /*#__PURE__*/(0, _react.forwardRef)( // Type needed on props to extract types with extract react types.
-function (_ref, ref) {
+
+var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
       overrides = _ref.overrides,
       title = _ref.title,
       testId = _ref.testId,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["children", "overrides", "title", "testId"]);
-  return title !== undefined ? (0, _core.jsx)(SectionBase, (0, _extends2.default)({}, rest, {
-    testId: testId,
-    ref: ref,
-    "aria-label": title
-  }), (0, _core.jsx)(_headingItem.default // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+      isScrollable = _ref.isScrollable,
+      hasSeparator = _ref.hasSeparator,
+      id = _ref.id,
+      rest = (0, _objectWithoutProperties2.default)(_ref, ["children", "overrides", "title", "testId", "isScrollable", "hasSeparator", "id"]);
+  var childrenMarkup = title !== undefined ? (0, _core.jsx)(_react.Fragment, null, (0, _core.jsx)(_headingItem.default // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
   , {
     cssFn: overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn,
     testId: testId && "".concat(testId, "--heading"),
     "aria-hidden": true
-  }, title), children) : (0, _core.jsx)(SectionBase, (0, _extends2.default)({}, rest, {
-    ref: ref
-  }), children);
-});
-var SectionBase = /*#__PURE__*/(0, _react.forwardRef)( // Type needed on props to extract types with extract react types.
-function (_ref2, ref) {
-  var isScrollable = _ref2.isScrollable,
-      hasSeparator = _ref2.hasSeparator,
-      testId = _ref2.testId,
-      rest = (0, _objectWithoutProperties2.default)(_ref2, ["isScrollable", "hasSeparator", "testId"]);
-  return (0, _core.jsx)("div", (0, _extends2.default)({
-    // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
+  }, title), children) : children;
+  return (0, _core.jsx)("div", (0, _extends2.default)({}, rest, {
+    id: id // 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.
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    css: (0, _section.sectionCSS)(isScrollable, hasSeparator),
-    "data-testid": testId,
-    role: "group" // this is being used to target CSS selectors
-    // where emotion's API was falling a little short.
     ,
-    "data-section": true
-  }, rest, {
+    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? separatorStyles : noSeparatorStyles],
+    "aria-label": title,
+    "data-testid": testId,
+    role: "group",
+    "data-section": true,
     ref: ref
-  }));
+  }), childrenMarkup);
 });
 var _default = Section;
 exports.default = _default;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.1.3",
+	"version": "1.2.2",
 	"sideEffects": false
 }

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

@@ -0,0 +1,180 @@
+/** @jsx jsx */
+import { Fragment } from 'react';
+import { ClassNames, css, jsx } from '@emotion/core';
+import FocusRing from '@atlaskit/focus-ring';
+import { N20, N200, N30 } from '@atlaskit/theme/colors';
+import { fontSize as fontSizeFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
+import { headingSizes } from '@atlaskit/theme/typography';
+import { token } from '@atlaskit/tokens';
+
+const defaultRender = (Component, props) => jsx(Component, props);
+
+const gridSize = gridSizeFn();
+const fontSize = fontSizeFn();
+const itemTopBottomPadding = gridSize;
+const itemSidePadding = gridSize * 2.5;
+const itemElemSpacing = gridSize * 1.5;
+const itemDescriptionSpacing = gridSize * 0.375;
+const itemMinHeight = gridSize * 5;
+const beforeElementStyles = css({
+  display: 'flex',
+  marginRight: itemElemSpacing,
+  alignItems: 'center',
+  flexShrink: 0
+});
+const afterElementStyles = css({
+  display: 'flex',
+  marginLeft: itemElemSpacing,
+  alignItems: 'center',
+  flexShrink: 0
+});
+const contentStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  flexDirection: 'column',
+  flexGrow: 1,
+  // Fix - avoid clipped text descenders when using standard 16px line-height
+  lineHeight: 1.22,
+  outline: 'none',
+  overflow: 'hidden',
+  textAlign: 'left'
+});
+const truncateStyles = css({
+  display: 'block',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+const wordBreakStyles = css({
+  wordBreak: 'break-word'
+});
+const descriptionStyles = css({
+  marginTop: itemDescriptionSpacing,
+  color: token('color.text.lowEmphasis', N200),
+  fontSize: headingSizes.h200.size
+});
+const primitiveStyles = css({
+  display: 'flex',
+  boxSizing: 'border-box',
+  width: '100%',
+  minHeight: itemMinHeight,
+  margin: 0,
+  padding: `${itemTopBottomPadding}px ${itemSidePadding}px`,
+  alignItems: 'center',
+  border: 0,
+  fontSize: fontSize,
+  outline: 0,
+  textDecoration: 'none',
+  userSelect: 'none',
+  '::-moz-focus-inner': {
+    border: 0
+  },
+  ':hover': {
+    textDecoration: 'none'
+  }
+});
+const interactiveStyles = css({
+  cursor: 'pointer'
+});
+const unselectedStyles = css({
+  backgroundColor: 'transparent',
+  color: 'currentColor',
+  ':visited': {
+    color: 'currentColor'
+  },
+  ':hover': {
+    backgroundColor: token('color.background.transparentNeutral.hover', N20),
+    color: 'currentColor'
+  },
+  ':active': {
+    backgroundColor: token('color.background.transparentNeutral.pressed', N30),
+    boxShadow: 'none',
+    color: 'currentColor'
+  }
+});
+const disabledStyles = css({
+  cursor: 'not-allowed',
+  '&, :hover, :active': {
+    backgroundColor: 'transparent',
+    color: token('color.text.disabled', N200)
+  }
+});
+const selectedStyles = css({
+  backgroundColor: token('color.background.selected.resting', N20),
+  // Suppress the need for a fallback as selected color isn't used in the non-tokens world.
+  // When removing fallbacks make sure to remove this supression.
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  color: token('color.text.selected'),
+  ':visited': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    color: token('color.text.selected')
+  },
+  ':hover': {
+    backgroundColor: token('color.background.selected.hover', N20),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    color: token('color.text.selected')
+  },
+  ':active': {
+    backgroundColor: token('color.background.selected.pressed', N30),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    color: token('color.text.selected')
+  }
+});
+/**
+ * __Menu item primitive__
+ *
+ * Menu item primitive contains all the styles for menu items,
+ * including support for selected, disabled, and interaction states.
+ *
+ * Using children as function prop you wire up this to your own host element.
+ *
+ * ```jsx
+ * <MenuItemPrimitive>
+ *   {({ children, ...props }) => <button {...props}>{children}</button>}
+ * </MenuItemPrimitive>
+ * ```
+ */
+
+const MenuItemPrimitive = ({
+  children,
+  title,
+  description,
+  iconAfter,
+  iconBefore,
+  overrides,
+  className,
+  shouldTitleWrap = false,
+  shouldDescriptionWrap = false,
+  isDisabled = false,
+  isSelected = false
+}) => {
+  const renderTitle = overrides && overrides.Title && overrides.Title.render || defaultRender;
+  return jsx(ClassNames, null, ({
+    css: cn,
+    cx
+  }) => {
+    return jsx(FocusRing, {
+      isInset: true
+    }, children({
+      className: cx([cn([primitiveStyles, !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && selectedStyles, isDisabled ? disabledStyles : interactiveStyles]), className]),
+      children: jsx(Fragment, null, iconBefore && jsx("span", {
+        "data-item-elem-before": true,
+        css: beforeElementStyles
+      }, iconBefore), title && jsx("span", {
+        css: contentStyles
+      }, renderTitle('span', {
+        children: title,
+        className: cn(shouldTitleWrap ? wordBreakStyles : truncateStyles),
+        'data-item-title': true
+      }), description && jsx("span", {
+        "data-item-description": true,
+        css: [descriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
+      }, description)), iconAfter && jsx("span", {
+        "data-item-elem-after": true,
+        css: afterElementStyles
+      }, iconAfter))
+    }));
+  });
+};
+
+export default MenuItemPrimitive;

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

@@ -3,14 +3,14 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
 import { jsx } from '@emotion/core';
-import BaseItem from '../internal/components/base-item';
+import noop from '@atlaskit/ds-lib/noop';
+import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 import { useBlurOnMouseDown } from '../internal/hooks/use-blur-on-mouse-down';
-import { buttonItemCSS } from '../internal/styles/menu-item/button-item';
 
 /**
  * __Button item__
  *
- * A button item is used to populate a menu with items that need to be a button element.
+ * A button item is used to populate a menu with items that are buttons.
  *
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/button-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
@@ -19,7 +19,7 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef( // Type needed on
 (props, ref) => {
   const {
     children,
-    cssFn = () => ({}),
+    cssFn = noop,
     description,
     iconAfter,
     iconBefore,
@@ -31,7 +31,7 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef( // Type needed on
     onMouseDown,
     shouldTitleWrap,
     shouldDescriptionWrap,
-    ...others
+    ...rest
   } = props;
   const onMouseDownHandler = useBlurOnMouseDown(onMouseDown);
 
@@ -39,27 +39,34 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef( // Type needed on
     return null;
   }
 
-  return jsx("button", _extends({
-    css: [// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    buttonItemCSS(isDisabled, isSelected), // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+  return jsx(MenuItemPrimitive, _extends({}, rest, {
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    overrides: overrides,
+    iconBefore: iconBefore,
+    iconAfter: iconAfter,
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    description: description,
+    title: children,
+    shouldTitleWrap: shouldTitleWrap,
+    shouldDescriptionWrap: shouldDescriptionWrap,
+    css: // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
     cssFn({
       isSelected,
       isDisabled
-    })],
-    type: "button",
-    "data-testid": testId,
+    })
+  }), ({
+    children,
+    className
+  }) => jsx("button", _extends({
+    "data-testid": testId
+  }, rest, {
+    className: className,
+    ref: ref,
     disabled: isDisabled,
     onClick: onClick,
     onMouseDown: onMouseDownHandler,
-    ref: ref
-  }, others), jsx(BaseItem // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-  , {
-    overrides: overrides,
-    iconBefore: iconBefore,
-    iconAfter: iconAfter,
-    description: description,
-    shouldTitleWrap: shouldTitleWrap,
-    shouldDescriptionWrap: shouldDescriptionWrap
-  }, children));
+    type: "button"
+  }), children));
 }));
 export default ButtonItem;